Sports

#141414

#B22222

#e68181

#FFFFFF

#4169E1

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Blue

Black

White

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#141414	rgb(20, 20, 20)	hsl(none 0% 7.8%)	oklab(19% 0 0)	oklch(19% 0 none)	color(display-p3 0.08 0.08 0.08)
	#b22222	rgb(178, 34, 34)	hsl(0 68% 42%)	oklab(50% 0.16 0.08)	oklch(50% 0.18 27)	color(display-p3 0.64 0.19 0.17)
	#e68181	rgb(230, 129, 129)	hsl(0 67% 70%)	oklab(71% 0.12 0.04)	oklch(71% 0.12 21)	color(display-p3 0.85 0.53 0.52)
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	oklab(100% 0 0)	oklch(100% 0 none)	color(display-p3 1 1 1)
	#4169e1	rgb(65, 105, 225)	hsl(230 73% 57%)	oklab(56% -0.01 -0.19)	oklch(56% 0.19 270)	color(display-p3 0.29 0.41 0.85)

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

#141414

AAA - 18.42



#B22222

AA - 6.67



#e68181

AA - 2.68



#FFFFFF

AA - 1



#4169E1

AA - 4.84



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(19.1% 0 0), oklab(49.7% 0.16 0.081), oklab(71.4% 0.117 0.044), oklab(100% 0 0), oklab(56% -0.012 -0.188))

Fallback colors



background: linear-gradient(45deg, #141414, #B22222, #e68181, #FFFFFF, #4169E1)

Colors



<!-- Primary Colors -->
<color name="sports_color_10">#141414</color>
<color name="sports_color_20">#B22222</color>
<color name="sports_color_30">#e68181</color>
<color name="sports_color_40">#FFFFFF</color>
<color name="sports_color_50">#4169E1</color>

PWA prompt