Start generating

Sugar Mint to Oceanic Noir color palette

C1DFC9Sugar MintD7B2CFPurple PoodleB58161Silken Chocolate3E7C4AAutumn Crocodile6E3C11Walnut172C36Oceanic Noir
Open in generator Export PNG, PDF, ASE…

About this palette

Sugar Mint to Oceanic Noir is a 6-color earthy, vintage palette: #C1DFC9 (Sugar Mint), #D7B2CF (Purple Poodle), #B58161 (Silken Chocolate), #3E7C4A (Autumn Crocodile), #6E3C11 (Walnut), #172C36 (Oceanic Noir). It mixes green, pink, orange, brown, gray tones and feels warm overall. The strongest text pairing is #C1DFC9 on #172C36 with a contrast ratio of 10.11:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Sugar Mintrgb(193, 223, 201)hsl(136, 32%, 82%)
Purple Poodlergb(215, 178, 207)hsl(313, 32%, 77%)
Silken Chocolatergb(181, 129, 97)hsl(23, 36%, 55%)
Autumn Crocodilergb(62, 124, 74)hsl(132, 33%, 36%)
Walnutrgb(110, 60, 17)hsl(28, 73%, 25%)
Oceanic Noirrgb(23, 44, 54)hsl(199, 40%, 15%)

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.11:1 Very good#C1DFC9 on #172C36
  • Aa10.11:1 Very good#172C36 on #C1DFC9
  • Aa7.70:1 Very good#D7B2CF on #172C36
  • Aa7.70:1 Very good#172C36 on #D7B2CF
  • Aa6.33:1 Good#C1DFC9 on #6E3C11
  • Aa6.33:1 Good#6E3C11 on #C1DFC9
  • Aa4.82:1 Good#D7B2CF on #6E3C11
  • Aa4.82:1 Good#6E3C11 on #D7B2CF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Sugar Mint to Oceanic Noir — https://swatchly.xyz/palette/c1dfc9-d7b2cf-b58161-3e7c4a-6e3c11-172c36 */
:root {
  --sugar-mint: #c1dfc9;
  --purple-poodle: #d7b2cf;
  --silken-chocolate: #b58161;
  --autumn-crocodile: #3e7c4a;
  --walnut: #6e3c11;
  --oceanic-noir: #172c36;
}

Tailwind CSS v4

/* Sugar Mint to Oceanic Noir — https://swatchly.xyz/palette/c1dfc9-d7b2cf-b58161-3e7c4a-6e3c11-172c36 */
@theme {
  --color-sugar-mint: #c1dfc9;
  --color-sugar-mint-50: #e8f9ed;
  --color-sugar-mint-100: #ddf0e2;
  --color-sugar-mint-200: #c1dfc9;
  --color-sugar-mint-300: #aec7b5;
  --color-sugar-mint-400: #8da995;
  --color-sugar-mint-500: #728e79;
  --color-sugar-mint-600: #587360;
  --color-sugar-mint-700: #445c4b;
  --color-sugar-mint-800: #334839;
  --color-sugar-mint-900: #26382b;
  --color-sugar-mint-950: #16231a;
  --color-purple-poodle: #d7b2cf;
  --color-purple-poodle-50: #ffeffb;
  --color-purple-poodle-100: #fae2f4;
  --color-purple-poodle-200: #e9cce2;
  --color-purple-poodle-300: #d7b2cf;
  --color-purple-poodle-400: #b694af;
  --color-purple-poodle-500: #9b7894;
  --color-purple-poodle-600: #7f5f79;
  --color-purple-poodle-700: #674a61;
  --color-purple-poodle-800: #52384d;
  --color-purple-poodle-900: #402b3c;
  --color-purple-poodle-950: #291926;
  --color-silken-chocolate: #b58161;
  --color-silken-chocolate-50: #fff4ee;
  --color-silken-chocolate-100: #ffe9dd;
  --color-silken-chocolate-200: #fbd2ba;
  --color-silken-chocolate-300: #eabca0;
  --color-silken-chocolate-400: #cf9c7d;
  --color-silken-chocolate-500: #b58161;
  --color-silken-chocolate-600: #976546;
  --color-silken-chocolate-700: #7b4e31;
  --color-silken-chocolate-800: #623b21;
  --color-silken-chocolate-900: #4d2c16;
  --color-silken-chocolate-950: #31190a;
  --color-autumn-crocodile: #3e7c4a;
  --color-autumn-crocodile-50: #e0ffe3;
  --color-autumn-crocodile-100: #d0f8d4;
  --color-autumn-crocodile-200: #b7e6bd;
  --color-autumn-crocodile-300: #9bd1a2;
  --color-autumn-crocodile-400: #76b380;
  --color-autumn-crocodile-500: #599764;
  --color-autumn-crocodile-600: #3e7c4a;
  --color-autumn-crocodile-700: #2b6337;
  --color-autumn-crocodile-800: #1c4f27;
  --color-autumn-crocodile-900: #113d1c;
  --color-autumn-crocodile-950: #07270f;
  --color-walnut: #6e3c11;
  --color-walnut-50: #fff2ea;
  --color-walnut-100: #ffe6d4;
  --color-walnut-200: #facdae;
  --color-walnut-300: #e9b793;
  --color-walnut-400: #ce9770;
  --color-walnut-500: #b47d54;
  --color-walnut-600: #99643c;
  --color-walnut-700: #804f29;
  --color-walnut-800: #6e3c11;
  --color-walnut-900: #542f10;
  --color-walnut-950: #381c06;
  --color-oceanic-noir: #172c36;
  --color-oceanic-noir-50: #eaf8ff;
  --color-oceanic-noir-100: #deeef6;
  --color-oceanic-noir-200: #c8dbe5;
  --color-oceanic-noir-300: #afc5d0;
  --color-oceanic-noir-400: #8ca4b0;
  --color-oceanic-noir-500: #6f8692;
  --color-oceanic-noir-600: #546a75;
  --color-oceanic-noir-700: #3e515b;
  --color-oceanic-noir-800: #2c3c45;
  --color-oceanic-noir-900: #172c36;
  --color-oceanic-noir-950: #10191e;
}

Similar palettes