Cola to Nectar color palette

3B3025Cola 395E62Arctic Nights 676E8ADark Prince 8BA4A6Harbour Mist 8E9AB3Moon Veil EFD8CANectar

Open in generator Export PNG, PDF, ASE…

About this palette

Cola to Nectar is a 6-color muted palette: #3B3025 (Cola), #395E62 (Arctic Nights), #676E8A (Dark Prince), #8BA4A6 (Harbour Mist), #8E9AB3 (Moon Veil), #EFD8CA (Nectar). It mixes gray, turquoise, blue tones and feels cool overall. The strongest text pairing is #3B3025 on #EFD8CA with a contrast ratio of 9.38:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cola	rgb(59, 48, 37)	hsl(30, 23%, 19%)
Arctic Nights	rgb(57, 94, 98)	hsl(186, 26%, 30%)
Dark Prince	rgb(103, 110, 138)	hsl(228, 15%, 47%)
Harbour Mist	rgb(139, 164, 166)	hsl(184, 13%, 60%)
Moon Veil	rgb(142, 154, 179)	hsl(221, 20%, 63%)
Nectar	rgb(239, 216, 202)	hsl(23, 54%, 86%)

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.

Aa9.38:1 Very good#3B3025 on #EFD8CA
Aa9.38:1 Very good#EFD8CA on #3B3025
Aa5.20:1 Good#395E62 on #EFD8CA
Aa5.20:1 Good#EFD8CA on #395E62
Aa4.87:1 Good#3B3025 on #8BA4A6
Aa4.87:1 Good#8BA4A6 on #3B3025
Aa4.54:1 Good#3B3025 on #8E9AB3
Aa4.54:1 Good#8E9AB3 on #3B3025

Color blindness preview

CSS variables

/* Cola to Nectar — https://swatchly.xyz/palette/3b3025-395e62-676e8a-8ba4a6-8e9ab3-efd8ca */
:root {
  --cola: #3b3025;
  --arctic-nights: #395e62;
  --dark-prince: #676e8a;
  --harbour-mist: #8ba4a6;
  --moon-veil: #8e9ab3;
  --nectar: #efd8ca;
}

Tailwind CSS v4

/* Cola to Nectar — https://swatchly.xyz/palette/3b3025-395e62-676e8a-8ba4a6-8e9ab3-efd8ca */
@theme {
  --color-cola: #3b3025;
  --color-cola-50: #fcf4ec;
  --color-cola-100: #f2e9e1;
  --color-cola-200: #e0d5cb;
  --color-cola-300: #cbbfb3;
  --color-cola-400: #ac9f92;
  --color-cola-500: #908377;
  --color-cola-600: #75695d;
  --color-cola-700: #5e5348;
  --color-cola-800: #4a4036;
  --color-cola-900: #3b3025;
  --color-cola-950: #231e18;
  --color-arctic-nights: #395e62;
  --color-arctic-nights-50: #e4fafc;
  --color-arctic-nights-100: #d8f1f3;
  --color-arctic-nights-200: #c1dee2;
  --color-arctic-nights-300: #a7c9cc;
  --color-arctic-nights-400: #85aaae;
  --color-arctic-nights-500: #698f93;
  --color-arctic-nights-600: #507579;
  --color-arctic-nights-700: #395e62;
  --color-arctic-nights-800: #2b494d;
  --color-arctic-nights-900: #1f393b;
  --color-arctic-nights-950: #112325;
  --color-dark-prince: #676e8a;
  --color-dark-prince-50: #f2f5ff;
  --color-dark-prince-100: #e6ebff;
  --color-dark-prince-200: #d2d8ef;
  --color-dark-prince-300: #bbc2dc;
  --color-dark-prince-400: #9ba3bf;
  --color-dark-prince-500: #8188a5;
  --color-dark-prince-600: #676e8a;
  --color-dark-prince-700: #515770;
  --color-dark-prince-800: #3e4359;
  --color-dark-prince-900: #2f3346;
  --color-dark-prince-950: #1c1f2d;
  --color-harbour-mist: #8ba4a6;
  --color-harbour-mist-50: #e9f7f9;
  --color-harbour-mist-100: #ddedef;
  --color-harbour-mist-200: #c6dadb;
  --color-harbour-mist-300: #adc3c5;
  --color-harbour-mist-400: #8ba4a6;
  --color-harbour-mist-500: #71898b;
  --color-harbour-mist-600: #586f71;
  --color-harbour-mist-700: #43585a;
  --color-harbour-mist-800: #334547;
  --color-harbour-mist-900: #263637;
  --color-harbour-mist-950: #162223;
  --color-moon-veil: #8e9ab3;
  --color-moon-veil-50: #ecf3ff;
  --color-moon-veil-100: #dfe7f9;
  --color-moon-veil-200: #c8d2e7;
  --color-moon-veil-300: #afbbd1;
  --color-moon-veil-400: #8e9ab3;
  --color-moon-veil-500: #758098;
  --color-moon-veil-600: #5c677e;
  --color-moon-veil-700: #485266;
  --color-moon-veil-800: #384052;
  --color-moon-veil-900: #2b3241;
  --color-moon-veil-950: #1a1f2a;
  --color-nectar: #efd8ca;
  --color-nectar-50: #fff7f3;
  --color-nectar-100: #fbede5;
  --color-nectar-200: #efd8ca;
  --color-nectar-300: #d4c1b6;
  --color-nectar-400: #b5a094;
  --color-nectar-500: #998477;
  --color-nectar-600: #7d695d;
  --color-nectar-700: #645247;
  --color-nectar-800: #4e3f35;
  --color-nectar-900: #3d3028;
  --color-nectar-950: #261d17;
}