Across

#FFA800

#0077CC

#ADD8E6

#F5F5DC

#333333

Actions

Explore the palette in different formats, and actions.

Colors overview

Orange

Blue

White

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#ffa800	rgb(255, 168, 0)	hsl(40 100% 50%)	oklab(80% 0.05 0.16)	oklch(80% 0.17 72)	color(display-p3 0.95 0.67 0.24)
	#0077cc	rgb(0, 119, 204)	hsl(210 100% 40%)	oklab(56% -0.05 -0.15)	oklch(56% 0.16 250)	color(display-p3 0.2 0.46 0.78)
	#add8e6	rgb(173, 216, 230)	hsl(190 53% 79%)	oklab(86% -0.04 -0.03)	oklch(86% 0.05 220)	color(display-p3 0.71 0.84 0.89)
	#f5f5dc	rgb(245, 245, 220)	hsl(60 56% 91%)	oklab(96% -0.01 0.03)	oklch(96% 0.03 110)	color(display-p3 0.96 0.96 0.87)
	#333333	rgb(51, 51, 51)	hsl(none 0% 20%)	oklab(32% 0 0)	oklch(32% 0 none)	color(display-p3 0.2 0.2 0.2)

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

#FFA800

AA - 1.93



#0077CC

AA - 4.65



#ADD8E6

AA - 1.52



#F5F5DC

AA - 1.1



#333333

AAA - 12.63



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(79.8% 0.052 0.163), oklab(56% -0.054 -0.148), oklab(85.6% -0.038 -0.031), oklab(96.4% -0.01 0.031), oklab(32.1% 0 0))

Fallback colors



background: linear-gradient(45deg, #FFA800, #0077CC, #ADD8E6, #F5F5DC, #333333)

Colors



<!-- Primary Colors -->
<color name="across_color_10">#FFA800</color>
<color name="across_color_20">#0077CC</color>
<color name="across_color_30">#ADD8E6</color>
<color name="across_color_40">#F5F5DC</color>
<color name="across_color_50">#333333</color>

PWA prompt