Cold and Dark to Neon Violet color palette

10454ECold and Dark 9F883DJalapeño 91C5CACerulean Skies E2D4AAGratin Dauphinois 896E8BVintage 69476FNeon Violet

Open in generator Export PNG, PDF, ASE…

About this palette

Cold and Dark to Neon Violet is a 6-color cool palette: #10454E (Cold and Dark), #9F883D (Jalapeño), #91C5CA (Cerulean Skies), #E2D4AA (Gratin Dauphinois), #896E8B (Vintage), #69476F (Neon Violet). It mixes turquoise, yellow, pink, purple tones and feels cool overall. The strongest text pairing is #10454E on #E2D4AA with a contrast ratio of 7.18:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cold and Dark	rgb(16, 69, 78)	hsl(189, 66%, 18%)
Jalapeño	rgb(159, 136, 61)	hsl(46, 45%, 43%)
Cerulean Skies	rgb(145, 197, 202)	hsl(185, 35%, 68%)
Gratin Dauphinois	rgb(226, 212, 170)	hsl(45, 49%, 78%)
Vintage	rgb(137, 110, 139)	hsl(296, 12%, 49%)
Neon Violet	rgb(105, 71, 111)	hsl(291, 22%, 36%)

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.18:1 Very good#10454E on #E2D4AA
Aa7.18:1 Very good#E2D4AA on #10454E
Aa5.57:1 Good#10454E on #91C5CA
Aa5.57:1 Good#91C5CA on #10454E
Aa5.21:1 Good#E2D4AA on #69476F
Aa5.21:1 Good#69476F on #E2D4AA
Aa4.04:1 Poor#91C5CA on #69476F
Aa4.04:1 Poor#69476F on #91C5CA

Color blindness preview

CSS variables

/* Cold and Dark to Neon Violet — https://swatchly.xyz/palette/10454e-9f883d-91c5ca-e2d4aa-896e8b-69476f */
:root {
  --cold-and-dark: #10454e;
  --jalape-o: #9f883d;
  --cerulean-skies: #91c5ca;
  --gratin-dauphinois: #e2d4aa;
  --vintage: #896e8b;
  --neon-violet: #69476f;
}

Tailwind CSS v4

/* Cold and Dark to Neon Violet — https://swatchly.xyz/palette/10454e-9f883d-91c5ca-e2d4aa-896e8b-69476f */
@theme {
  --color-cold-and-dark: #10454e;
  --color-cold-and-dark-50: #e3faff;
  --color-cold-and-dark-100: #d2f2f8;
  --color-cold-and-dark-200: #badfe7;
  --color-cold-and-dark-300: #9dc9d2;
  --color-cold-and-dark-400: #79a9b3;
  --color-cold-and-dark-500: #5b8d96;
  --color-cold-and-dark-600: #41717a;
  --color-cold-and-dark-700: #2d5861;
  --color-cold-and-dark-800: #10454e;
  --color-cold-and-dark-900: #14343a;
  --color-cold-and-dark-950: #092024;
  --color-jalape-o: #9f883d;
  --color-jalape-o-50: #fff6d9;
  --color-jalape-o-100: #fbecc0;
  --color-jalape-o-200: #ead9a3;
  --color-jalape-o-300: #d6c385;
  --color-jalape-o-400: #b9a35d;
  --color-jalape-o-500: #9f883d;
  --color-jalape-o-600: #836d1f;
  --color-jalape-o-700: #6a5504;
  --color-jalape-o-800: #534200;
  --color-jalape-o-900: #403200;
  --color-jalape-o-950: #281f00;
  --color-cerulean-skies: #91c5ca;
  --color-cerulean-skies-50: #daf8fb;
  --color-cerulean-skies-100: #cceef1;
  --color-cerulean-skies-200: #b2dade;
  --color-cerulean-skies-300: #91c5ca;
  --color-cerulean-skies-400: #75a6ab;
  --color-cerulean-skies-500: #598c91;
  --color-cerulean-skies-600: #417277;
  --color-cerulean-skies-700: #2e5c60;
  --color-cerulean-skies-800: #20494c;
  --color-cerulean-skies-900: #16393c;
  --color-cerulean-skies-950: #0a2426;
  --color-gratin-dauphinois: #e2d4aa;
  --color-gratin-dauphinois-50: #fbf3db;
  --color-gratin-dauphinois-100: #f1e8ce;
  --color-gratin-dauphinois-200: #e2d4aa;
  --color-gratin-dauphinois-300: #cabe9b;
  --color-gratin-dauphinois-400: #ac9f78;
  --color-gratin-dauphinois-500: #91845d;
  --color-gratin-dauphinois-600: #776a44;
  --color-gratin-dauphinois-700: #5f5431;
  --color-gratin-dauphinois-800: #4c4223;
  --color-gratin-dauphinois-900: #3b3218;
  --color-gratin-dauphinois-950: #251f0c;
  --color-vintage: #896e8b;
  --color-vintage-50: #fef0ff;
  --color-vintage-100: #f9e7fa;
  --color-vintage-200: #ead4eb;
  --color-vintage-300: #d7bfd9;
  --color-vintage-400: #bba0bd;
  --color-vintage-500: #a286a4;
  --color-vintage-600: #896e8b;
  --color-vintage-700: #6e5670;
  --color-vintage-800: #574159;
  --color-vintage-900: #443145;
  --color-vintage-950: #2b1d2c;
  --color-neon-violet: #69476f;
  --color-neon-violet-50: #fdf0ff;
  --color-neon-violet-100: #fae1ff;
  --color-neon-violet-200: #e9ccee;
  --color-neon-violet-300: #d5b4db;
  --color-neon-violet-400: #b793bd;
  --color-neon-violet-500: #9c77a2;
  --color-neon-violet-600: #805e86;
  --color-neon-violet-700: #69476f;
  --color-neon-violet-800: #523757;
  --color-neon-violet-900: #402944;
  --color-neon-violet-950: #29182c;
}