Sunset Orange to Olive Color Palette

About this palette

Sunset Orange to Olive is a 4-color vibrant, warm palette: #FF614F (Sunset Orange), #B95A00 (Bloodhound), #FF8DE2 (Pink Elephants), #848900 (Olive). It mixes red, brown, pink, green tones and feels warm overall. The strongest text pairing is #B95A00 on #FF8DE2 with a contrast ratio of 2.25:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sunset Orange	rgb(255, 97, 79)	hsl(6, 100%, 65%)
Bloodhound	rgb(185, 90, 0)	hsl(29, 100%, 36%)
Pink Elephants	rgb(255, 141, 226)	hsl(315, 100%, 78%)
Olive	rgb(132, 137, 0)	hsl(62, 100%, 27%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Color blindness preview

CSS variables

/* Sunset Orange to Olive — https://swatchly.xyz/palette/ff614f-b95a00-ff8de2-848900 */
:root {
  --sunset-orange: #ff614f;
  --bloodhound: #b95a00;
  --pink-elephants: #ff8de2;
  --olive: #848900;
}

Tailwind CSS v4

/* Sunset Orange to Olive — https://swatchly.xyz/palette/ff614f-b95a00-ff8de2-848900 */
@theme {
  --color-sunset-orange: #ff614f;
  --color-sunset-orange-50: #ffefed;
  --color-sunset-orange-100: #ffe1dc;
  --color-sunset-orange-200: #ffc4ba;
  --color-sunset-orange-300: #ffa091;
  --color-sunset-orange-400: #ff614f;
  --color-sunset-orange-500: #df4334;
  --color-sunset-orange-600: #be2318;
  --color-sunset-orange-700: #9f0401;
  --color-sunset-orange-800: #7f0100;
  --color-sunset-orange-900: #650000;
  --color-sunset-orange-950: #430000;
  --color-bloodhound: #b95a00;
  --color-bloodhound-50: #fff2eb;
  --color-bloodhound-100: #ffe9db;
  --color-bloodhound-200: #ffd1b6;
  --color-bloodhound-300: #ffb587;
  --color-bloodhound-400: #ed9052;
  --color-bloodhound-500: #d4742e;
  --color-bloodhound-600: #b95a00;
  --color-bloodhound-700: #944700;
  --color-bloodhound-800: #743600;
  --color-bloodhound-900: #5a2800;
  --color-bloodhound-950: #3a1800;
  --color-pink-elephants: #ff8de2;
  --color-pink-elephants-50: #ffecf9;
  --color-pink-elephants-100: #ffdbf4;
  --color-pink-elephants-200: #ffb9eb;
  --color-pink-elephants-300: #ff8de2;
  --color-pink-elephants-400: #dc70c1;
  --color-pink-elephants-500: #c053a6;
  --color-pink-elephants-600: #a2398b;
  --color-pink-elephants-700: #862572;
  --color-pink-elephants-800: #6d165c;
  --color-pink-elephants-900: #570c49;
  --color-pink-elephants-950: #39042f;
  --color-olive: #848900;
  --color-olive-50: #f5fac1;
  --color-olive-100: #eaf0af;
  --color-olive-200: #d6dc8d;
  --color-olive-300: #bfc669;
  --color-olive-400: #a0a639;
  --color-olive-500: #848900;
  --color-olive-600: #6a6e00;
  --color-olive-700: #545700;
  --color-olive-800: #424400;
  --color-olive-900: #333500;
  --color-olive-950: #1f2100;
}