Calm

#FCAC48

#CABBAC

#BBB1AA

#3F5E6F

#253750

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Yellow

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#fcac48	rgb(252, 172, 72)	hsl(33 97% 64%)	oklab(80% 0.05 0.14)	oklch(80% 0.15 69)	color(display-p3 0.94 0.69 0.36)
	#cabbac	rgb(202, 187, 172)	hsl(30 22% 73%)	oklab(80% 0.01 0.02)	oklch(80% 0.03 67)	color(display-p3 0.78 0.74 0.68)
	#bbb1aa	rgb(187, 177, 170)	hsl(25 11% 70%)	oklab(77% 0.01 0.01)	oklch(77% 0.02 58)	color(display-p3 0.73 0.7 0.67)
	#3f5e6f	rgb(63, 94, 111)	hsl(200 28% 34%)	oklab(46% -0.03 -0.04)	oklch(46% 0.05 230)	color(display-p3 0.27 0.37 0.43)
	#253750	rgb(37, 55, 80)	hsl(210 37% 23%)	oklab(33% -0.01 -0.05)	oklch(33% 0.05 260)	color(display-p3 0.16 0.21 0.31)

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

#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