Ethereal

#30343F

#4A4E69

#6A6480

#9A8280

#D4B8B1

Actions

Explore the palette in different formats, and actions.

Colors overview

Grey

Brown

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#30343f	rgb(48, 52, 63)	hsl(220 14% 22%)	oklab(33% 0 -0.02)	oklch(33% 0.02 270)	color(display-p3 0.19 0.2 0.24)
	#4a4e69	rgb(74, 78, 105)	hsl(230 17% 35%)	oklab(43% 0.01 -0.04)	oklch(43% 0.04 280)	color(display-p3 0.29 0.31 0.4)
	#6a6480	rgb(106, 100, 128)	hsl(250 12% 45%)	oklab(52% 0.02 -0.04)	oklch(52% 0.04 290)	color(display-p3 0.41 0.39 0.49)
	#9a8280	rgb(154, 130, 128)	hsl(4.6 11% 55%)	oklab(63% 0.03 0.01)	oklch(63% 0.03 24)	color(display-p3 0.59 0.51 0.5)
	#d4b8b1	rgb(212, 184, 177)	hsl(12 29% 76%)	oklab(80% 0.03 0.02)	oklch(80% 0.03 34)	color(display-p3 0.81 0.73 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.

#30343F

AAA - 12.43



#4A4E69

AAA - 8.12



#6A6480

AA - 5.6



#9A8280

AA - 3.57



#D4B8B1

AA - 1.85



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(32.6% 0 -0.02), oklab(43.1% 0.006 -0.045), oklab(51.9% 0.018 -0.04), oklab(62.8% 0.027 0.012), oklab(80.5% 0.028 0.019))

Fallback colors



background: linear-gradient(45deg, #30343F, #4A4E69, #6A6480, #9A8280, #D4B8B1)

Colors



<!-- Primary Colors -->
<color name="ethereal_color_10">#30343F</color>
<color name="ethereal_color_20">#4A4E69</color>
<color name="ethereal_color_30">#6A6480</color>
<color name="ethereal_color_40">#9A8280</color>
<color name="ethereal_color_50">#D4B8B1</color>

PWA prompt