Artic Wood

#7193ca

#a8bcde

#cdd9ec

#dfcbaa

#c9a870

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Yellow

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#7193ca	rgb(113, 147, 202)	hsl(220 46% 62%)	oklab(66% -0.02 -0.09)	oklch(66% 0.09 260)	color(display-p3 0.47 0.57 0.77)
	#a8bcde	rgb(168, 188, 222)	hsl(220 45% 76%)	oklab(79% -0.01 -0.05)	oklch(79% 0.05 260)	color(display-p3 0.67 0.73 0.86)
	#cdd9ec	rgb(205, 217, 236)	hsl(220 45% 86%)	oklab(88% -0.01 -0.03)	oklch(88% 0.03 260)	color(display-p3 0.81 0.85 0.92)
	#dfcbaa	rgb(223, 203, 170)	hsl(37 45% 77%)	oklab(85% 0.01 0.05)	oklch(85% 0.05 80)	color(display-p3 0.86 0.8 0.68)
	#c9a870	rgb(201, 168, 112)	hsl(38 45% 61%)	oklab(75% 0.01 0.08)	oklch(75% 0.08 80)	color(display-p3 0.77 0.66 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.

#7193ca

AA - 3.12



#a8bcde

AA - 1.92



#cdd9ec

AA - 1.42



#dfcbaa

AA - 1.58



#c9a870

AA - 2.25



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(66% -0.016 -0.09), oklab(79.1% -0.008 -0.053), oklab(88.2% -0.005 -0.029), oklab(85% 0.008 0.049), oklab(74.8% 0.014 0.082))

Fallback colors



background: linear-gradient(45deg, #7193ca, #a8bcde, #cdd9ec, #dfcbaa, #c9a870)

Colors



<!-- Primary Colors -->
<color name="artic_wood_color_10">#7193ca</color>
<color name="artic_wood_color_20">#a8bcde</color>
<color name="artic_wood_color_30">#cdd9ec</color>
<color name="artic_wood_color_40">#dfcbaa</color>
<color name="artic_wood_color_50">#c9a870</color>

PWA prompt