Start generating

Smoke Dragon to Starlet Pink color palette

CEBDAESmoke Dragon3F382CDark Rum785564Royal Fig61748EPlumbeous6D997DMoneyEAC0DFStarlet Pink
Open in generator Export PNG, PDF, ASE…

About this palette

Smoke Dragon to Starlet Pink is a 6-color muted palette: #CEBDAE (Smoke Dragon), #3F382C (Dark Rum), #785564 (Royal Fig), #61748E (Plumbeous), #6D997D (Money), #EAC0DF (Starlet Pink). It mixes gray, red, blue, green, pink tones and feels balanced overall. The strongest text pairing is #3F382C on #EAC0DF with a contrast ratio of 7.23:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Smoke Dragonrgb(206, 189, 174)hsl(28, 25%, 75%)
Dark Rumrgb(63, 56, 44)hsl(38, 18%, 21%)
Royal Figrgb(120, 85, 100)hsl(334, 17%, 40%)
Plumbeousrgb(97, 116, 142)hsl(215, 19%, 47%)
Moneyrgb(109, 153, 125)hsl(142, 18%, 51%)
Starlet Pinkrgb(234, 192, 223)hsl(316, 50%, 84%)

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.23:1 Very good#3F382C on #EAC0DF
  • Aa7.23:1 Very good#EAC0DF on #3F382C
  • Aa6.35:1 Good#CEBDAE on #3F382C
  • Aa6.35:1 Good#3F382C on #CEBDAE
  • Aa3.99:1 Poor#785564 on #EAC0DF
  • Aa3.99:1 Poor#EAC0DF on #785564
  • Aa3.59:1 Poor#3F382C on #6D997D
  • Aa3.59:1 Poor#6D997D on #3F382C

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Smoke Dragon to Starlet Pink — https://swatchly.xyz/palette/cebdae-3f382c-785564-61748e-6d997d-eac0df */
:root {
  --smoke-dragon: #cebdae;
  --dark-rum: #3f382c;
  --royal-fig: #785564;
  --plumbeous: #61748e;
  --money: #6d997d;
  --starlet-pink: #eac0df;
}

Tailwind CSS v4

/* Smoke Dragon to Starlet Pink — https://swatchly.xyz/palette/cebdae-3f382c-785564-61748e-6d997d-eac0df */
@theme {
  --color-smoke-dragon: #cebdae;
  --color-smoke-dragon-50: #fdf3ea;
  --color-smoke-dragon-100: #f4e9df;
  --color-smoke-dragon-200: #e1d4c9;
  --color-smoke-dragon-300: #cebdae;
  --color-smoke-dragon-400: #ae9e90;
  --color-smoke-dragon-500: #928375;
  --color-smoke-dragon-600: #77685b;
  --color-smoke-dragon-700: #605246;
  --color-smoke-dragon-800: #4c4035;
  --color-smoke-dragon-900: #3b3128;
  --color-smoke-dragon-950: #251e17;
  --color-dark-rum: #3f382c;
  --color-dark-rum-50: #f9f4ec;
  --color-dark-rum-100: #f0eae1;
  --color-dark-rum-200: #ddd7cc;
  --color-dark-rum-300: #c7c0b3;
  --color-dark-rum-400: #aaa294;
  --color-dark-rum-500: #90877a;
  --color-dark-rum-600: #766e61;
  --color-dark-rum-700: #60594d;
  --color-dark-rum-800: #4d473c;
  --color-dark-rum-900: #3f382c;
  --color-dark-rum-950: #27231d;
  --color-royal-fig: #785564;
  --color-royal-fig-50: #fff1f6;
  --color-royal-fig-100: #fbe1eb;
  --color-royal-fig-200: #e9c9d6;
  --color-royal-fig-300: #d3b0be;
  --color-royal-fig-400: #b38d9d;
  --color-royal-fig-500: #957080;
  --color-royal-fig-600: #785564;
  --color-royal-fig-700: #60424f;
  --color-royal-fig-800: #4d333e;
  --color-royal-fig-900: #3c2630;
  --color-royal-fig-950: #26171e;
  --color-plumbeous: #61748e;
  --color-plumbeous-50: #eff6ff;
  --color-plumbeous-100: #e1eeff;
  --color-plumbeous-200: #ccdbf1;
  --color-plumbeous-300: #b5c6de;
  --color-plumbeous-400: #95a8c2;
  --color-plumbeous-500: #7a8ea8;
  --color-plumbeous-600: #61748e;
  --color-plumbeous-700: #4b5c73;
  --color-plumbeous-800: #38485c;
  --color-plumbeous-900: #2a3748;
  --color-plumbeous-950: #18222e;
  --color-money: #6d997d;
  --color-money-50: #e5feed;
  --color-money-100: #daf6e3;
  --color-money-200: #c4e5cf;
  --color-money-300: #abd1b8;
  --color-money-400: #89b398;
  --color-money-500: #6d997d;
  --color-money-600: #527d62;
  --color-money-700: #3c644b;
  --color-money-800: #2b4e39;
  --color-money-900: #1e3c2a;
  --color-money-950: #102519;
  --color-starlet-pink: #eac0df;
  --color-starlet-pink-50: #ffe7f8;
  --color-starlet-pink-100: #f7daef;
  --color-starlet-pink-200: #eac0df;
  --color-starlet-pink-300: #d1adc8;
  --color-starlet-pink-400: #b58eab;
  --color-starlet-pink-500: #9b7491;
  --color-starlet-pink-600: #805c77;
  --color-starlet-pink-700: #684861;
  --color-starlet-pink-800: #54374d;
  --color-starlet-pink-900: #422a3c;
  --color-starlet-pink-950: #2a1926;
}

Similar palettes