Chomp

#5D688A

#DD7661

#FACB4A

#E4E2E1

#3B3F59

Actions

Explore the palette in different formats, and actions.

Colors overview

Black

Red

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#5d688a	rgb(93, 104, 138)	hsl(230 19% 45%)	oklab(52% 0 -0.06)	oklch(52% 0.06 270)	color(display-p3 0.37 0.41 0.53)
	#dd7661	rgb(221, 118, 97)	hsl(10 65% 62%)	oklab(68% 0.11 0.07)	oklch(68% 0.13 33)	color(display-p3 0.81 0.48 0.4)
	#facb4a	rgb(250, 203, 74)	hsl(44 95% 64%)	oklab(86% 0 0.15)	oklch(86% 0.15 88)	color(display-p3 0.95 0.8 0.38)
	#e4e2e1	rgb(228, 226, 225)	hsl(20 5.3% 89%)	oklab(91% 0 0)	oklch(91% 0 49)	color(display-p3 0.89 0.89 0.88)
	#3b3f59	rgb(59, 63, 89)	hsl(230 20% 29%)	oklab(38% 0.01 -0.04)	oklch(38% 0.04 280)	color(display-p3 0.23 0.25 0.34)

 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.

#5D688A

AA - 5.5



#DD7661

AA - 3.07



#FACB4A

AA - 1.53



#E4E2E1

AA - 1.29



#3B3F59

AAA - 10.28



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(52.2% 0 -0.056), oklab(67.8% 0.112 0.072), oklab(86.1% 0.004 0.151), oklab(91.4% 0.002 0.002), oklab(37.5% 0.006 -0.045))

Fallback colors



background: linear-gradient(45deg, #5D688A, #DD7661, #FACB4A, #E4E2E1, #3B3F59)

Colors



<!-- Primary Colors -->
<color name="chomp_color_10">#5D688A</color>
<color name="chomp_color_20">#DD7661</color>
<color name="chomp_color_30">#FACB4A</color>
<color name="chomp_color_40">#E4E2E1</color>
<color name="chomp_color_50">#3B3F59</color>

PWA prompt