#2f5cff

#6797ff

#a2c7ff

#dbf4ff

River



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

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#2f5cff	rgb(47, 92, 255)	hsl(230 100% 59%)	hwb(230 18% 0%)	lch(44.8 92.7 291)	lab(44.8 32.5 -86.8)	cmyk 82%, 64%, 0%, 0%
	#6797ff	rgb(103, 151, 255)	hsl(220 100% 70%)	hwb(220 40% 0%)	lch(62.7 58.1 277)	lab(62.7 7.32 -57.7)	cmyk 60%, 41%, 0%, 0%
	#a2c7ff	rgb(162, 199, 255)	hsl(220 100% 82%)	hwb(220 64% 0%)	lch(79.1 32 265)	lab(79.1 -2.64 -31.9)	cmyk 36%, 22%, 0%, 0%
	#dbf4ff	rgb(219, 244, 255)	hsl(200 100% 93%)	hwb(200 86% 0%)	lch(94.6 10.7 230)	lab(94.6 -6.83 -8.23)	cmyk 14%, 4%, 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.

#2f5cff

AA - 5.12



#6797ff

AA - 2.81



#a2c7ff

AA - 1.72



#dbf4ff

AA - 1.14



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(55.4% -0.017 -0.245), oklab(69% -0.017 -0.161), oklab(82.3% -0.018 -0.087), oklab(95.2% -0.021 -0.022))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #2f5cff, #6797ff, #a2c7ff, #dbf4ff)

Colors



<!-- Primary Colors -->
<color name="river_color_10">#2f5cff</color>
<color name="river_color_20">#6797ff</color>
<color name="river_color_30">#a2c7ff</color>
<color name="river_color_40">#dbf4ff</color>

Gradient PRO

Pro feature only

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

PWA prompt