Extra Life to Safflower Color Palette

About this palette

Extra Life to Safflower is a 4-color vibrant, warm palette: #6DB51F (Extra Life), #926A00 (Embarrassed Frog), #C97A00 (Maine Coon Orange), #FFAF3F (Safflower). It mixes green, yellow, orange tones and feels warm overall. The strongest text pairing is #926A00 on #FFAF3F with a contrast ratio of 2.67:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Extra Life	rgb(109, 181, 31)	hsl(89, 71%, 42%)
Embarrassed Frog	rgb(146, 106, 0)	hsl(44, 100%, 29%)
Maine Coon Orange	rgb(201, 122, 0)	hsl(36, 100%, 39%)
Safflower	rgb(255, 175, 63)	hsl(35, 100%, 62%)

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

/* Extra Life to Safflower — https://swatchly.xyz/palette/6db51f-926a00-c97a00-ffaf3f */
:root {
  --extra-life: #6db51f;
  --embarrassed-frog: #926a00;
  --maine-coon-orange: #c97a00;
  --safflower: #ffaf3f;
}

Tailwind CSS v4

/* Extra Life to Safflower — https://swatchly.xyz/palette/6db51f-926a00-c97a00-ffaf3f */
@theme {
  --color-extra-life: #6db51f;
  --color-extra-life-50: #e1ffce;
  --color-extra-life-100: #cbfba9;
  --color-extra-life-200: #b0e986;
  --color-extra-life-300: #94d460;
  --color-extra-life-400: #6db51f;
  --color-extra-life-500: #579800;
  --color-extra-life-600: #457a00;
  --color-extra-life-700: #366100;
  --color-extra-life-800: #294c00;
  --color-extra-life-900: #1f3b00;
  --color-extra-life-950: #112600;
  --color-embarrassed-frog: #926a00;
  --color-embarrassed-frog-50: #fff4e0;
  --color-embarrassed-frog-100: #ffeac3;
  --color-embarrassed-frog-200: #f5d59b;
  --color-embarrassed-frog-300: #e3bf7b;
  --color-embarrassed-frog-400: #c79f51;
  --color-embarrassed-frog-500: #ad842d;
  --color-embarrassed-frog-600: #926a00;
  --color-embarrassed-frog-700: #745400;
  --color-embarrassed-frog-800: #5b4100;
  --color-embarrassed-frog-900: #473100;
  --color-embarrassed-frog-950: #2d1e00;
  --color-maine-coon-orange: #c97a00;
  --color-maine-coon-orange-50: #fff5eb;
  --color-maine-coon-orange-100: #ffebd7;
  --color-maine-coon-orange-200: #ffd3a8;
  --color-maine-coon-orange-300: #fcb770;
  --color-maine-coon-orange-400: #e2963f;
  --color-maine-coon-orange-500: #c97a00;
  --color-maine-coon-orange-600: #a36200;
  --color-maine-coon-orange-700: #814d00;
  --color-maine-coon-orange-800: #653b00;
  --color-maine-coon-orange-900: #4e2c00;
  --color-maine-coon-orange-950: #321a00;
  --color-safflower: #ffaf3f;
  --color-safflower-50: #fff4e7;
  --color-safflower-100: #ffe8cd;
  --color-safflower-200: #ffcf95;
  --color-safflower-300: #ffaf3f;
  --color-safflower-400: #db901c;
  --color-safflower-500: #b87600;
  --color-safflower-600: #955f00;
  --color-safflower-700: #774b00;
  --color-safflower-800: #5d3a00;
  --color-safflower-900: #482c00;
  --color-safflower-950: #2e1a00;
}