#FECC6C

#FEF18A

#FFD163

#FFAA4D

#FF8A2C

Sunny

#FECC6C

#FEF18A

#FFD163

#FFAA4D

#FF8A2C



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



Quick view

Inspect colors in multiple color spaces

Colors overview

Orange

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#fecc6c	rgb(254, 204, 108)	hsl(39 99% 71%)	hwb(39 42% 0.39%)	lch(85.1 55.1 79)	lab(85.1 10.5 54.1)	cmyk 0%, 20%, 57%, 0%
	#fef18a	rgb(254, 241, 138)	hsl(53 98% 77%)	hwb(53 54% 0.39%)	lch(94.6 51.3 96.1)	lab(94.6 -5.43 51.1)	cmyk 0%, 5%, 46%, 0%
	#ffd163	rgb(255, 209, 99)	hsl(42 100% 69%)	hwb(42 39% 0%)	lch(86.4 60.1 82.3)	lab(86.4 8.04 59.5)	cmyk 0%, 18%, 61%, 0%
	#ffaa4d	rgb(255, 170, 77)	hsl(31 100% 65%)	hwb(31 30% 0%)	lch(77 65 66.1)	lab(77 26.4 59.4)	cmyk 0%, 33%, 70%, 0%
	#ff8a2c	rgb(255, 138, 44)	hsl(27 100% 59%)	hwb(27 17% 0%)	lch(69.9 78 58.1)	lab(69.9 41.2 66.3)	cmyk 0%, 46%, 83%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#FECC6C

AA - 1.49



#FEF18A

AA - 1.15



#FFD163

AA - 1.44



#FFAA4D

AA - 1.89



#FF8A2C

AA - 2.35



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.

HDR color space

HDR oklab colors



background: linear-gradient(45deg, oklab(87% 0.018 0.126), oklab(94.7% -0.026 0.122), oklab(88% 0.008 0.137), oklab(80.5% 0.061 0.133), oklab(74.9% 0.102 0.139))

Fallback colors



background: linear-gradient(45deg, #FECC6C, #FEF18A, #FFD163, #FFAA4D, #FF8A2C)

Colors



<!-- Primary Colors -->
<color name="sunny_color_10">#FECC6C</color>
<color name="sunny_color_20">#FEF18A</color>
<color name="sunny_color_30">#FFD163</color>
<color name="sunny_color_40">#FFAA4D</color>
<color name="sunny_color_50">#FF8A2C</color>

PWA prompt