Fireside

#8E3118

#B24926

#D96448

#F28969

#F2A37A

Actions

Explore the palette in different formats, and actions.

Colors overview

Orange

Brown

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#8e3118	rgb(142, 49, 24)	hsl(13 71% 33%)	oklab(45% 0.11 0.08)	oklch(45% 0.13 36)	color(display-p3 0.51 0.22 0.13)
	#b24926	rgb(178, 73, 38)	hsl(15 65% 42%)	oklab(54% 0.11 0.09)	oklch(54% 0.15 38)	color(display-p3 0.65 0.31 0.19)
	#d96448	rgb(217, 100, 72)	hsl(12 66% 57%)	oklab(64% 0.13 0.09)	oklch(64% 0.15 35)	color(display-p3 0.79 0.42 0.31)
	#f28969	rgb(242, 137, 105)	hsl(14 84% 68%)	oklab(74% 0.11 0.08)	oklch(74% 0.14 38)	color(display-p3 0.89 0.56 0.44)
	#f2a37a	rgb(242, 163, 122)	hsl(20 82% 71%)	oklab(78% 0.07 0.08)	oklch(78% 0.11 48)	color(display-p3 0.9 0.65 0.51)

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

#8E3118

AAA - 8.06



#B24926

AA - 5.42



#D96448

AA - 3.57



#F28969

AA - 2.45



#F2A37A

AA - 2.03



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(44.6% 0.107 0.077), oklab(53.9% 0.114 0.09), oklab(64.1% 0.126 0.087), oklab(73.7% 0.108 0.083), oklab(78.4% 0.073 0.081))

Fallback colors



background: linear-gradient(45deg, #8E3118, #B24926, #D96448, #F28969, #F2A37A)

Colors



<!-- Primary Colors -->
<color name="fireside_color_10">#8E3118</color>
<color name="fireside_color_20">#B24926</color>
<color name="fireside_color_30">#D96448</color>
<color name="fireside_color_40">#F28969</color>
<color name="fireside_color_50">#F2A37A</color>

PWA prompt