#008080

#43e1b0

#97fcdc

Ofrenda



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

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#008080	rgb(0, 128, 128)	hsl(180 100% 25%)	hwb(180 0% 50%)	lch(48 31.7 196)	lab(48 -30.4 -8.98)	cmyk 100%, 0%, 0%, 50%
	#43e1b0	rgb(67, 225, 176)	hsl(160 72% 57%)	hwb(160 26% 12%)	lch(80.7 52.5 167)	lab(80.7 -51.2 11.7)	cmyk 70%, 0%, 22%, 12%
	#97fcdc	rgb(151, 252, 220)	hsl(160 94% 79%)	hwb(160 59% 1.2%)	lch(92.1 36.8 171)	lab(92.1 -36.4 5.61)	cmyk 40%, 0%, 13%, 1%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#008080

AA - 4.77



#43e1b0

AA - 1.66



#97fcdc

AA - 1.21



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(54.3% -0.09 -0.024), oklab(81.6% -0.145 0.031), oklab(92% -0.105 0.016))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #008080, #43e1b0, #97fcdc)

Colors



<!-- Primary Colors -->
<color name="ofrenda_color_10">#008080</color>
<color name="ofrenda_color_20">#43e1b0</color>
<color name="ofrenda_color_30">#97fcdc</color>

Gradient PRO

Pro feature only

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

PWA prompt