#AC1313

#ECD3C3

#04708C

#034863

#023248

Xebel

#AC1313

#ECD3C3

#04708C

#034863

#023248



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



Quick view

Inspect colors in multiple color spaces

Colors overview

Red

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ac1313	rgb(172, 19, 19)	hsl(0 80% 37%)	hwb(0 7.5% 33%)	lch(37.3 72.9 37.5)	lab(37.3 57.9 44.4)	cmyk 0%, 89%, 89%, 33%
	#ecd3c3	rgb(236, 211, 195)	hsl(23 52% 85%)	hwb(23 76% 7.5%)	lch(86.3 13.3 57.8)	lab(86.3 7.12 11.3)	cmyk 0%, 11%, 17%, 7%
	#04708c	rgb(4, 112, 140)	hsl(190 94% 28%)	hwb(190 1.6% 45%)	lch(43.1 30.5 230)	lab(43.1 -19.5 -23.4)	cmyk 97%, 20%, 0%, 45%
	#034863	rgb(3, 72, 99)	hsl(200 94% 20%)	hwb(200 1.2% 61%)	lch(27.9 24.7 242)	lab(27.9 -11.7 -21.7)	cmyk 97%, 27%, 0%, 61%
	#023248	rgb(2, 50, 72)	hsl(200 95% 15%)	hwb(200 0.78% 72%)	lch(18.8 20.1 245)	lab(18.8 -8.44 -18.3)	cmyk 97%, 31%, 0%, 72%

 Click a color format to copy 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