Midnight Bloom

#1a0a1a

#321d32

#4a304a

#634363

#7d567d

Actions

Explore the palette in different formats, and actions.

Colors overview

Purple

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#1a0a1a	rgb(26, 10, 26)	hsl(300 44% 7.1%)	oklab(18% 0.03 -0.02)	oklch(18% 0.04 330)	color(display-p3 0.09 0.04 0.1)
	#321d32	rgb(50, 29, 50)	hsl(300 27% 15%)	oklab(27% 0.04 -0.03)	oklch(27% 0.05 330)	color(display-p3 0.18 0.12 0.19)
	#4a304a	rgb(74, 48, 74)	hsl(300 21% 24%)	oklab(35% 0.05 -0.03)	oklch(35% 0.06 330)	color(display-p3 0.28 0.19 0.28)
	#634363	rgb(99, 67, 99)	hsl(300 19% 33%)	oklab(43% 0.05 -0.04)	oklch(43% 0.07 330)	color(display-p3 0.37 0.27 0.38)
	#7d567d	rgb(125, 86, 125)	hsl(300 18% 41%)	oklab(51% 0.06 -0.04)	oklch(51% 0.08 330)	color(display-p3 0.47 0.34 0.48)

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

#1a0a1a

AAA - 19.05



#321d32

AAA - 15.47



#4a304a

AAA - 11.58



#634363

AAA - 8.35



#7d567d

AA - 6



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(17.7% 0.034 -0.022), oklab(26.7% 0.04 -0.026), oklab(35.1% 0.047 -0.031), oklab(43.1% 0.055 -0.036), oklab(50.9% 0.064 -0.042))

Fallback colors



background: linear-gradient(45deg, #1a0a1a, #321d32, #4a304a, #634363, #7d567d)

Colors



<!-- Primary Colors -->
<color name="midnight_bloom_color_10">#1a0a1a</color>
<color name="midnight_bloom_color_20">#321d32</color>
<color name="midnight_bloom_color_30">#4a304a</color>
<color name="midnight_bloom_color_40">#634363</color>
<color name="midnight_bloom_color_50">#7d567d</color>

PWA prompt