Food

#f49a24

#f8bb6d

#fad29e

#ff6969

#d40a0a

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Orange

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#f49a24	rgb(244, 154, 36)	hsl(34 90% 55%)	oklab(76% 0.06 0.15)	oklch(76% 0.16 66)	color(display-p3 0.91 0.62 0.26)
	#f8bb6d	rgb(248, 187, 109)	hsl(34 91% 70%)	oklab(83% 0.04 0.11)	oklch(83% 0.12 72)	color(display-p3 0.94 0.74 0.47)
	#fad29e	rgb(250, 210, 158)	hsl(34 90% 80%)	oklab(89% 0.02 0.08)	oklch(89% 0.08 74)	color(display-p3 0.96 0.83 0.65)
	#ff6969	rgb(255, 105, 105)	hsl(0 100% 71%)	oklab(71% 0.17 0.07)	oklch(71% 0.18 23)	color(display-p3 0.93 0.45 0.43)
	#d40a0a	rgb(212, 10, 10)	hsl(0 91% 44%)	oklab(55% 0.19 0.11)	oklch(55% 0.22 29)	color(display-p3 0.76 0.17 0.12)

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

#f49a24

AA - 2.21



#f8bb6d

AA - 1.7



#fad29e

AA - 1.42



#ff6969

AA - 2.8



#d40a0a

AA - 5.45



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(76.1% 0.064 0.146), oklab(83.2% 0.037 0.113), oklab(88.6% 0.023 0.078), oklab(70.9% 0.169 0.072), oklab(54.9% 0.194 0.107))

Fallback colors



background: linear-gradient(45deg, #f49a24, #f8bb6d, #fad29e, #ff6969, #d40a0a)

Colors



<!-- Primary Colors -->
<color name="food_color_10">#f49a24</color>
<color name="food_color_20">#f8bb6d</color>
<color name="food_color_30">#fad29e</color>
<color name="food_color_40">#ff6969</color>
<color name="food_color_50">#d40a0a</color>

PWA prompt