Winter

#2E4053

#536878

#89A9B4

#A9D1DB

#D0E2E8

Actions

Explore the palette in different formats, and actions.

Colors overview

Cyan

Grey

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#2e4053	rgb(46, 64, 83)	hsl(210 29% 25%)	oklab(36% -0.01 -0.04)	oklch(36% 0.04 250)	color(display-p3 0.2 0.25 0.32)
	#536878	rgb(83, 104, 120)	hsl(210 18% 40%)	oklab(51% -0.02 -0.03)	oklch(51% 0.04 240)	color(display-p3 0.34 0.41 0.46)
	#89a9b4	rgb(137, 169, 180)	hsl(200 22% 62%)	oklab(71% -0.03 -0.03)	oklch(71% 0.04 220)	color(display-p3 0.56 0.66 0.7)
	#a9d1db	rgb(169, 209, 219)	hsl(190 41% 76%)	oklab(84% -0.04 -0.03)	oklch(84% 0.04 210)	color(display-p3 0.69 0.82 0.85)
	#d0e2e8	rgb(208, 226, 232)	hsl(200 34% 86%)	oklab(90% -0.02 -0.01)	oklch(90% 0.02 220)	color(display-p3 0.83 0.88 0.91)

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

#2E4053

AAA - 10.63



#536878

AA - 5.8



#89A9B4

AA - 2.5



#A9D1DB

AA - 1.63



#D0E2E8

AA - 1.33



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(36.4% -0.014 -0.038), oklab(50.6% -0.017 -0.031), oklab(71.5% -0.029 -0.025), oklab(83.5% -0.037 -0.025), oklab(90.1% -0.016 -0.013))

Fallback colors



background: linear-gradient(45deg, #2E4053, #536878, #89A9B4, #A9D1DB, #D0E2E8)

Colors



<!-- Primary Colors -->
<color name="winter_color_10">#2E4053</color>
<color name="winter_color_20">#536878</color>
<color name="winter_color_30">#89A9B4</color>
<color name="winter_color_40">#A9D1DB</color>
<color name="winter_color_50">#D0E2E8</color>

PWA prompt