Frost Fairy to Pastel Violet Color Palette

About this palette

Frost Fairy to Pastel Violet is a 5-color cool palette: #B8D2FF (Frost Fairy), #627600 (Topiary Green), #1B2135 (Eclipse Elixir), #4F5420 (Zen Garden Olive), #C895CE (Pastel Violet). It mixes blue, green, pink tones and feels cool overall. The strongest text pairing is #B8D2FF on #1B2135 with a contrast ratio of 10.41:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frost Fairy	rgb(184, 210, 255)	hsl(218, 100%, 86%)
Topiary Green	rgb(98, 118, 0)	hsl(70, 100%, 23%)
Eclipse Elixir	rgb(27, 33, 53)	hsl(226, 33%, 16%)
Zen Garden Olive	rgb(79, 84, 32)	hsl(66, 45%, 23%)
Pastel Violet	rgb(200, 149, 206)	hsl(294, 37%, 70%)

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.

Aa10.41:1 Very good#B8D2FF on #1B2135
Aa10.41:1 Very good#1B2135 on #B8D2FF
Aa6.57:1 Good#1B2135 on #C895CE
Aa6.57:1 Good#C895CE on #1B2135
Aa5.23:1 Good#B8D2FF on #4F5420
Aa5.23:1 Good#4F5420 on #B8D2FF
Aa3.33:1 Poor#B8D2FF on #627600
Aa3.33:1 Poor#627600 on #B8D2FF

Color blindness preview

CSS variables

/* Frost Fairy to Pastel Violet — https://swatchly.xyz/palette/b8d2ff-627600-1b2135-4f5420-c895ce */
:root {
  --frost-fairy: #b8d2ff;
  --topiary-green: #627600;
  --eclipse-elixir: #1b2135;
  --zen-garden-olive: #4f5420;
  --pastel-violet: #c895ce;
}

Tailwind CSS v4

/* Frost Fairy to Pastel Violet — https://swatchly.xyz/palette/b8d2ff-627600-1b2135-4f5420-c895ce */
@theme {
  --color-frost-fairy: #b8d2ff;
  --color-frost-fairy-50: #e9f1ff;
  --color-frost-fairy-100: #d8e6ff;
  --color-frost-fairy-200: #b8d2ff;
  --color-frost-fairy-300: #a6bde3;
  --color-frost-fairy-400: #869ec8;
  --color-frost-fairy-500: #6c84ad;
  --color-frost-fairy-600: #546a91;
  --color-frost-fairy-700: #405478;
  --color-frost-fairy-800: #314261;
  --color-frost-fairy-900: #24334d;
  --color-frost-fairy-950: #151f32;
  --color-topiary-green: #627600;
  --color-topiary-green-50: #eefdc9;
  --color-topiary-green-100: #e3f4b9;
  --color-topiary-green-200: #cee19b;
  --color-topiary-green-300: #b7cc7b;
  --color-topiary-green-400: #97ad50;
  --color-topiary-green-500: #7c912d;
  --color-topiary-green-600: #627600;
  --color-topiary-green-700: #4d5e00;
  --color-topiary-green-800: #3c4900;
  --color-topiary-green-900: #2e3800;
  --color-topiary-green-950: #1c2300;
  --color-eclipse-elixir: #1b2135;
  --color-eclipse-elixir-50: #f1f5ff;
  --color-eclipse-elixir-100: #e5ebfc;
  --color-eclipse-elixir-200: #d0d7eb;
  --color-eclipse-elixir-300: #b9c0d7;
  --color-eclipse-elixir-400: #98a1ba;
  --color-eclipse-elixir-500: #7e869f;
  --color-eclipse-elixir-600: #646c84;
  --color-eclipse-elixir-700: #4f566c;
  --color-eclipse-elixir-800: #3e4457;
  --color-eclipse-elixir-900: #303545;
  --color-eclipse-elixir-950: #1b2135;
  --color-zen-garden-olive: #4f5420;
  --color-zen-garden-olive-50: #f4f9da;
  --color-zen-garden-olive-100: #eaefcd;
  --color-zen-garden-olive-200: #d5dbb2;
  --color-zen-garden-olive-300: #bec495;
  --color-zen-garden-olive-400: #9da470;
  --color-zen-garden-olive-500: #818753;
  --color-zen-garden-olive-600: #666c39;
  --color-zen-garden-olive-700: #4f5420;
  --color-zen-garden-olive-800: #3d4119;
  --color-zen-garden-olive-900: #2f3210;
  --color-zen-garden-olive-950: #1d1f07;
  --color-pastel-violet: #c895ce;
  --color-pastel-violet-50: #fef5ff;
  --color-pastel-violet-100: #fde8ff;
  --color-pastel-violet-200: #f4cff9;
  --color-pastel-violet-300: #e2b7e7;
  --color-pastel-violet-400: #c895ce;
  --color-pastel-violet-500: #aa78af;
  --color-pastel-violet-600: #8c5d92;
  --color-pastel-violet-700: #714677;
  --color-pastel-violet-800: #5a345f;
  --color-pastel-violet-900: #46264a;
  --color-pastel-violet-950: #2c152e;
}