#754414

#995D27

#A37236

#B0864C

Oak



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

Brown

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#754414	rgb(117, 68, 20)	hsl(30 71% 27%)	hwb(30 7.8% 54%)	lch(34.3 41 62.7)	lab(34.3 18.8 36.4)	cmyk 0%, 42%, 83%, 54%
	#995d27	rgb(153, 93, 39)	hsl(28 59% 38%)	hwb(28 15% 40%)	lch(45.7 46 61.7)	lab(45.7 21.8 40.5)	cmyk 0%, 39%, 75%, 40%
	#a37236	rgb(163, 114, 54)	hsl(33 50% 43%)	hwb(33 21% 36%)	lch(52.3 43.3 69)	lab(52.3 15.5 40.4)	cmyk 0%, 30%, 67%, 36%
	#b0864c	rgb(176, 134, 76)	hsl(35 40% 49%)	hwb(35 30% 31%)	lch(59.1 39.2 72.7)	lab(59.1 11.6 37.4)	cmyk 0%, 24%, 57%, 31%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#754414

AAA - 8.09



#995D27

AA - 5.31



#A37236

AA - 4.18



#B0864C

AA - 3.3



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(43.7% 0.045 0.078), oklab(53.6% 0.053 0.089), oklab(59.1% 0.035 0.092), oklab(64.8% 0.025 0.088))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #754414, #995D27, #A37236, #B0864C)

Colors



<!-- Primary Colors -->
<color name="oak_color_10">#754414</color>
<color name="oak_color_20">#995D27</color>
<color name="oak_color_30">#A37236</color>
<color name="oak_color_40">#B0864C</color>

Gradient PRO

Pro feature only

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

PWA prompt