Midnight Moon

#1c2052

#410e6b

#502570

#9c39a1

#b55bba

Actions

Explore the palette in different formats, and actions.

Colors overview

Pink

Purple

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#1c2052	rgb(28, 32, 82)	hsl(240 49% 22%)	oklab(27% 0.01 -0.09)	oklch(27% 0.09 280)	color(display-p3 0.11 0.12 0.31)
	#410e6b	rgb(65, 14, 107)	hsl(270 77% 24%)	oklab(31% 0.08 -0.12)	oklch(31% 0.15 300)	color(display-p3 0.23 0.07 0.4)
	#502570	rgb(80, 37, 112)	hsl(270 50% 29%)	oklab(36% 0.08 -0.1)	oklch(36% 0.13 310)	color(display-p3 0.29 0.15 0.42)
	#9c39a1	rgb(156, 57, 161)	hsl(300 48% 43%)	oklab(52% 0.15 -0.1)	oklch(52% 0.18 330)	color(display-p3 0.57 0.25 0.61)
	#b55bba	rgb(181, 91, 186)	hsl(300 41% 54%)	oklab(61% 0.14 -0.09)	oklch(61% 0.17 330)	color(display-p3 0.66 0.38 0.71)

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

#1c2052

AAA - 15.24



#410e6b

AAA - 14



#502570

AAA - 11.41



#9c39a1

AA - 5.97



#b55bba

AA - 4.06



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(27.3% 0.008 -0.09), oklab(31.1% 0.08 -0.122), oklab(36.3% 0.077 -0.1), oklab(52.4% 0.15 -0.102), oklab(61.4% 0.137 -0.095))

Fallback colors



background: linear-gradient(45deg, #1c2052, #410e6b, #502570, #9c39a1, #b55bba)

Colors



<!-- Primary Colors -->
<color name="midnight_moon_color_10">#1c2052</color>
<color name="midnight_moon_color_20">#410e6b</color>
<color name="midnight_moon_color_30">#502570</color>
<color name="midnight_moon_color_40">#9c39a1</color>
<color name="midnight_moon_color_50">#b55bba</color>

PWA prompt