#f88508

#ffcb63

#f6fad9

Sunny Day



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

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f88508	rgb(248, 133, 8)	hsl(31 94% 50%)	hwb(31 3.1% 2.7%)	lch(67.8 83.5 61)	lab(67.8 40.4 73.1)	cmyk 0%, 46%, 97%, 3%
	#ffcb63	rgb(255, 203, 99)	hsl(40 100% 69%)	hwb(40 39% 0%)	lch(84.9 59 79.3)	lab(84.9 11 58)	cmyk 0%, 20%, 61%, 0%
	#f6fad9	rgb(246, 250, 217)	hsl(67 77% 92%)	hwb(67 85% 2%)	lch(97.3 16.4 109)	lab(97.3 -5.46 15.4)	cmyk 2%, 0%, 13%, 2%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#f88508

AA - 2.51



#ffcb63

AA - 1.5



#f6fad9

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(73% 0.097 0.147), oklab(86.8% 0.017 0.133), oklab(97.4% -0.017 0.04))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #f88508, #ffcb63, #f6fad9)

Colors



<!-- Primary Colors -->
<color name="sunny_day_color_10">#f88508</color>
<color name="sunny_day_color_20">#ffcb63</color>
<color name="sunny_day_color_30">#f6fad9</color>

Gradient PRO

Pro feature only

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

PWA prompt