Lighting Bolt

Web code
Get CSS, SCSS, & Tailwind code for development
ī”
App tokens
Get Android, Flutter, Swift, & MAUI tokens
ļ
HDR gradient
Switch to HDR to enhance the gradient
ī¢
Quick view
Inspect colors in multiple color spaces
Colors overview
ī½Blue
Color | HEX | RGB | HSL | HWB | LCH | LAB | CMYK | Color schemes |
---|---|---|---|---|---|---|---|---|
ī½ | #03045e | rgb(3, 4, 94) | hsl(240 94% 19%) | hwb(240 1.2% 63%) | lch(7.1 60.2 300) | lab(7.1 30.3 -52.1) | cmyk 97%, 96%, 0%, 63% | |
ī½ | #023e8a | rgb(2, 62, 138) | hsl(210 97% 27%) | hwb(210 0.78% 46%) | lch(26.8 48.8 280) | lab(26.8 8.38 -48) | cmyk 99%, 55%, 0%, 46% | |
ī½ | #0077b6 | rgb(0, 119, 182) | hsl(200 100% 36%) | hwb(200 0% 29%) | lch(47.1 43.1 256) | lab(47.1 -10.3 -41.8) | cmyk 100%, 35%, 0%, 29% |
ī Click a color format to copy to your clipboard.
Contrast ratios checker
Click one color card to view the complete contrast checker tests.
#03045E
AAA - 17.75
ī
#023E8A
AAA - 10.2
ī
#0077B6
AA - 4.86
ī
Color blindness
The simulation of color blindness may not be 100% accurate sometimes.
Colors preview as gradient with protanopia
Colors preview as palette with protanopia
UI components preview
Preview the gradient in different UI components.
īæ
32°
CPU
īæ
48°
GPU
ī
100%
Usage
ļ
¶
11°
Rain

70%
Storage
PWA prompt