#e36b58

#7d7d7d

#8f9bc4

#ced6f2

#fffaf2

Flat 2

#e36b58

#7d7d7d

#8f9bc4

#ced6f2

#fffaf2



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

Orange

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#e36b58	rgb(227, 107, 88)	hsl(8.2 71% 62%)	hwb(8.2 35% 11%)	lch(60.1 57.7 36.1)	lab(60.1 46.6 34)	cmyk 0%, 53%, 61%, 11%
	#7d7d7d	rgb(125, 125, 125)	hsl(none 0% 49%)	hwb(none 49% 51%)	lch(52.4 0 none)	lab(52.4 0 0)	cmyk 0%, 0%, 0%, 51%
	#8f9bc4	rgb(143, 155, 196)	hsl(230 31% 66%)	hwb(230 56% 23%)	lch(64.1 22.9 276)	lab(64.1 2.59 -22.8)	cmyk 27%, 21%, 0%, 23%
	#ced6f2	rgb(206, 214, 242)	hsl(230 58% 88%)	hwb(230 81% 5.1%)	lch(85.7 14.8 275)	lab(85.7 1.35 -14.8)	cmyk 15%, 12%, 0%, 5%
	#fffaf2	rgb(255, 250, 242)	hsl(37 100% 97%)	hwb(37 95% 0%)	lch(98.5 4.52 81)	lab(98.5 0.708 4.47)	cmyk 0%, 2%, 5%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#e36b58

AA - 3.22



#7d7d7d

AA - 4.11



#8f9bc4

AA - 2.74



#ced6f2

AA - 1.44



#fffaf2

AA - 1.03



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(66.8% 0.132 0.078), oklab(59% 0 0), oklab(69.5% 0.002 -0.062), oklab(87.9% 0.002 -0.04), oklab(98.7% 0.002 0.012))

Fallback colors



background: linear-gradient(45deg, #e36b58, #7d7d7d, #8f9bc4, #ced6f2, #fffaf2)

Colors



<!-- Primary Colors -->
<color name="flat_2_color_10">#e36b58</color>
<color name="flat_2_color_20">#7d7d7d</color>
<color name="flat_2_color_30">#8f9bc4</color>
<color name="flat_2_color_40">#ced6f2</color>
<color name="flat_2_color_50">#fffaf2</color>

PWA prompt