Pastel Sapphire Color Palette

#ffab7a

#ffd1a0

#ffebba

#5986a0

#002d47

#ffab7a

#ffd1a0

#ffebba

#5986a0

#002d47

Colors overview

Orange

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ffab7a	rgb(255, 171, 122)	hsl(22 100% 74%)	hwb(22 48% 0%)	lch(77.7 47.5 53.8)	lab(77.7 28.1 38.4)	cmyk 0%, 33%, 52%, 0%
	#ffd1a0	rgb(255, 209, 160)	hsl(31 100% 81%)	hwb(31 63% 0%)	lch(87 33 68.8)	lab(87 12 30.8)	cmyk 0%, 18%, 37%, 0%
	#ffebba	rgb(255, 235, 186)	hsl(43 100% 86%)	hwb(43 73% 0%)	lch(93.8 26.5 86.4)	lab(93.8 1.68 26.5)	cmyk 0%, 8%, 27%, 0%
	#5986a0	rgb(89, 134, 160)	hsl(200 29% 49%)	hwb(200 35% 37%)	lch(53.4 21.8 241)	lab(53.4 -10.5 -19.1)	cmyk 44%, 16%, 0%, 37%
	#002d47	rgb(0, 45, 71)	hsl(200 100% 14%)	hwb(200 0% 72%)	lch(16.8 21.6 254)	lab(16.8 -6.09 -20.7)	cmyk 100%, 37%, 0%, 72%

 Click a color format to copy to your clipboard.

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

#ffab7a

AA - 1.84



#ffd1a0

AA - 1.41



#ffebba

AA - 1.17



#5986a0

AA - 3.93



#002d47

AAA - 14.32



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(81.3% 0.075 0.091), oklab(88.9% 0.03 0.076), oklab(94.4% 0.002 0.067), oklab(59.8% -0.037 -0.052), oklab(28.4% -0.032 -0.058))

Fallback colors



background: linear-gradient(45deg, #ffab7a, #ffd1a0, #ffebba, #5986a0, #002d47)

Colors



<!-- Primary Colors -->
<color name="pastel_sapphire_color_10">#ffab7a</color>
<color name="pastel_sapphire_color_20">#ffd1a0</color>
<color name="pastel_sapphire_color_30">#ffebba</color>
<color name="pastel_sapphire_color_40">#5986a0</color>
<color name="pastel_sapphire_color_50">#002d47</color>

PWA prompt