Synthetic

#131C28

#303438

#454A4E

#818486

#BEB6B2

Actions

Explore the palette in different formats, and actions.

Colors overview

Grey

Black

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#131c28	rgb(19, 28, 40)	hsl(210 36% 12%)	oklab(22% -0.01 -0.03)	oklch(22% 0.03 260)	color(display-p3 0.08 0.11 0.15)
	#303438	rgb(48, 52, 56)	hsl(210 7.7% 20%)	oklab(32% 0 -0.01)	oklch(32% 0.01 250)	color(display-p3 0.19 0.2 0.22)
	#454a4e	rgb(69, 74, 78)	hsl(210 6.1% 29%)	oklab(41% 0 -0.01)	oklch(41% 0.01 240)	color(display-p3 0.27 0.29 0.3)
	#818486	rgb(129, 132, 134)	hsl(200 2% 52%)	oklab(61% 0 0)	oklch(61% 0 240)	color(display-p3 0.51 0.52 0.52)
	#beb6b2	rgb(190, 182, 178)	hsl(20 8.5% 72%)	oklab(78% 0.01 0.01)	oklch(78% 0.01 49)	color(display-p3 0.74 0.71 0.7)

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

#131C28

AAA - 17.15



#303438

AAA - 12.54



#454A4E

AAA - 8.96



#818486

AA - 3.76



#BEB6B2

AA - 1.99



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(22.4% -0.007 -0.026), oklab(32.3% -0.003 -0.008), oklab(40.6% -0.004 -0.008), oklab(61.1% -0.003 -0.004), oklab(78.2% 0.007 0.008))

Fallback colors



background: linear-gradient(45deg, #131C28, #303438, #454A4E, #818486, #BEB6B2)

Colors



<!-- Primary Colors -->
<color name="synthetic_color_10">#131C28</color>
<color name="synthetic_color_20">#303438</color>
<color name="synthetic_color_30">#454A4E</color>
<color name="synthetic_color_40">#818486</color>
<color name="synthetic_color_50">#BEB6B2</color>

PWA prompt