Town

#ded22f

#ede247

#ffefe0

#f78a66

#fafafa

Actions

Explore the palette in different formats, and actions.

Colors overview

Yellow

Red

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#ded22f	rgb(222, 210, 47)	hsl(56 73% 53%)	oklab(85% -0.04 0.16)	oklch(85% 0.17 100)	color(display-p3 0.86 0.83 0.32)
	#ede247	rgb(237, 226, 71)	hsl(56 82% 60%)	oklab(90% -0.04 0.16)	oklch(90% 0.17 110)	color(display-p3 0.92 0.89 0.39)
	#ffefe0	rgb(255, 239, 224)	hsl(29 100% 94%)	oklab(96% 0.01 0.02)	oklch(96% 0.03 66)	color(display-p3 0.99 0.94 0.89)
	#f78a66	rgb(247, 138, 102)	hsl(15 90% 68%)	oklab(74% 0.11 0.09)	oklch(74% 0.14 39)	color(display-p3 0.91 0.56 0.43)
	#fafafa	rgb(250, 250, 250)	hsl(none 0% 98%)	oklab(99% 0 0)	oklch(99% 0 none)	color(display-p3 0.98 0.98 0.98)

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

#ded22f

AA - 1.57



#ede247

AA - 1.34



#ffefe0

AA - 1.12



#f78a66

AA - 2.39



#fafafa

AA - 1.04



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(84.8% -0.043 0.163), oklab(89.5% -0.044 0.162), oklab(96.1% 0.011 0.024), oklab(74.4% 0.11 0.089), oklab(98.5% 0 0))

Fallback colors



background: linear-gradient(45deg, #ded22f, #ede247, #ffefe0, #f78a66, #fafafa)

Colors



<!-- Primary Colors -->
<color name="town_color_10">#ded22f</color>
<color name="town_color_20">#ede247</color>
<color name="town_color_30">#ffefe0</color>
<color name="town_color_40">#f78a66</color>
<color name="town_color_50">#fafafa</color>

PWA prompt