Dark Cyan to Love Fumes Color Palette

About this palette

Dark Cyan to Love Fumes is a 5-color warm, vintage palette: #008F8F (Dark Cyan), #746400 (Himalaya), #531F24 (Lonestar), #A7AFFF (Wondrous Wisteria), #FFCDD6 (Love Fumes). It mixes turquoise, brown, purple, pink tones and feels warm overall. The strongest text pairing is #531F24 on #FFCDD6 with a contrast ratio of 9.41:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Cyan	rgb(0, 143, 143)	hsl(180, 100%, 28%)
Himalaya	rgb(116, 100, 0)	hsl(52, 100%, 23%)
Lonestar	rgb(83, 31, 36)	hsl(354, 46%, 22%)
Wondrous Wisteria	rgb(167, 175, 255)	hsl(235, 100%, 83%)
Love Fumes	rgb(255, 205, 214)	hsl(349, 100%, 90%)

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.41:1 Very good#531F24 on #FFCDD6
Aa9.41:1 Very good#FFCDD6 on #531F24
Aa6.43:1 Good#531F24 on #A7AFFF
Aa6.43:1 Good#A7AFFF on #531F24
Aa4.19:1 Poor#746400 on #FFCDD6
Aa4.19:1 Poor#FFCDD6 on #746400
Aa3.35:1 Poor#008F8F on #531F24
Aa3.35:1 Poor#531F24 on #008F8F

Color blindness preview

CSS variables

/* Dark Cyan to Love Fumes — https://swatchly.xyz/palette/008f8f-746400-531f24-a7afff-ffcdd6 */
:root {
  --dark-cyan: #008f8f;
  --himalaya: #746400;
  --lonestar: #531f24;
  --wondrous-wisteria: #a7afff;
  --love-fumes: #ffcdd6;
}

Tailwind CSS v4

/* Dark Cyan to Love Fumes — https://swatchly.xyz/palette/008f8f-746400-531f24-a7afff-ffcdd6 */
@theme {
  --color-dark-cyan: #008f8f;
  --color-dark-cyan-50: #ccfffe;
  --color-dark-cyan-100: #b5f6f5;
  --color-dark-cyan-200: #94e3e2;
  --color-dark-cyan-300: #70cccc;
  --color-dark-cyan-400: #3eacac;
  --color-dark-cyan-500: #008f8f;
  --color-dark-cyan-600: #007373;
  --color-dark-cyan-700: #005c5c;
  --color-dark-cyan-800: #004848;
  --color-dark-cyan-900: #003838;
  --color-dark-cyan-950: #002424;
  --color-himalaya: #746400;
  --color-himalaya-50: #fff6cb;
  --color-himalaya-100: #f5ebb9;
  --color-himalaya-200: #e2d69a;
  --color-himalaya-300: #ccbe78;
  --color-himalaya-400: #ac9d4e;
  --color-himalaya-500: #90802c;
  --color-himalaya-600: #746400;
  --color-himalaya-700: #5c4f00;
  --color-himalaya-800: #483e00;
  --color-himalaya-900: #382f00;
  --color-himalaya-950: #231d00;
  --color-lonestar: #531f24;
  --color-lonestar-50: #fff1f1;
  --color-lonestar-100: #ffe4e4;
  --color-lonestar-200: #fbc9ca;
  --color-lonestar-300: #e9b0b2;
  --color-lonestar-400: #cc8f91;
  --color-lonestar-500: #b07375;
  --color-lonestar-600: #93595c;
  --color-lonestar-700: #784447;
  --color-lonestar-800: #603336;
  --color-lonestar-900: #531f24;
  --color-lonestar-950: #311617;
  --color-wondrous-wisteria: #a7afff;
  --color-wondrous-wisteria-50: #ecefff;
  --color-wondrous-wisteria-100: #dee2ff;
  --color-wondrous-wisteria-200: #c4cbff;
  --color-wondrous-wisteria-300: #a7afff;
  --color-wondrous-wisteria-400: #8b92dd;
  --color-wondrous-wisteria-500: #7277c3;
  --color-wondrous-wisteria-600: #5a5fa6;
  --color-wondrous-wisteria-700: #474a8b;
  --color-wondrous-wisteria-800: #373972;
  --color-wondrous-wisteria-900: #2b2c5d;
  --color-wondrous-wisteria-950: #191a3d;
  --color-love-fumes: #ffcdd6;
  --color-love-fumes-50: #fff6f7;
  --color-love-fumes-100: #ffe9ec;
  --color-love-fumes-200: #ffcdd6;
  --color-love-fumes-300: #e1b8c0;
  --color-love-fumes-400: #c4979f;
  --color-love-fumes-500: #a77a83;
  --color-love-fumes-600: #8a5f68;
  --color-love-fumes-700: #704951;
  --color-love-fumes-800: #59373e;
  --color-love-fumes-900: #46292f;
  --color-love-fumes-950: #2d191d;
}