#03045E

#023E8A

#0077B6

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
	#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

HDR color space

HDR oklab colors



--angle: 45deg; 
background: linear-gradient(var(--angle), oklab(22.5% -0.011 -0.146), oklab(38% -0.029 -0.136), oklab(54.6% -0.06 -0.117))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #03045E, #023E8A, #0077B6)

Colors



<!-- Primary Colors -->
<color name="lighting_bolt_color_10">#03045E</color>
<color name="lighting_bolt_color_20">#023E8A</color>
<color name="lighting_bolt_color_30">#0077B6</color>

Gradient PRO

Pro feature only

Get access to all app tokens, export files, and more.

PWA prompt