Royal Color Palette

#fff7ed

#bfd8ff

#546eff

#f2fca7

#fff7ed

#bfd8ff

#546eff

#f2fca7

Colors overview

Blue

Yellow

White

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#fff7ed	rgb(255, 247, 237)	hsl(33 100% 96%)	hwb(33 93% 0%)	lch(97.7 6.02 75.4)	lab(97.7 1.51 5.82)	cmyk 0%, 3%, 7%, 0%
	#bfd8ff	rgb(191, 216, 255)	hsl(220 100% 87%)	hwb(220 75% 0%)	lch(85.4 22.2 264)	lab(85.4 -2.32 -22.1)	cmyk 25%, 15%, 0%, 0%
	#546eff	rgb(84, 110, 255)	hsl(230 100% 66%)	hwb(230 33% 0%)	lch(50.9 81.2 289)	lab(50.9 26.8 -76.6)	cmyk 67%, 57%, 0%, 0%
	#f2fca7	rgb(242, 252, 167)	hsl(67 93% 82%)	hwb(67 65% 1.2%)	lch(96.8 41.6 108)	lab(96.8 -12.9 39.6)	cmyk 4%, 0%, 34%, 1%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#fff7ed

AA - 1.06



#bfd8ff

AA - 1.45



#546eff

AA - 4.15



#f2fca7

AA - 1.09



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(98% 0.004 0.015), oklab(87.7% -0.011 -0.059), oklab(60.1% 0.003 -0.216), oklab(96.4% -0.043 0.098))

Fallback colors



background: linear-gradient(45deg, #fff7ed, #bfd8ff, #546eff, #f2fca7)

Colors



<!-- Primary Colors -->
<color name="royal_color_10">#fff7ed</color>
<color name="royal_color_20">#bfd8ff</color>
<color name="royal_color_30">#546eff</color>
<color name="royal_color_40">#f2fca7</color>

PWA prompt