Sunny

#FECC6C

#FEF18A

#FFD163

#FFAA4D

#FF8A2C

Actions

Explore the palette in different formats, and actions.

Colors overview

Orange

Yellow

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#fecc6c	rgb(254, 204, 108)	hsl(39 99% 71%)	oklab(87% 0.02 0.13)	oklch(87% 0.13 82)	color(display-p3 0.97 0.81 0.48)
	#fef18a	rgb(254, 241, 138)	hsl(53 98% 77%)	oklab(95% -0.03 0.12)	oklch(95% 0.13 100)	color(display-p3 0.99 0.95 0.59)
	#ffd163	rgb(255, 209, 99)	hsl(42 100% 69%)	oklab(88% 0.01 0.14)	oklch(88% 0.14 87)	color(display-p3 0.97 0.83 0.46)
	#ffaa4d	rgb(255, 170, 77)	hsl(31 100% 65%)	oklab(81% 0.06 0.13)	oklch(81% 0.15 65)	color(display-p3 0.95 0.68 0.37)
	#ff8a2c	rgb(255, 138, 44)	hsl(27 100% 59%)	oklab(75% 0.1 0.14)	oklch(75% 0.17 54)	color(display-p3 0.94 0.56 0.27)

 Click on a color value to copy it 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