Serene

#E85A4F

#F7BE81

#A3B18A

#607D8B

#4F6D7A

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Yellow

Green

Blue

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#e85a4f	rgb(232, 90, 79)	hsl(4.3 77% 61%)	oklab(65% 0.16 0.08)	oklch(65% 0.18 28)	color(display-p3 0.84 0.39 0.34)
	#f7be81	rgb(247, 190, 129)	hsl(31 88% 74%)	oklab(84% 0.04 0.09)	oklch(84% 0.1 68)	color(display-p3 0.93 0.75 0.54)
	#a3b18a	rgb(163, 177, 138)	hsl(82 20% 62%)	oklab(74% -0.03 0.05)	oklch(74% 0.06 120)	color(display-p3 0.65 0.69 0.56)
	#607d8b	rgb(96, 125, 139)	hsl(200 18% 46%)	oklab(57% -0.03 -0.03)	oklch(57% 0.04 230)	color(display-p3 0.4 0.49 0.54)
	#4f6d7a	rgb(79, 109, 122)	hsl(200 21% 39%)	oklab(52% -0.03 -0.03)	oklch(52% 0.04 230)	color(display-p3 0.33 0.42 0.47)

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

#E85A4F

AA - 3.49



#F7BE81

AA - 1.66



#A3B18A

AA - 2.27



#607D8B

AA - 4.37



#4F6D7A

AA - 5.52



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(65.1% 0.158 0.082), oklab(84% 0.039 0.094), oklab(73.9% -0.031 0.047), oklab(57.2% -0.026 -0.03), oklab(51.6% -0.028 -0.029))

Fallback colors



background: linear-gradient(45deg, #E85A4F, #F7BE81, #A3B18A, #607D8B, #4F6D7A)

Colors



<!-- Primary Colors -->
<color name="serene_color_10">#E85A4F</color>
<color name="serene_color_20">#F7BE81</color>
<color name="serene_color_30">#A3B18A</color>
<color name="serene_color_40">#607D8B</color>
<color name="serene_color_50">#4F6D7A</color>

PWA prompt