Supercharge

#25282b

#d3f26a

#eae8e2

#f7f6ef

#ffffff

Actions

Explore the palette in different formats, and actions.

Colors overview

Grey

Yellow

White

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#25282b	rgb(37, 40, 43)	hsl(210 7.5% 16%)	oklab(28% 0 -0.01)	oklch(28% 0.01 250)	color(display-p3 0.15 0.16 0.17)
	#d3f26a	rgb(211, 242, 106)	hsl(74 84% 68%)	oklab(91% -0.08 0.14)	oklch(91% 0.17 120)	color(display-p3 0.85 0.95 0.49)
	#eae8e2	rgb(234, 232, 226)	hsl(45 16% 90%)	oklab(93% 0 0.01)	oklch(93% 0.01 91)	color(display-p3 0.92 0.91 0.89)
	#f7f6ef	rgb(247, 246, 239)	hsl(53 33% 95%)	oklab(97% 0 0.01)	oklch(97% 0.01 100)	color(display-p3 0.97 0.96 0.94)
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	oklab(100% 0 0)	oklch(100% 0 none)	color(display-p3 1 1 1)

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

#25282b

AAA - 14.81



#d3f26a

AA - 1.25



#eae8e2

AA - 1.22



#f7f6ef

AA - 1.08



#ffffff

AA - 1



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(27.5% -0.003 -0.007), oklab(91.2% -0.084 0.142), oklab(93.1% 0 0.008), oklab(97.2% -0.002 0.009), oklab(100% 0 0))

Fallback colors



background: linear-gradient(45deg, #25282b, #d3f26a, #eae8e2, #f7f6ef, #ffffff)

Colors



<!-- Primary Colors -->
<color name="supercharge_color_10">#25282b</color>
<color name="supercharge_color_20">#d3f26a</color>
<color name="supercharge_color_30">#eae8e2</color>
<color name="supercharge_color_40">#f7f6ef</color>
<color name="supercharge_color_50">#ffffff</color>

PWA prompt