#5F9EA0

#7AC5CD

#B0E2FF

#F0F8FF

Spring



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



HDR gradient

Switch to HDR to enhance the gradient



Quick view

Inspect colors in multiple color spaces

Colors overview

Cyan

White

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#5f9ea0	rgb(95, 158, 160)	hsl(180 25% 50%)	hwb(180 37% 37%)	lch(60.9 22.2 201)	lab(60.9 -20.7 -7.79)	cmyk 41%, 1%, 0%, 37%
	#7ac5cd	rgb(122, 197, 205)	hsl(190 45% 64%)	hwb(190 48% 20%)	lch(74.9 25.6 207)	lab(74.9 -22.7 -11.8)	cmyk 40%, 4%, 0%, 20%
	#b0e2ff	rgb(176, 226, 255)	hsl(200 100% 85%)	hwb(200 69% 0%)	lch(87.1 22.9 239)	lab(87.1 -11.7 -19.7)	cmyk 31%, 11%, 0%, 0%
	#f0f8ff	rgb(240, 248, 255)	hsl(210 100% 97%)	hwb(210 94% 0%)	lch(97.1 4.68 248)	lab(97.1 -1.77 -4.33)	cmyk 6%, 3%, 0%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

#5F9EA0

AA - 3.05



#7AC5CD

AA - 1.96



#B0E2FF

AA - 1.38



#F0F8FF

AA - 1.07



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.



32°

CPU



48°

GPU



100%

Usage



11°

Rain



70%

Storage

HDR color space

HDR oklab colors



--angle: 45deg; 
background: linear-gradient(var(--angle), oklab(65.8% -0.062 -0.02), oklab(77.7% -0.069 -0.031), oklab(88.8% -0.038 -0.053), oklab(97.5% -0.006 -0.011))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #5F9EA0, #7AC5CD, #B0E2FF, #F0F8FF)

Colors



<!-- Primary Colors -->
<color name="spring_color_10">#5F9EA0</color>
<color name="spring_color_20">#7AC5CD</color>
<color name="spring_color_30">#B0E2FF</color>
<color name="spring_color_40">#F0F8FF</color>

Gradient PRO

Pro feature only

Get access to all app tokens, export files, and more.

PWA prompt