Hippocampus

#DEF0FC

#93C5EA

#488DD2

#FFFDF4

#A2E9FD

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

White

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#def0fc	rgb(222, 240, 252)	hsl(200 83% 93%)	oklab(95% -0.01 -0.02)	oklch(95% 0.03 240)	color(display-p3 0.88 0.94 0.98)
	#93c5ea	rgb(147, 197, 234)	hsl(210 67% 75%)	oklab(80% -0.04 -0.06)	oklch(80% 0.07 240)	color(display-p3 0.62 0.77 0.9)
	#488dd2	rgb(72, 141, 210)	hsl(210 61% 55%)	oklab(63% -0.04 -0.12)	oklch(63% 0.13 250)	color(display-p3 0.35 0.55 0.8)
	#fffdf4	rgb(255, 253, 244)	hsl(49 100% 98%)	oklab(99% 0 0.01)	oklch(99% 0.01 96)	color(display-p3 1 0.99 0.96)
	#a2e9fd	rgb(162, 233, 253)	hsl(190 96% 81%)	oklab(89% -0.06 -0.05)	oklch(89% 0.08 220)	color(display-p3 0.7 0.91 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.

#DEF0FC

AA - 1.16



#93C5EA

AA - 1.83



#488DD2

AA - 3.49



#FFFDF4

AA - 1.01



#A2E9FD

AA - 1.34



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(94.5% -0.014 -0.021), oklab(80.1% -0.036 -0.065), oklab(63% -0.042 -0.119), oklab(99.3% -0.001 0.012), oklab(89.4% -0.06 -0.046))

Fallback colors



background: linear-gradient(45deg, #DEF0FC, #93C5EA, #488DD2, #FFFDF4, #A2E9FD)

Colors



<!-- Primary Colors -->
<color name="hippocampus_color_10">#DEF0FC</color>
<color name="hippocampus_color_20">#93C5EA</color>
<color name="hippocampus_color_30">#488DD2</color>
<color name="hippocampus_color_40">#FFFDF4</color>
<color name="hippocampus_color_50">#A2E9FD</color>

PWA prompt