Mornings

#384E77

#748DA6

#A2AB80

#D6D5A8

#F0EAD6

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Green

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#384e77	rgb(56, 78, 119)	hsl(220 36% 34%)	oklab(43% -0.01 -0.07)	oklch(43% 0.07 260)	color(display-p3 0.24 0.3 0.45)
	#748da6	rgb(116, 141, 166)	hsl(210 22% 55%)	oklab(63% -0.02 -0.04)	oklch(63% 0.05 250)	color(display-p3 0.47 0.55 0.64)
	#a2ab80	rgb(162, 171, 128)	hsl(73 20% 59%)	oklab(72% -0.03 0.05)	oklch(72% 0.06 120)	color(display-p3 0.64 0.67 0.52)
	#d6d5a8	rgb(214, 213, 168)	hsl(59 36% 75%)	oklab(86% -0.02 0.06)	oklch(86% 0.06 110)	color(display-p3 0.84 0.84 0.68)
	#f0ead6	rgb(240, 234, 214)	hsl(46 46% 89%)	oklab(94% 0 0.03)	oklch(94% 0.03 93)	color(display-p3 0.94 0.92 0.85)

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

#384E77

AAA - 8.31



#748DA6

AA - 3.44



#A2AB80

AA - 2.42



#D6D5A8

AA - 1.5



#F0EAD6

AA - 1.2



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(42.5% -0.01 -0.073), oklab(63.3% -0.017 -0.044), oklab(72.3% -0.028 0.054), oklab(86.2% -0.017 0.057), oklab(93.6% -0.001 0.027))

Fallback colors



background: linear-gradient(45deg, #384E77, #748DA6, #A2AB80, #D6D5A8, #F0EAD6)

Colors



<!-- Primary Colors -->
<color name="mornings_color_10">#384E77</color>
<color name="mornings_color_20">#748DA6</color>
<color name="mornings_color_30">#A2AB80</color>
<color name="mornings_color_40">#D6D5A8</color>
<color name="mornings_color_50">#F0EAD6</color>

PWA prompt