Start generating

Chocolate Fantasies to Bath Water color palette

5D3500Chocolate FantasiesA0415EVelvet Wine568BBBSea Salt Rivers21C2C5Sea Serpent8DEBEFBath Water
Open in generator Export PNG, PDF, ASE…

About this palette

Chocolate Fantasies to Bath Water is a 5-color cool palette: #5D3500 (Chocolate Fantasies), #A0415E (Velvet Wine), #568BBB (Sea Salt Rivers), #21C2C5 (Sea Serpent), #8DEBEF (Bath Water). It mixes brown, red, blue, turquoise tones and feels cool overall. The strongest text pairing is #5D3500 on #8DEBEF with a contrast ratio of 7.73:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Chocolate Fantasiesrgb(93, 53, 0)hsl(34, 100%, 18%)
Velvet Winergb(160, 65, 94)hsl(342, 42%, 44%)
Sea Salt Riversrgb(86, 139, 187)hsl(209, 43%, 54%)
Sea Serpentrgb(33, 194, 197)hsl(181, 71%, 45%)
Bath Waterrgb(141, 235, 239)hsl(182, 75%, 75%)

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.73:1 Very good#5D3500 on #8DEBEF
  • Aa7.73:1 Very good#8DEBEF on #5D3500
  • Aa4.86:1 Good#5D3500 on #21C2C5
  • Aa4.86:1 Good#21C2C5 on #5D3500
  • Aa4.47:1 Poor#A0415E on #8DEBEF
  • Aa4.47:1 Poor#8DEBEF on #A0415E

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Chocolate Fantasies to Bath Water — https://swatchly.xyz/palette/5d3500-a0415e-568bbb-21c2c5-8debef */
:root {
  --chocolate-fantasies: #5d3500;
  --velvet-wine: #a0415e;
  --sea-salt-rivers: #568bbb;
  --sea-serpent: #21c2c5;
  --bath-water: #8debef;
}

Tailwind CSS v4

/* Chocolate Fantasies to Bath Water — https://swatchly.xyz/palette/5d3500-a0415e-568bbb-21c2c5-8debef */
@theme {
  --color-chocolate-fantasies: #5d3500;
  --color-chocolate-fantasies-50: #fff3e7;
  --color-chocolate-fantasies-100: #ffe6cf;
  --color-chocolate-fantasies-200: #f4d0ae;
  --color-chocolate-fantasies-300: #e1b890;
  --color-chocolate-fantasies-400: #c3976b;
  --color-chocolate-fantasies-500: #a77a4d;
  --color-chocolate-fantasies-600: #8a6034;
  --color-chocolate-fantasies-700: #704a21;
  --color-chocolate-fantasies-800: #5d3500;
  --color-chocolate-fantasies-900: #452a0a;
  --color-chocolate-fantasies-950: #2c1904;
  --color-velvet-wine: #a0415e;
  --color-velvet-wine-50: #fff1f4;
  --color-velvet-wine-100: #ffe1e7;
  --color-velvet-wine-200: #ffc2d0;
  --color-velvet-wine-300: #fb9fb6;
  --color-velvet-wine-400: #dd7b95;
  --color-velvet-wine-500: #bf5d79;
  --color-velvet-wine-600: #a0415e;
  --color-velvet-wine-700: #832f4a;
  --color-velvet-wine-800: #6a2139;
  --color-velvet-wine-900: #54162b;
  --color-velvet-wine-950: #370b1a;
  --color-sea-salt-rivers: #568bbb;
  --color-sea-salt-rivers-50: #edf6ff;
  --color-sea-salt-rivers-100: #dceeff;
  --color-sea-salt-rivers-200: #b7dcff;
  --color-sea-salt-rivers-300: #98c6f2;
  --color-sea-salt-rivers-400: #73a7d6;
  --color-sea-salt-rivers-500: #568bbb;
  --color-sea-salt-rivers-600: #3d709e;
  --color-sea-salt-rivers-700: #295982;
  --color-sea-salt-rivers-800: #1b4569;
  --color-sea-salt-rivers-900: #103554;
  --color-sea-salt-rivers-950: #062137;
  --color-sea-serpent: #21c2c5;
  --color-sea-serpent-50: #e4ffff;
  --color-sea-serpent-100: #befeff;
  --color-sea-serpent-200: #98f0f1;
  --color-sea-serpent-300: #72dddf;
  --color-sea-serpent-400: #21c2c5;
  --color-sea-serpent-500: #00a2a5;
  --color-sea-serpent-600: #008284;
  --color-sea-serpent-700: #006769;
  --color-sea-serpent-800: #005051;
  --color-sea-serpent-900: #003d3e;
  --color-sea-serpent-950: #002526;
  --color-bath-water: #8debef;
  --color-bath-water-50: #dbfeff;
  --color-bath-water-100: #c2f8fa;
  --color-bath-water-200: #8debef;
  --color-bath-water-300: #84d1d4;
  --color-bath-water-400: #59b3b7;
  --color-bath-water-500: #34979b;
  --color-bath-water-600: #0a7b7f;
  --color-bath-water-700: #006266;
  --color-bath-water-800: #004d4f;
  --color-bath-water-900: #003b3d;
  --color-bath-water-950: #002527;
}

Similar palettes