Pond

#001787

#0063cd

#49f2aa

#b7f99b

#fffdf2

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Green

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#001787	rgb(0, 23, 135)	hsl(230 100% 26%)	oklab(30% -0.02 -0.18)	oklch(30% 0.18 260)	color(display-p3 0.02 0.09 0.51)
	#0063cd	rgb(0, 99, 205)	hsl(210 100% 40%)	oklab(52% -0.04 -0.18)	oklch(52% 0.18 260)	color(display-p3 0.16 0.38 0.78)
	#49f2aa	rgb(73, 242, 170)	hsl(150 87% 62%)	oklab(86% -0.16 0.06)	oklch(86% 0.17 160)	color(display-p3 0.5 0.94 0.69)
	#b7f99b	rgb(183, 249, 155)	hsl(100 89% 79%)	oklab(92% -0.1 0.1)	oklch(92% 0.14 140)	color(display-p3 0.77 0.97 0.65)
	#fffdf2	rgb(255, 253, 242)	hsl(51 100% 97%)	oklab(99% 0 0.01)	oklch(99% 0.01 98)	color(display-p3 1 0.99 0.95)

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

#001787

AAA - 14.26



#0063cd

AA - 5.72



#49f2aa

AA - 1.44



#b7f99b

AA - 1.23



#fffdf2

AA - 1.02



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(30.4% -0.019 -0.18), oklab(51.6% -0.041 -0.177), oklab(85.8% -0.161 0.057), oklab(91.6% -0.102 0.096), oklab(99.3% -0.002 0.014))

Fallback colors



background: linear-gradient(45deg, #001787, #0063cd, #49f2aa, #b7f99b, #fffdf2)

Colors



<!-- Primary Colors -->
<color name="pond_color_10">#001787</color>
<color name="pond_color_20">#0063cd</color>
<color name="pond_color_30">#49f2aa</color>
<color name="pond_color_40">#b7f99b</color>
<color name="pond_color_50">#fffdf2</color>

PWA prompt