Xebel

#AC1313

#ECD3C3

#04708C

#034863

#023248

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Blue

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#ac1313	rgb(172, 19, 19)	hsl(0 80% 37%)	oklab(48% 0.16 0.09)	oklch(48% 0.18 28)	color(display-p3 0.62 0.15 0.12)
	#ecd3c3	rgb(236, 211, 195)	hsl(23 52% 85%)	oklab(88% 0.02 0.03)	oklch(88% 0.04 55)	color(display-p3 0.91 0.83 0.77)
	#04708c	rgb(4, 112, 140)	hsl(190 94% 28%)	oklab(51% -0.07 -0.06)	oklch(51% 0.09 220)	color(display-p3 0.19 0.43 0.54)
	#034863	rgb(3, 72, 99)	hsl(200 94% 20%)	oklab(38% -0.05 -0.06)	oklch(38% 0.08 230)	color(display-p3 0.11 0.28 0.38)
	#023248	rgb(2, 50, 72)	hsl(200 95% 15%)	oklab(30% -0.04 -0.05)	oklch(30% 0.06 230)	color(display-p3 0.07 0.19 0.27)

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

#AC1313

AAA - 7.35



#ECD3C3

AA - 1.43



#04708C

AA - 5.67



#034863

AAA - 9.94



#023248

AAA - 13.52



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(47.5% 0.163 0.087), oklab(88.3% 0.02 0.029), oklab(50.6% -0.068 -0.064), oklab(37.8% -0.046 -0.06), oklab(30% -0.036 -0.051))

Fallback colors



background: linear-gradient(45deg, #AC1313, #ECD3C3, #04708C, #034863, #023248)

Colors



<!-- Primary Colors -->
<color name="xebel_color_10">#AC1313</color>
<color name="xebel_color_20">#ECD3C3</color>
<color name="xebel_color_30">#04708C</color>
<color name="xebel_color_40">#034863</color>
<color name="xebel_color_50">#023248</color>

PWA prompt