Start generating

Somewhere in a Fairytale to Vicious Violet color palette

CF91DDSomewhere in a FairytaleAE6E00Caramel004C47Tropical ForestB8FAF4Ice Citadel8A4D9AVicious Violet
Open in generator Export PNG, PDF, ASE…

About this palette

Somewhere in a Fairytale to Vicious Violet is a 5-color cool palette: #CF91DD (Somewhere in a Fairytale), #AE6E00 (Caramel), #004C47 (Tropical Forest), #B8FAF4 (Ice Citadel), #8A4D9A (Vicious Violet). It mixes purple, orange, turquoise tones and feels cool overall. The strongest text pairing is #004C47 on #B8FAF4 with a contrast ratio of 8.48:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Somewhere in a Fairytalergb(207, 145, 221)hsl(289, 53%, 72%)
Caramelrgb(174, 110, 0)hsl(38, 100%, 34%)
Tropical Forestrgb(0, 76, 71)hsl(176, 100%, 15%)
Ice Citadelrgb(184, 250, 244)hsl(175, 87%, 85%)
Vicious Violetrgb(138, 77, 154)hsl(288, 33%, 45%)

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.

  • Aa8.48:1 Very good#004C47 on #B8FAF4
  • Aa8.48:1 Very good#B8FAF4 on #004C47
  • Aa4.99:1 Good#B8FAF4 on #8A4D9A
  • Aa4.99:1 Good#8A4D9A on #B8FAF4
  • Aa4.12:1 Poor#CF91DD on #004C47
  • Aa4.12:1 Poor#004C47 on #CF91DD
  • Aa3.58:1 Poor#AE6E00 on #B8FAF4
  • Aa3.58:1 Poor#B8FAF4 on #AE6E00

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Somewhere in a Fairytale to Vicious Violet — https://swatchly.xyz/palette/cf91dd-ae6e00-004c47-b8faf4-8a4d9a */
:root {
  --somewhere-in-a-fairytale: #cf91dd;
  --caramel: #ae6e00;
  --tropical-forest: #004c47;
  --ice-citadel: #b8faf4;
  --vicious-violet: #8a4d9a;
}

Tailwind CSS v4

/* Somewhere in a Fairytale to Vicious Violet — https://swatchly.xyz/palette/cf91dd-ae6e00-004c47-b8faf4-8a4d9a */
@theme {
  --color-somewhere-in-a-fairytale: #cf91dd;
  --color-somewhere-in-a-fairytale-50: #fdf6ff;
  --color-somewhere-in-a-fairytale-100: #fbeaff;
  --color-somewhere-in-a-fairytale-200: #f6cfff;
  --color-somewhere-in-a-fairytale-300: #e8b4f3;
  --color-somewhere-in-a-fairytale-400: #cf91dd;
  --color-somewhere-in-a-fairytale-500: #b074bd;
  --color-somewhere-in-a-fairytale-600: #92589f;
  --color-somewhere-in-a-fairytale-700: #764182;
  --color-somewhere-in-a-fairytale-800: #5e2f68;
  --color-somewhere-in-a-fairytale-900: #492152;
  --color-somewhere-in-a-fairytale-950: #2e1134;
  --color-caramel: #ae6e00;
  --color-caramel-50: #fff1e2;
  --color-caramel-100: #ffe3c4;
  --color-caramel-200: #fdc88b;
  --color-caramel-300: #eaae67;
  --color-caramel-400: #cc8b37;
  --color-caramel-500: #ae6e00;
  --color-caramel-600: #8d5800;
  --color-caramel-700: #714500;
  --color-caramel-800: #593600;
  --color-caramel-900: #462900;
  --color-caramel-950: #2d1900;
  --color-tropical-forest: #004c47;
  --color-tropical-forest-50: #dbfef9;
  --color-tropical-forest-100: #cef5f0;
  --color-tropical-forest-200: #b4e2dd;
  --color-tropical-forest-300: #98cdc7;
  --color-tropical-forest-400: #72aea8;
  --color-tropical-forest-500: #54928c;
  --color-tropical-forest-600: #3a7771;
  --color-tropical-forest-700: #265f5a;
  --color-tropical-forest-800: #004c47;
  --color-tropical-forest-900: #0d3a36;
  --color-tropical-forest-950: #042421;
  --color-ice-citadel: #b8faf4;
  --color-ice-citadel-50: #dafdfa;
  --color-ice-citadel-100: #b8faf4;
  --color-ice-citadel-200: #b3e2de;
  --color-ice-citadel-300: #97cdc8;
  --color-ice-citadel-400: #72afa9;
  --color-ice-citadel-500: #54938e;
  --color-ice-citadel-600: #397873;
  --color-ice-citadel-700: #25605c;
  --color-ice-citadel-800: #164c48;
  --color-ice-citadel-900: #0c3b38;
  --color-ice-citadel-950: #042523;
  --color-vicious-violet: #8a4d9a;
  --color-vicious-violet-50: #fcf1ff;
  --color-vicious-violet-100: #f9e2ff;
  --color-vicious-violet-200: #f2c3ff;
  --color-vicious-violet-300: #e0a8ef;
  --color-vicious-violet-400: #c285d3;
  --color-vicious-violet-500: #a668b7;
  --color-vicious-violet-600: #8a4d9a;
  --color-vicious-violet-700: #70397e;
  --color-vicious-violet-800: #592a66;
  --color-vicious-violet-900: #461e51;
  --color-vicious-violet-950: #2d1035;
}

Similar palettes