October

#df4d3b

#f2614e

#f67833

#fead4b

#ffe3b2

Actions

Explore the palette in different formats, and actions.

Colors overview

Orange

Yellow

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#df4d3b	rgb(223, 77, 59)	hsl(6.6 72% 55%)	oklab(62% 0.16 0.09)	oklch(62% 0.19 30)	color(display-p3 0.81 0.34 0.27)
	#f2614e	rgb(242, 97, 78)	hsl(7 86% 63%)	oklab(67% 0.16 0.09)	oklch(67% 0.18 30)	color(display-p3 0.88 0.42 0.34)
	#f67833	rgb(246, 120, 51)	hsl(21 92% 58%)	oklab(71% 0.12 0.12)	oklch(71% 0.17 46)	color(display-p3 0.9 0.5 0.27)
	#fead4b	rgb(254, 173, 75)	hsl(33 99% 65%)	oklab(81% 0.05 0.14)	oklch(81% 0.15 68)	color(display-p3 0.95 0.69 0.37)
	#ffe3b2	rgb(255, 227, 178)	hsl(38 100% 85%)	oklab(93% 0.01 0.07)	oklch(93% 0.07 81)	color(display-p3 0.98 0.89 0.72)

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

#df4d3b

AA - 3.99



#f2614e

AA - 3.18



#f67833

AA - 2.74



#fead4b

AA - 1.85



#ffe3b2

AA - 1.24



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(61.9% 0.16 0.093), oklab(67.5% 0.158 0.091), oklab(70.9% 0.121 0.125), oklab(80.9% 0.055 0.135), oklab(92.7% 0.01 0.069))

Fallback colors



background: linear-gradient(45deg, #df4d3b, #f2614e, #f67833, #fead4b, #ffe3b2)

Colors



<!-- Primary Colors -->
<color name="october_color_10">#df4d3b</color>
<color name="october_color_20">#f2614e</color>
<color name="october_color_30">#f67833</color>
<color name="october_color_40">#fead4b</color>
<color name="october_color_50">#ffe3b2</color>

PWA prompt