#F7D08A

#FFA07A

#F24C3E

Gift



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

Yellow

Red

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f7d08a	rgb(247, 208, 138)	hsl(39 87% 75%)	hwb(39 54% 3.1%)	lch(85.7 40.8 79.2)	lab(85.7 7.61 40.1)	cmyk 0%, 16%, 44%, 3%
	#ffa07a	rgb(255, 160, 122)	hsl(17 100% 74%)	hwb(17 48% 0%)	lch(75.2 48.7 46.5)	lab(75.2 33.5 35.3)	cmyk 0%, 37%, 52%, 0%
	#f24c3e	rgb(242, 76, 62)	hsl(4.7 87% 60%)	hwb(4.7 24% 5.1%)	lch(57.3 78.5 35.8)	lab(57.3 63.6 45.9)	cmyk 0%, 69%, 74%, 5%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#F7D08A

AA - 1.46



#FFA07A

AA - 1.98



#F24C3E

AA - 3.57



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(87.6% 0.015 0.097), oklab(79.4% 0.092 0.084), oklab(64.9% 0.179 0.099))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #F7D08A, #FFA07A, #F24C3E)

Colors



<!-- Primary Colors -->
<color name="gift_color_10">#F7D08A</color>
<color name="gift_color_20">#FFA07A</color>
<color name="gift_color_30">#F24C3E</color>

Gradient PRO

Pro feature only

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

PWA prompt