Light Red to Pine Color Palette

About this palette

Light Red to Pine is a 5-color cool palette: #FF8283 (Light Red), #D34C4B (Horror Snob), #B5D4FF (Frost Fairy), #1D4000 (Realm of the Underworld), #30612E (Pine). It mixes red, blue, green tones and feels cool overall. The strongest text pairing is #B5D4FF on #1D4000 with a contrast ratio of 7.74:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Light Red	rgb(255, 130, 131)	hsl(360, 100%, 75%)
Horror Snob	rgb(211, 76, 75)	hsl(0, 61%, 56%)
Frost Fairy	rgb(181, 212, 255)	hsl(215, 100%, 85%)
Realm of the Underworld	rgb(29, 64, 0)	hsl(93, 100%, 13%)
Pine	rgb(48, 97, 46)	hsl(118, 36%, 28%)

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.

Aa7.74:1 Very good#B5D4FF on #1D4000
Aa7.74:1 Very good#1D4000 on #B5D4FF
Aa4.91:1 Good#FF8283 on #1D4000
Aa4.91:1 Good#1D4000 on #FF8283
Aa4.81:1 Good#B5D4FF on #30612E
Aa4.81:1 Good#30612E on #B5D4FF
Aa3.05:1 Poor#FF8283 on #30612E
Aa3.05:1 Poor#30612E on #FF8283

Color blindness preview

CSS variables

/* Light Red to Pine — https://swatchly.xyz/palette/ff8283-d34c4b-b5d4ff-1d4000-30612e */
:root {
  --light-red: #ff8283;
  --horror-snob: #d34c4b;
  --frost-fairy: #b5d4ff;
  --realm-of-the-underworld: #1d4000;
  --pine: #30612e;
}

Tailwind CSS v4

/* Light Red to Pine — https://swatchly.xyz/palette/ff8283-d34c4b-b5d4ff-1d4000-30612e */
@theme {
  --color-light-red: #ff8283;
  --color-light-red-50: #fff7f7;
  --color-light-red-100: #ffecec;
  --color-light-red-200: #ffd4d2;
  --color-light-red-300: #ffb5b3;
  --color-light-red-400: #ff8283;
  --color-light-red-500: #dc6467;
  --color-light-red-600: #bb464b;
  --color-light-red-700: #9b2e36;
  --color-light-red-800: #7d1c25;
  --color-light-red-900: #621019;
  --color-light-red-950: #3f050c;
  --color-horror-snob: #d34c4b;
  --color-horror-snob-50: #fff0ef;
  --color-horror-snob-100: #ffe1de;
  --color-horror-snob-200: #ffc3be;
  --color-horror-snob-300: #ff9e98;
  --color-horror-snob-400: #f26c68;
  --color-horror-snob-500: #d34c4b;
  --color-horror-snob-600: #b33134;
  --color-horror-snob-700: #951c22;
  --color-horror-snob-800: #790b16;
  --color-horror-snob-900: #62020d;
  --color-horror-snob-950: #410005;
  --color-frost-fairy: #b5d4ff;
  --color-frost-fairy-50: #e9f2ff;
  --color-frost-fairy-100: #d7e8ff;
  --color-frost-fairy-200: #b5d4ff;
  --color-frost-fairy-300: #a4bee3;
  --color-frost-fairy-400: #83a0c7;
  --color-frost-fairy-500: #6985ad;
  --color-frost-fairy-600: #516c91;
  --color-frost-fairy-700: #3d5677;
  --color-frost-fairy-800: #2e4361;
  --color-frost-fairy-900: #21344d;
  --color-frost-fairy-950: #132032;
  --color-realm-of-the-underworld: #1d4000;
  --color-realm-of-the-underworld-50: #e6feda;
  --color-realm-of-the-underworld-100: #daf5cd;
  --color-realm-of-the-underworld-200: #c3e3b3;
  --color-realm-of-the-underworld-300: #aacd97;
  --color-realm-of-the-underworld-400: #89af74;
  --color-realm-of-the-underworld-500: #6d9558;
  --color-realm-of-the-underworld-600: #547a3f;
  --color-realm-of-the-underworld-700: #40622c;
  --color-realm-of-the-underworld-800: #304f1e;
  --color-realm-of-the-underworld-900: #1d4000;
  --color-realm-of-the-underworld-950: #152709;
  --color-pine: #30612e;
  --color-pine-50: #e1ffdf;
  --color-pine-100: #d5f6d2;
  --color-pine-200: #bce4b9;
  --color-pine-300: #a1cf9e;
  --color-pine-400: #7eb07b;
  --color-pine-500: #61945e;
  --color-pine-600: #487845;
  --color-pine-700: #30612e;
  --color-pine-800: #254c23;
  --color-pine-900: #193b18;
  --color-pine-950: #0d250c;
}