Travel

#fdfaf9

#ff8670

#222F3D

#8d85ff

#cbc7ff

Actions

Explore the palette in different formats, and actions.

Colors overview

Orange

Purple

Black

White

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#fdfaf9	rgb(253, 250, 249)	hsl(15 50% 98%)	oklab(99% 0 0)	oklch(99% 0 39)	color(display-p3 0.99 0.98 0.98)
	#ff8670	rgb(255, 134, 112)	hsl(9.2 100% 72%)	oklab(75% 0.13 0.08)	oklch(75% 0.15 32)	color(display-p3 0.94 0.55 0.46)
	#222f3d	rgb(34, 47, 61)	hsl(210 28% 19%)	oklab(30% -0.01 -0.03)	oklch(30% 0.03 250)	color(display-p3 0.14 0.18 0.23)
	#8d85ff	rgb(141, 133, 255)	hsl(240 100% 76%)	oklab(68% 0.04 -0.17)	oklch(68% 0.18 280)	color(display-p3 0.55 0.52 0.97)
	#cbc7ff	rgb(203, 199, 255)	hsl(240 100% 89%)	oklab(85% 0.02 -0.07)	oklch(85% 0.08 290)	color(display-p3 0.79 0.78 0.98)

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

#fdfaf9

AA - 1.03



#ff8670

AA - 2.36



#222F3D

AAA - 13.61



#8d85ff

AA - 3.02



#cbc7ff

AA - 1.59



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(98.7% 0.003 0.002), oklab(75% 0.129 0.079), oklab(30% -0.01 -0.029), oklab(68% 0.041 -0.17), oklab(85.2% 0.024 -0.074))

Fallback colors



background: linear-gradient(45deg, #fdfaf9, #ff8670, #222F3D, #8d85ff, #cbc7ff)

Colors



<!-- Primary Colors -->
<color name="travel_color_10">#fdfaf9</color>
<color name="travel_color_20">#ff8670</color>
<color name="travel_color_30">#222F3D</color>
<color name="travel_color_40">#8d85ff</color>
<color name="travel_color_50">#cbc7ff</color>

PWA prompt