#595959

#737373

#45d9e6

#fff4e8

#f7ea36

Flat 1

#595959

#737373

#45d9e6

#fff4e8

#f7ea36



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



Quick view

Inspect colors in multiple color spaces

Colors overview

Grey

Cyan

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#595959	rgb(89, 89, 89)	hsl(none 0% 35%)	hwb(none 35% 65%)	lch(37.8 0 none)	lab(37.8 0 0)	cmyk 0%, 0%, 0%, 65%
	#737373	rgb(115, 115, 115)	hsl(none 0% 45%)	hwb(none 45% 55%)	lch(48.4 0 none)	lab(48.4 0 0)	cmyk 0%, 0%, 0%, 55%
	#45d9e6	rgb(69, 217, 230)	hsl(180 76% 59%)	hwb(180 27% 9.8%)	lch(79.5 41.2 206)	lab(79.5 -36.9 -18.4)	cmyk 70%, 6%, 0%, 10%
	#fff4e8	rgb(255, 244, 232)	hsl(31 100% 95%)	hwb(31 91% 0%)	lch(96.8 7.56 72)	lab(96.8 2.34 7.19)	cmyk 0%, 4%, 9%, 0%
	#f7ea36	rgb(247, 234, 54)	hsl(56 92% 59%)	hwb(56 21% 3.1%)	lch(91.6 81.1 96.2)	lab(91.6 -8.74 80.7)	cmyk 0%, 5%, 78%, 3%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#595959

AAA - 7



#737373

AA - 4.74



#45d9e6

AA - 1.7



#fff4e8

AA - 1.08



#f7ea36

AA - 1.25



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.

HDR color space

HDR oklab colors



background: linear-gradient(45deg, oklab(46.4% 0 0), oklab(55.6% 0 0), oklab(81.4% -0.112 -0.049), oklab(97.3% 0.007 0.019), oklab(91.9% -0.047 0.176))

Fallback colors



background: linear-gradient(45deg, #595959, #737373, #45d9e6, #fff4e8, #f7ea36)

Colors



<!-- Primary Colors -->
<color name="flat_1_color_10">#595959</color>
<color name="flat_1_color_20">#737373</color>
<color name="flat_1_color_30">#45d9e6</color>
<color name="flat_1_color_40">#fff4e8</color>
<color name="flat_1_color_50">#f7ea36</color>

PWA prompt