Frost to Sunken Ship Color Palette

About this palette

Frost to Sunken Ship is a 6-color cool palette: #DFE8C2 (Frost), #C8B0DE (Moonraker), #CD8774 (Muted Clay), #697652 (Dill), #005E64 (Beau Vert), #00252D (Sunken Ship). It mixes green, purple, red, turquoise, blue tones and feels cool overall. The strongest text pairing is #DFE8C2 on #00252D with a contrast ratio of 12.64:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frost	rgb(223, 232, 194)	hsl(74, 45%, 84%)
Moonraker	rgb(200, 176, 222)	hsl(271, 41%, 78%)
Muted Clay	rgb(205, 135, 116)	hsl(13, 47%, 63%)
Dill	rgb(105, 118, 82)	hsl(82, 18%, 39%)
Beau Vert	rgb(0, 94, 100)	hsl(184, 100%, 20%)
Sunken Ship	rgb(0, 37, 45)	hsl(191, 100%, 9%)

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.

Aa12.64:1 Super#DFE8C2 on #00252D
Aa12.64:1 Super#00252D on #DFE8C2
Aa8.23:1 Very good#C8B0DE on #00252D
Aa8.23:1 Very good#00252D on #C8B0DE
Aa5.91:1 Good#DFE8C2 on #005E64
Aa5.91:1 Good#005E64 on #DFE8C2
Aa5.61:1 Good#CD8774 on #00252D
Aa5.61:1 Good#00252D on #CD8774

Color blindness preview

CSS variables

/* Frost to Sunken Ship — https://swatchly.xyz/palette/dfe8c2-c8b0de-cd8774-697652-005e64-00252d */
:root {
  --frost: #dfe8c2;
  --moonraker: #c8b0de;
  --muted-clay: #cd8774;
  --dill: #697652;
  --beau-vert: #005e64;
  --sunken-ship: #00252d;
}

Tailwind CSS v4

/* Frost to Sunken Ship — https://swatchly.xyz/palette/dfe8c2-c8b0de-cd8774-697652-005e64-00252d */
@theme {
  --color-frost: #dfe8c2;
  --color-frost-50: #ecf1db;
  --color-frost-100: #dfe8c2;
  --color-frost-200: #ced5b8;
  --color-frost-300: #b8c0a0;
  --color-frost-400: #9aa280;
  --color-frost-500: #808865;
  --color-frost-600: #686f4e;
  --color-frost-700: #53593b;
  --color-frost-800: #40462b;
  --color-frost-900: #31361f;
  --color-frost-950: #1e2111;
  --color-moonraker: #c8b0de;
  --color-moonraker-50: #f7eeff;
  --color-moonraker-100: #f0e0ff;
  --color-moonraker-200: #ddcaee;
  --color-moonraker-300: #c8b0de;
  --color-moonraker-400: #a992bd;
  --color-moonraker-500: #8e78a3;
  --color-moonraker-600: #745f87;
  --color-moonraker-700: #5e4a6f;
  --color-moonraker-800: #4a3959;
  --color-moonraker-900: #3a2b47;
  --color-moonraker-950: #251a2e;
  --color-muted-clay: #cd8774;
  --color-muted-clay-50: #ffefea;
  --color-muted-clay-100: #ffe0d8;
  --color-muted-clay-200: #fdc4b4;
  --color-muted-clay-300: #eaaa98;
  --color-muted-clay-400: #cd8774;
  --color-muted-clay-500: #b16d5b;
  --color-muted-clay-600: #945443;
  --color-muted-clay-700: #794031;
  --color-muted-clay-800: #623023;
  --color-muted-clay-900: #4e2419;
  --color-muted-clay-950: #34150d;
  --color-dill: #697652;
  --color-dill-50: #f0f9e3;
  --color-dill-100: #e7f0d8;
  --color-dill-200: #d3dec1;
  --color-dill-300: #bdc9a8;
  --color-dill-400: #9dab87;
  --color-dill-500: #83906b;
  --color-dill-600: #697652;
  --color-dill-700: #525e3d;
  --color-dill-800: #3f4a2d;
  --color-dill-900: #303920;
  --color-dill-950: #1d2312;
  --color-beau-vert: #005e64;
  --color-beau-vert-50: #dcfcff;
  --color-beau-vert-100: #c8f5f9;
  --color-beau-vert-200: #ace2e7;
  --color-beau-vert-300: #8ecdd2;
  --color-beau-vert-400: #66adb3;
  --color-beau-vert-500: #469197;
  --color-beau-vert-600: #2a767b;
  --color-beau-vert-700: #005e64;
  --color-beau-vert-800: #03494e;
  --color-beau-vert-900: #00393d;
  --color-beau-vert-950: #002326;
  --color-sunken-ship: #00252d;
  --color-sunken-ship-50: #e5f9ff;
  --color-sunken-ship-100: #d8f0f7;
  --color-sunken-ship-200: #c1dde5;
  --color-sunken-ship-300: #a7c7d0;
  --color-sunken-ship-400: #85a9b2;
  --color-sunken-ship-500: #698d97;
  --color-sunken-ship-600: #4f737c;
  --color-sunken-ship-700: #3b5c64;
  --color-sunken-ship-800: #2c484f;
  --color-sunken-ship-900: #1f383e;
  --color-sunken-ship-950: #00252d;
}