Start generating

Dark Knight to Ultra Mint color palette

1F182BDark Knight60311EFreshly Roasted Coffee643DA5Poppy PompadourD15007Tomato Bisque63C9B2Cockatoo95F3CAUltra Mint
Open in generator Export PNG, PDF, ASE…

About this palette

Dark Knight to Ultra Mint is a 6-color cool palette: #1F182B (Dark Knight), #60311E (Freshly Roasted Coffee), #643DA5 (Poppy Pompadour), #D15007 (Tomato Bisque), #63C9B2 (Cockatoo), #95F3CA (Ultra Mint). It mixes purple, brown, orange, turquoise, green tones and feels cool overall. The strongest text pairing is #1F182B on #95F3CA with a contrast ratio of 13.03:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Dark Knightrgb(31, 24, 43)hsl(262, 28%, 13%)
Freshly Roasted Coffeergb(96, 49, 30)hsl(17, 52%, 25%)
Poppy Pompadourrgb(100, 61, 165)hsl(262, 46%, 44%)
Tomato Bisquergb(209, 80, 7)hsl(22, 94%, 42%)
Cockatoorgb(99, 201, 178)hsl(166, 49%, 59%)
Ultra Mintrgb(149, 243, 202)hsl(154, 80%, 77%)

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.

  • Aa13.03:1 Super#1F182B on #95F3CA
  • Aa13.03:1 Super#95F3CA on #1F182B
  • Aa8.60:1 Very good#1F182B on #63C9B2
  • Aa8.60:1 Very good#63C9B2 on #1F182B
  • Aa8.16:1 Very good#60311E on #95F3CA
  • Aa8.16:1 Very good#95F3CA on #60311E
  • Aa5.79:1 Good#643DA5 on #95F3CA
  • Aa5.79:1 Good#95F3CA on #643DA5

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Dark Knight to Ultra Mint — https://swatchly.xyz/palette/1f182b-60311e-643da5-d15007-63c9b2-95f3ca */
:root {
  --dark-knight: #1f182b;
  --freshly-roasted-coffee: #60311e;
  --poppy-pompadour: #643da5;
  --tomato-bisque: #d15007;
  --cockatoo: #63c9b2;
  --ultra-mint: #95f3ca;
}

Tailwind CSS v4

/* Dark Knight to Ultra Mint — https://swatchly.xyz/palette/1f182b-60311e-643da5-d15007-63c9b2-95f3ca */
@theme {
  --color-dark-knight: #1f182b;
  --color-dark-knight-50: #f7f3ff;
  --color-dark-knight-100: #ede8f9;
  --color-dark-knight-200: #dad4e7;
  --color-dark-knight-300: #c4bdd3;
  --color-dark-knight-400: #a59db5;
  --color-dark-knight-500: #898199;
  --color-dark-knight-600: #6e667d;
  --color-dark-knight-700: #564f64;
  --color-dark-knight-800: #433d4e;
  --color-dark-knight-900: #322d3c;
  --color-dark-knight-950: #1f182b;
  --color-freshly-roasted-coffee: #60311e;
  --color-freshly-roasted-coffee-50: #fff2ed;
  --color-freshly-roasted-coffee-100: #ffe5db;
  --color-freshly-roasted-coffee-200: #f8ccbb;
  --color-freshly-roasted-coffee-300: #e5b4a0;
  --color-freshly-roasted-coffee-400: #c8927d;
  --color-freshly-roasted-coffee-500: #ab7661;
  --color-freshly-roasted-coffee-600: #8e5c48;
  --color-freshly-roasted-coffee-700: #734634;
  --color-freshly-roasted-coffee-800: #60311e;
  --color-freshly-roasted-coffee-900: #48271a;
  --color-freshly-roasted-coffee-950: #2e170d;
  --color-poppy-pompadour: #643da5;
  --color-poppy-pompadour-50: #f6f3ff;
  --color-poppy-pompadour-100: #ede7ff;
  --color-poppy-pompadour-200: #dcd0ff;
  --color-poppy-pompadour-300: #c9b4ff;
  --color-poppy-pompadour-400: #ae8cf7;
  --color-poppy-pompadour-500: #9470dc;
  --color-poppy-pompadour-600: #7a55be;
  --color-poppy-pompadour-700: #643da5;
  --color-poppy-pompadour-800: #4e2e83;
  --color-poppy-pompadour-900: #3d216a;
  --color-poppy-pompadour-950: #271247;
  --color-tomato-bisque: #d15007;
  --color-tomato-bisque-50: #fff0eb;
  --color-tomato-bisque-100: #ffe1d6;
  --color-tomato-bisque-200: #ffc4ae;
  --color-tomato-bisque-300: #ffa07b;
  --color-tomato-bisque-400: #f07039;
  --color-tomato-bisque-500: #d15007;
  --color-tomato-bisque-600: #aa3e00;
  --color-tomato-bisque-700: #893000;
  --color-tomato-bisque-800: #6d2500;
  --color-tomato-bisque-900: #561b00;
  --color-tomato-bisque-950: #390f00;
  --color-cockatoo: #63c9b2;
  --color-cockatoo-50: #c4fced;
  --color-cockatoo-100: #b1f2e1;
  --color-cockatoo-200: #91decb;
  --color-cockatoo-300: #63c9b2;
  --color-cockatoo-400: #45ab95;
  --color-cockatoo-500: #20917c;
  --color-cockatoo-600: #007764;
  --color-cockatoo-700: #006050;
  --color-cockatoo-800: #004c40;
  --color-cockatoo-900: #003c32;
  --color-cockatoo-950: #00261f;
  --color-ultra-mint: #95f3ca;
  --color-ultra-mint-50: #e7fff3;
  --color-ultra-mint-100: #c9fde4;
  --color-ultra-mint-200: #95f3ca;
  --color-ultra-mint-300: #8cd8b6;
  --color-ultra-mint-400: #60b994;
  --color-ultra-mint-500: #3c9c78;
  --color-ultra-mint-600: #19805d;
  --color-ultra-mint-700: #006648;
  --color-ultra-mint-800: #004f37;
  --color-ultra-mint-900: #003d2a;
  --color-ultra-mint-950: #002719;
}

Similar palettes