#f7f5f0

#e8e0d2

#d9ccb5

#c0b499

Vanilla



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

White

Brown

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f7f5f0	rgb(247, 245, 240)	hsl(43 30% 95%)	hwb(43 94% 3.1%)	lch(96.6 2.66 89.1)	lab(96.6 0.043 2.66)	cmyk 0%, 1%, 3%, 3%
	#e8e0d2	rgb(232, 224, 210)	hsl(38 32% 87%)	hwb(38 82% 9%)	lch(89.5 7.97 82.3)	lab(89.5 1.06 7.9)	cmyk 0%, 3%, 9%, 9%
	#d9ccb5	rgb(217, 204, 181)	hsl(38 32% 78%)	hwb(38 71% 15%)	lch(82.7 13.4 81.9)	lab(82.7 1.89 13.2)	cmyk 0%, 6%, 17%, 15%
	#c0b499	rgb(192, 180, 153)	hsl(42 24% 68%)	hwb(42 60% 25%)	lch(73.8 15.5 85.7)	lab(73.8 1.15 15.5)	cmyk 0%, 6%, 20%, 25%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#f7f5f0

AA - 1.08



#e8e0d2

AA - 1.31



#d9ccb5

AA - 1.58



#c0b499

AA - 2.05



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(97% 0 0.007), oklab(90.9% 0.003 0.02), oklab(85% 0.005 0.034), oklab(77.3% 0.002 0.039))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #f7f5f0, #e8e0d2, #d9ccb5, #c0b499)

Colors



<!-- Primary Colors -->
<color name="vanilla_color_10">#f7f5f0</color>
<color name="vanilla_color_20">#e8e0d2</color>
<color name="vanilla_color_30">#d9ccb5</color>
<color name="vanilla_color_40">#c0b499</color>

Gradient PRO

Pro feature only

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

PWA prompt