Drama Queen to Turkish Jade color palette

9B77A5Drama Queen 4A375FRoyal Crown E5D1ABDurian White 785C3ECold Brew Coffee 5FC6CCSea Serpent 33878BTurkish Jade

Open in generator Export PNG, PDF, ASE…

About this palette

Drama Queen to Turkish Jade is a 6-color cool palette: #9B77A5 (Drama Queen), #4A375F (Royal Crown), #E5D1AB (Durian White), #785C3E (Cold Brew Coffee), #5FC6CC (Sea Serpent), #33878B (Turkish Jade). It mixes purple, yellow, brown, turquoise tones and feels cool overall. The strongest text pairing is #4A375F on #E5D1AB with a contrast ratio of 7.01:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Drama Queen	rgb(155, 119, 165)	hsl(287, 20%, 56%)
Royal Crown	rgb(74, 55, 95)	hsl(268, 27%, 29%)
Durian White	rgb(229, 209, 171)	hsl(39, 53%, 78%)
Cold Brew Coffee	rgb(120, 92, 62)	hsl(31, 32%, 36%)
Sea Serpent	rgb(95, 198, 204)	hsl(183, 52%, 59%)
Turkish Jade	rgb(51, 135, 139)	hsl(183, 46%, 37%)

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.01:1 Very good#4A375F on #E5D1AB
Aa7.01:1 Very good#E5D1AB on #4A375F
Aa5.21:1 Good#4A375F on #5FC6CC
Aa5.21:1 Good#5FC6CC on #4A375F
Aa4.13:1 Poor#E5D1AB on #785C3E
Aa4.13:1 Poor#785C3E on #E5D1AB
Aa3.07:1 Poor#785C3E on #5FC6CC
Aa3.07:1 Poor#5FC6CC on #785C3E

Color blindness preview

CSS variables

/* Drama Queen to Turkish Jade — https://swatchly.xyz/palette/9b77a5-4a375f-e5d1ab-785c3e-5fc6cc-33878b */
:root {
  --drama-queen: #9b77a5;
  --royal-crown: #4a375f;
  --durian-white: #e5d1ab;
  --cold-brew-coffee: #785c3e;
  --sea-serpent: #5fc6cc;
  --turkish-jade: #33878b;
}

Tailwind CSS v4

/* Drama Queen to Turkish Jade — https://swatchly.xyz/palette/9b77a5-4a375f-e5d1ab-785c3e-5fc6cc-33878b */
@theme {
  --color-drama-queen: #9b77a5;
  --color-drama-queen-50: #fcf1ff;
  --color-drama-queen-100: #f9e2ff;
  --color-drama-queen-200: #e9ccf1;
  --color-drama-queen-300: #d4b4dd;
  --color-drama-queen-400: #b693c0;
  --color-drama-queen-500: #9b77a5;
  --color-drama-queen-600: #7f5d89;
  --color-drama-queen-700: #67486f;
  --color-drama-queen-800: #523659;
  --color-drama-queen-900: #402946;
  --color-drama-queen-950: #28182d;
  --color-royal-crown: #4a375f;
  --color-royal-crown-50: #f8f2ff;
  --color-royal-crown-100: #f1e6ff;
  --color-royal-crown-200: #dfcff4;
  --color-royal-crown-300: #cab7e0;
  --color-royal-crown-400: #ab97c3;
  --color-royal-crown-500: #8f7ba8;
  --color-royal-crown-600: #74618b;
  --color-royal-crown-700: #5d4b71;
  --color-royal-crown-800: #4a375f;
  --color-royal-crown-900: #382b47;
  --color-royal-crown-950: #231a2e;
  --color-durian-white: #e5d1ab;
  --color-durian-white-50: #fdf1db;
  --color-durian-white-100: #f3e6ce;
  --color-durian-white-200: #e5d1ab;
  --color-durian-white-300: #cdbc9b;
  --color-durian-white-400: #af9d79;
  --color-durian-white-500: #94825e;
  --color-durian-white-600: #7a6846;
  --color-durian-white-700: #625233;
  --color-durian-white-800: #4e4025;
  --color-durian-white-900: #3d311a;
  --color-durian-white-950: #261e0d;
  --color-cold-brew-coffee: #785c3e;
  --color-cold-brew-coffee-50: #fff3e7;
  --color-cold-brew-coffee-100: #fae5d0;
  --color-cold-brew-coffee-200: #e8cfb6;
  --color-cold-brew-coffee-300: #d2b69a;
  --color-cold-brew-coffee-400: #b29476;
  --color-cold-brew-coffee-500: #957859;
  --color-cold-brew-coffee-600: #785c3e;
  --color-cold-brew-coffee-700: #60482e;
  --color-cold-brew-coffee-800: #4d3821;
  --color-cold-brew-coffee-900: #3c2b17;
  --color-cold-brew-coffee-950: #261a0c;
  --color-sea-serpent: #5fc6cc;
  --color-sea-serpent-50: #c2fafe;
  --color-sea-serpent-100: #aff0f3;
  --color-sea-serpent-200: #8edce0;
  --color-sea-serpent-300: #5fc6cc;
  --color-sea-serpent-400: #41a8ae;
  --color-sea-serpent-500: #188f95;
  --color-sea-serpent-600: #00747a;
  --color-sea-serpent-700: #005d62;
  --color-sea-serpent-800: #004a4e;
  --color-sea-serpent-900: #003b3e;
  --color-sea-serpent-950: #002527;
  --color-turkish-jade: #33878b;
  --color-turkish-jade-50: #d9feff;
  --color-turkish-jade-100: #c9f8fa;
  --color-turkish-jade-200: #b1e8eb;
  --color-turkish-jade-300: #95d6d9;
  --color-turkish-jade-400: #6fb9bd;
  --color-turkish-jade-500: #50a0a4;
  --color-turkish-jade-600: #33878b;
  --color-turkish-jade-700: #176d70;
  --color-turkish-jade-800: #005559;
  --color-turkish-jade-900: #004144;
  --color-turkish-jade-950: #00292b;
}