Bells

#ffe572

#c28333

#d12f24

#992120

#243f20

Actions

Explore the palette in different formats, and actions.

Colors overview

Yellow

Red

Green

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#ffe572	rgb(255, 229, 114)	hsl(49 100% 72%)	oklab(92% -0.02 0.14)	oklch(92% 0.14 97)	color(display-p3 0.98 0.9 0.51)
	#c28333	rgb(194, 131, 51)	hsl(34 58% 48%)	oklab(66% 0.04 0.11)	oklch(66% 0.12 69)	color(display-p3 0.72 0.52 0.26)
	#d12f24	rgb(209, 47, 36)	hsl(3.8 71% 48%)	oklab(56% 0.17 0.1)	oklch(56% 0.2 29)	color(display-p3 0.75 0.24 0.19)
	#992120	rgb(153, 33, 32)	hsl(0.5 65% 36%)	oklab(45% 0.14 0.07)	oklch(45% 0.16 27)	color(display-p3 0.55 0.17 0.15)
	#243f20	rgb(36, 63, 32)	hsl(110 33% 19%)	oklab(34% -0.05 0.04)	oklch(34% 0.06 140)	color(display-p3 0.17 0.24 0.14)

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

#ffe572

AA - 1.25



#c28333

AA - 3.18



#d12f24

AA - 5.06



#992120

AAA - 8.09



#243f20

AAA - 11.62



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(92.1% -0.016 0.137), oklab(66% 0.044 0.113), oklab(56.3% 0.174 0.097), oklab(44.9% 0.14 0.07), oklab(33.7% -0.048 0.039))

Fallback colors



background: linear-gradient(45deg, #ffe572, #c28333, #d12f24, #992120, #243f20)

Colors



<!-- Primary Colors -->
<color name="bells_color_10">#ffe572</color>
<color name="bells_color_20">#c28333</color>
<color name="bells_color_30">#d12f24</color>
<color name="bells_color_40">#992120</color>
<color name="bells_color_50">#243f20</color>

PWA prompt