Giraffe

#EAD084

#A5632B

#78441E

#F2EACC

#372C21

Actions

Explore the palette in different formats, and actions.

Colors overview

Yellow

Brown

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#ead084	rgb(234, 208, 132)	hsl(45 71% 72%)	oklab(86% 0 0.1)	oklch(86% 0.1 91)	color(display-p3 0.9 0.82 0.56)
	#a5632b	rgb(165, 99, 43)	hsl(28 59% 41%)	oklab(56% 0.06 0.09)	oklch(56% 0.11 58)	color(display-p3 0.61 0.4 0.21)
	#78441e	rgb(120, 68, 30)	hsl(25 60% 29%)	oklab(44% 0.05 0.07)	oklch(44% 0.09 54)	color(display-p3 0.44 0.28 0.15)
	#f2eacc	rgb(242, 234, 204)	hsl(47 59% 87%)	oklab(94% 0 0.04)	oklch(94% 0.04 95)	color(display-p3 0.94 0.92 0.81)
	#372c21	rgb(55, 44, 33)	hsl(30 25% 17%)	oklab(30% 0.01 0.02)	oklch(30% 0.02 67)	color(display-p3 0.21 0.17 0.13)

 Click on a color value to copy it to your clipboard.

Contrast ratios checker

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

#EAD084

AA - 1.51



#A5632B

AA - 4.75



#78441E

AAA - 7.94



#F2EACC

AA - 1.2



#372C21

AAA - 13.59



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(86.3% -0.002 0.1), oklab(56.3% 0.059 0.093), oklab(44.2% 0.052 0.071), oklab(93.6% -0.003 0.04), oklab(30.2% 0.01 0.023))

Fallback colors



background: linear-gradient(45deg, #EAD084, #A5632B, #78441E, #F2EACC, #372C21)

Colors



<!-- Primary Colors -->
<color name="giraffe_color_10">#EAD084</color>
<color name="giraffe_color_20">#A5632B</color>
<color name="giraffe_color_30">#78441E</color>
<color name="giraffe_color_40">#F2EACC</color>
<color name="giraffe_color_50">#372C21</color>

PWA prompt