#f9e7cf

#f3cfa0

#ffb36e

#ee975b

Aesthetic



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

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f9e7cf	rgb(249, 231, 207)	hsl(34 78% 89%)	hwb(34 81% 2.4%)	lch(92.6 14.5 75.9)	lab(92.6 3.52 14.1)	cmyk 0%, 7%, 17%, 2%
	#f3cfa0	rgb(243, 207, 160)	hsl(34 78% 79%)	hwb(34 63% 4.7%)	lch(85.4 29.5 73.7)	lab(85.4 8.27 28.4)	cmyk 0%, 15%, 34%, 5%
	#ffb36e	rgb(255, 179, 110)	hsl(29 100% 72%)	hwb(29 43% 0%)	lch(79.3 52 63.3)	lab(79.3 23.4 46.5)	cmyk 0%, 30%, 57%, 0%
	#ee975b	rgb(238, 151, 91)	hsl(24 81% 65%)	hwb(24 36% 6.7%)	lch(70.8 54.2 56.9)	lab(70.8 29.6 45.4)	cmyk 0%, 37%, 62%, 7%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#f9e7cf

AA - 1.2



#f3cfa0

AA - 1.47



#ffb36e

AA - 1.76



#ee975b

AA - 2.27



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(93.6% 0.01 0.036), oklab(87.4% 0.02 0.071), oklab(82.5% 0.058 0.109), oklab(75.3% 0.076 0.105))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #f9e7cf, #f3cfa0, #ffb36e, #ee975b)

Colors



<!-- Primary Colors -->
<color name="aesthetic_color_10">#f9e7cf</color>
<color name="aesthetic_color_20">#f3cfa0</color>
<color name="aesthetic_color_30">#ffb36e</color>
<color name="aesthetic_color_40">#ee975b</color>

Gradient PRO

Pro feature only

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

PWA prompt