Chosen One

#03070D

#313E55

#7FA1A3

#8E373C

#D9B784

Actions

Explore the palette in different formats, and actions.

Colors overview

Brown

Blue

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#03070d	rgb(3, 7, 13)	hsl(220 63% 3.1%)	oklab(13% -0.01 -0.02)	oklch(13% 0.02 250)	color(display-p3 0.01 0.03 0.05)
	#313e55	rgb(49, 62, 85)	hsl(220 27% 26%)	oklab(36% -0.01 -0.04)	oklch(36% 0.04 260)	color(display-p3 0.2 0.24 0.33)
	#7fa1a3	rgb(127, 161, 163)	hsl(180 16% 57%)	oklab(68% -0.04 -0.01)	oklch(68% 0.04 200)	color(display-p3 0.52 0.63 0.64)
	#8e373c	rgb(142, 55, 60)	hsl(360 44% 39%)	oklab(46% 0.11 0.04)	oklch(46% 0.12 20)	color(display-p3 0.52 0.24 0.24)
	#d9b784	rgb(217, 183, 132)	hsl(36 53% 68%)	oklab(80% 0.02 0.08)	oklch(80% 0.08 77)	color(display-p3 0.83 0.72 0.54)

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

#03070D

AAA - 20.19



#313E55

AAA - 10.76



#7FA1A3

AA - 2.78



#8E373C

AAA - 7.6



#D9B784

AA - 1.89



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(12.6% -0.006 -0.016), oklab(36.3% -0.006 -0.043), oklab(68.4% -0.035 -0.013), oklab(45.9% 0.111 0.04), oklab(79.7% 0.017 0.076))

Fallback colors



background: linear-gradient(45deg, #03070D, #313E55, #7FA1A3, #8E373C, #D9B784)

Colors



<!-- Primary Colors -->
<color name="chosen_one_color_10">#03070D</color>
<color name="chosen_one_color_20">#313E55</color>
<color name="chosen_one_color_30">#7FA1A3</color>
<color name="chosen_one_color_40">#8E373C</color>
<color name="chosen_one_color_50">#D9B784</color>

PWA prompt