Kraken

#C83737

#782121

#E9AFAF

#000000

#A02C2C

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Black

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#c83737	rgb(200, 55, 55)	hsl(0 57% 50%)	oklab(56% 0.16 0.08)	oklch(56% 0.18 25)	color(display-p3 0.72 0.26 0.24)
	#782121	rgb(120, 33, 33)	hsl(0 57% 30%)	oklab(39% 0.11 0.05)	oklch(39% 0.12 25)	color(display-p3 0.43 0.16 0.14)
	#e9afaf	rgb(233, 175, 175)	hsl(0 57% 80%)	oklab(81% 0.06 0.02)	oklch(81% 0.07 19)	color(display-p3 0.88 0.7 0.69)
	#000000	rgb(0, 0, 0)	hsl(none 0% 0%)	oklab(0% 0 0)	oklch(0% 0 none)	color(display-p3 0 0 0)
	#a02c2c	rgb(160, 44, 44)	hsl(0 57% 40%)	oklab(47% 0.14 0.06)	oklch(47% 0.15 25)	color(display-p3 0.58 0.21 0.19)

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

#C83737

AA - 5.17



#782121

AAA - 10.3



#E9AFAF

AA - 1.87



#000000

AAA - 21



#A02C2C

AAA - 7.26



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(55.7% 0.165 0.078), oklab(38.8% 0.11 0.051), oklab(80.7% 0.065 0.022), oklab(0% 0 0), oklab(47.4% 0.138 0.065))

Fallback colors



background: linear-gradient(45deg, #C83737, #782121, #E9AFAF, #000000, #A02C2C)

Colors



<!-- Primary Colors -->
<color name="kraken_color_10">#C83737</color>
<color name="kraken_color_20">#782121</color>
<color name="kraken_color_30">#E9AFAF</color>
<color name="kraken_color_40">#000000</color>
<color name="kraken_color_50">#A02C2C</color>

PWA prompt