Oak

#fae6be

#fbba00

#e5781e

#5a3d2b



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

Yellow

Orange

Brown

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#fae6be	rgb(250, 230, 190)	hsl(40 86% 86%)	hwb(40 75% 2%)	lch(92.2 22.3 83.3)	lab(92.2 2.59 22.2)	cmyk 0%, 8%, 24%, 2%
	#fbba00	rgb(251, 186, 0)	hsl(44 100% 49%)	hwb(44 0% 1.6%)	lch(80 83 79.3)	lab(80 15.4 81.5)	cmyk 0%, 26%, 100%, 2%
	#e5781e	rgb(229, 120, 30)	hsl(27 79% 51%)	hwb(27 12% 10%)	lch(62.5 74.7 58.1)	lab(62.5 39.5 63.4)	cmyk 0%, 48%, 87%, 10%
	#5a3d2b	rgb(90, 61, 43)	hsl(23 35% 26%)	hwb(23 17% 65%)	lch(28.8 20 55.3)	lab(28.8 11.4 16.4)	cmyk 0%, 32%, 52%, 65%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#fae6be

AA - 1.22



#fbba00

AA - 1.73



#e5781e

AA - 2.98



#5a3d2b

AAA - 9.82



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(93.1% 0.005 0.056), oklab(82.7% 0.02 0.169), oklab(68.5% 0.098 0.131), oklab(38.8% 0.03 0.04))

Fallback colors



background: linear-gradient(45deg, #fae6be, #fbba00, #e5781e, #5a3d2b)

Colors



<!-- Primary Colors -->
<color name="oak_color_10">#fae6be</color>
<color name="oak_color_20">#fbba00</color>
<color name="oak_color_30">#e5781e</color>
<color name="oak_color_40">#5a3d2b</color>

PWA prompt