Summer

#FFDD00

#F5D042

#F49C1C

#EA6D2C

#A04E10

Actions

Explore the palette in different formats, and actions.

Colors overview

Yellow

Orange

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#ffdd00	rgb(255, 221, 0)	hsl(52 100% 50%)	oklab(90% -0.03 0.18)	oklch(90% 0.19 98)	color(display-p3 0.98 0.87 0.29)
	#f5d042	rgb(245, 208, 66)	hsl(48 90% 61%)	oklab(87% -0.01 0.16)	oklch(87% 0.16 94)	color(display-p3 0.94 0.82 0.37)
	#f49c1c	rgb(244, 156, 28)	hsl(36 91% 53%)	oklab(76% 0.06 0.15)	oklch(76% 0.16 68)	color(display-p3 0.91 0.63 0.25)
	#ea6d2c	rgb(234, 109, 44)	hsl(21 82% 55%)	oklab(68% 0.12 0.12)	oklch(68% 0.17 45)	color(display-p3 0.86 0.46 0.24)
	#a04e10	rgb(160, 78, 16)	hsl(26 82% 35%)	oklab(52% 0.08 0.1)	oklch(52% 0.13 51)	color(display-p3 0.59 0.32 0.13)

 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.

#FFDD00

AA - 1.34



#F5D042

AA - 1.5



#F49C1C

AA - 2.18



#EA6D2C

AA - 3.12



#A04E10

AA - 5.84



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(89.9% -0.025 0.184), oklab(86.6% -0.011 0.157), oklab(76.4% 0.06 0.15), oklab(67.6% 0.122 0.121), oklab(51.7% 0.081 0.099))

Fallback colors



background: linear-gradient(45deg, #FFDD00, #F5D042, #F49C1C, #EA6D2C, #A04E10)

Colors



<!-- Primary Colors -->
<color name="summer_color_10">#FFDD00</color>
<color name="summer_color_20">#F5D042</color>
<color name="summer_color_30">#F49C1C</color>
<color name="summer_color_40">#EA6D2C</color>
<color name="summer_color_50">#A04E10</color>

PWA prompt