Tomato#F94144
Pumpkin#F3722C
Dark Orange#F8961E
Coral#F9844A
Mustard#F9C74F

Color Palette

#F94144 · #F3722C · #F8961E · #F9844A · #F9C74F

analogous0 likes
Share

Export for Developers

:root {
  --color-1: #F94144;
  --color-1-rgb: 249, 65, 68;
  --color-1-hsl: 359, 94%, 62%;
  --color-2: #F3722C;
  --color-2-rgb: 243, 114, 44;
  --color-2-hsl: 21, 89%, 56%;
  --color-3: #F8961E;
  --color-3-rgb: 248, 150, 30;
  --color-3-hsl: 33, 94%, 55%;
  --color-4: #F9844A;
  --color-4-rgb: 249, 132, 74;
  --color-4-hsl: 20, 94%, 63%;
  --color-5: #F9C74F;
  --color-5-rgb: 249, 199, 79;
  --color-5-hsl: 42, 93%, 64%;
}

Real World Preview

Get Started

Accessibility

WCAG Accessibility Report

Excellent
#F94144
On White
3.58:1Fail
On Black
5.87:1AA
Aa
Aa
#F3722C
On White
2.89:1Fail
On Black
7.25:1AAA
Aa
Aa
#F8961E
On White
2.24:1Fail
On Black
9.37:1AAA
Aa
Aa
#F9844A
On White
2.49:1Fail
On Black
8.43:1AAA
Aa
Aa
#F9C74F
On White
1.58:1Fail
On Black
13.31:1AAA
Aa
Aa

Contrast ratios calculated per WCAG 2.1. AA requires ≥4.5:1, AAA requires ≥7:1 for normal text.

Palette Variations

Palette Variations

Original

☀️

lighter

· Increased lightness, reduced saturation

🌑

darker

· Reduced lightness, increased saturation

🌫️

muted

· Desaturated for a calm, muted look

vibrant

· Boosted saturation for maximum impact