#182e4d

#094089

#289dbc

Innovation



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

Black

Cyan

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#182e4d	rgb(24, 46, 77)	hsl(220 52% 20%)	hwb(220 9.4% 70%)	lch(18.4 22.1 270)	lab(18.4 -0.119 -22.1)	cmyk 69%, 40%, 0%, 70%
	#094089	rgb(9, 64, 137)	hsl(210 88% 29%)	hwb(210 3.5% 46%)	lch(27.4 46.9 279)	lab(27.4 7.21 -46.3)	cmyk 93%, 53%, 0%, 46%
	#289dbc	rgb(40, 157, 188)	hsl(190 65% 45%)	hwb(190 16% 26%)	lch(59.6 35.6 226)	lab(59.6 -24.6 -25.7)	cmyk 79%, 16%, 0%, 26%

 Click a color format to copy to your clipboard.

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

#182e4d

AAA - 13.66



#094089

AAA - 9.97



#289dbc

AA - 3.16



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(30% -0.014 -0.062), oklab(38.5% -0.027 -0.131), oklab(64.7% -0.082 -0.07))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #182e4d, #094089, #289dbc)

Colors



<!-- Primary Colors -->
<color name="innovation_color_10">#182e4d</color>
<color name="innovation_color_20">#094089</color>
<color name="innovation_color_30">#289dbc</color>

Gradient PRO

Pro feature only

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

PWA prompt