Calm

#FCAC48

#CABBAC

#BBB1AA

#3F5E6F

#253750

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#fcac48	rgb(252, 172, 72)	hsl(33 97% 64%)	hwb(33 28% 1.2%)	lch(77.1 66 68.7)	lab(77.1 24 61.5)	cmyk 0%, 32%, 71%, 1%
	#cabbac	rgb(202, 187, 172)	hsl(30 22% 73%)	hwb(30 67% 21%)	lch(76.8 10.3 69.3)	lab(76.8 3.64 9.64)	cmyk 0%, 7%, 15%, 21%
	#bbb1aa	rgb(187, 177, 170)	hsl(25 11% 70%)	hwb(25 67% 27%)	lch(72.9 5.66 60.7)	lab(72.9 2.78 4.94)	cmyk 0%, 5%, 9%, 27%
	#3f5e6f	rgb(63, 94, 111)	hsl(200 28% 34%)	hwb(200 25% 56%)	lch(38 15.8 239)	lab(38 -8.09 -13.5)	cmyk 43%, 15%, 0%, 56%
	#253750	rgb(37, 55, 80)	hsl(210 37% 23%)	hwb(210 15% 69%)	lch(22.4 17.8 266)	lab(22.4 -1.28 -17.8)	cmyk 54%, 31%, 0%, 69%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#FCAC48

AA - 1.88



#CABBAC

AA - 1.87



#BBB1AA

AA - 2.1



#3F5E6F

AA - 6.9



#253750

AAA - 12.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(80.5% 0.053 0.136), oklab(80% 0.01 0.025), oklab(76.7% 0.008 0.013), oklab(46.5% -0.027 -0.037), oklab(33.3% -0.012 -0.049))

Fallback colors



background: linear-gradient(45deg, #FCAC48, #CABBAC, #BBB1AA, #3F5E6F, #253750)

Colors



<!-- Primary Colors -->
<color name="calm_color_10">#FCAC48</color>
<color name="calm_color_20">#CABBAC</color>
<color name="calm_color_30">#BBB1AA</color>
<color name="calm_color_40">#3F5E6F</color>
<color name="calm_color_50">#253750</color>

PWA prompt