Start generating

Black Sabbath to Shallow Water color palette

280522Black Sabbath564900Very Coffee007C97Pacific PleasureE06AA9Fugitive FlamingoDDC452Duck Butter87EDFFShallow Water
Open in generator Export PNG, PDF, ASE…

About this palette

Black Sabbath to Shallow Water is a 6-color warm palette: #280522 (Black Sabbath), #564900 (Very Coffee), #007C97 (Pacific Pleasure), #E06AA9 (Fugitive Flamingo), #DDC452 (Duck Butter), #87EDFF (Shallow Water). It mixes purple, brown, blue, pink, yellow, turquoise tones and feels warm overall. The strongest text pairing is #280522 on #87EDFF with a contrast ratio of 13.73:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Black Sabbathrgb(40, 5, 34)hsl(310, 78%, 9%)
Very Coffeergb(86, 73, 0)hsl(51, 100%, 17%)
Pacific Pleasurergb(0, 124, 151)hsl(191, 100%, 30%)
Fugitive Flamingorgb(224, 106, 169)hsl(328, 66%, 65%)
Duck Butterrgb(221, 196, 82)hsl(49, 67%, 59%)
Shallow Waterrgb(135, 237, 255)hsl(189, 100%, 76%)

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.

  • Aa13.73:1 Super#280522 on #87EDFF
  • Aa13.73:1 Super#87EDFF on #280522
  • Aa10.65:1 Very good#280522 on #DDC452
  • Aa10.65:1 Very good#DDC452 on #280522
  • Aa6.64:1 Good#564900 on #87EDFF
  • Aa6.64:1 Good#87EDFF on #564900
  • Aa5.99:1 Good#280522 on #E06AA9
  • Aa5.99:1 Good#E06AA9 on #280522

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Black Sabbath to Shallow Water — https://swatchly.xyz/palette/280522-564900-007c97-e06aa9-ddc452-87edff */
:root {
  --black-sabbath: #280522;
  --very-coffee: #564900;
  --pacific-pleasure: #007c97;
  --fugitive-flamingo: #e06aa9;
  --duck-butter: #ddc452;
  --shallow-water: #87edff;
}

Tailwind CSS v4

/* Black Sabbath to Shallow Water — https://swatchly.xyz/palette/280522-564900-007c97-e06aa9-ddc452-87edff */
@theme {
  --color-black-sabbath: #280522;
  --color-black-sabbath-50: #fff0fb;
  --color-black-sabbath-100: #ffe1f7;
  --color-black-sabbath-200: #efcbe5;
  --color-black-sabbath-300: #dbb2d1;
  --color-black-sabbath-400: #be91b2;
  --color-black-sabbath-500: #a07495;
  --color-black-sabbath-600: #825878;
  --color-black-sabbath-700: #66425e;
  --color-black-sabbath-800: #4e2f47;
  --color-black-sabbath-900: #392134;
  --color-black-sabbath-950: #280522;
  --color-very-coffee: #564900;
  --color-very-coffee-50: #fdf6d3;
  --color-very-coffee-100: #f4ecc5;
  --color-very-coffee-200: #e2d8aa;
  --color-very-coffee-300: #cfc38e;
  --color-very-coffee-400: #b2a56a;
  --color-very-coffee-500: #988b4d;
  --color-very-coffee-600: #7e7134;
  --color-very-coffee-700: #685b20;
  --color-very-coffee-800: #564900;
  --color-very-coffee-900: #423807;
  --color-very-coffee-950: #2a2301;
  --color-pacific-pleasure: #007c97;
  --color-pacific-pleasure-50: #e7f9ff;
  --color-pacific-pleasure-100: #cff3ff;
  --color-pacific-pleasure-200: #a3e5fa;
  --color-pacific-pleasure-300: #83d0e8;
  --color-pacific-pleasure-400: #58b2cd;
  --color-pacific-pleasure-500: #3397b2;
  --color-pacific-pleasure-600: #007c97;
  --color-pacific-pleasure-700: #006278;
  --color-pacific-pleasure-800: #004d5f;
  --color-pacific-pleasure-900: #003b49;
  --color-pacific-pleasure-950: #00252f;
  --color-fugitive-flamingo: #e06aa9;
  --color-fugitive-flamingo-50: #ffecf5;
  --color-fugitive-flamingo-100: #ffdbeb;
  --color-fugitive-flamingo-200: #ffbadb;
  --color-fugitive-flamingo-300: #fd92c8;
  --color-fugitive-flamingo-400: #e06aa9;
  --color-fugitive-flamingo-500: #c34f8f;
  --color-fugitive-flamingo-600: #a43675;
  --color-fugitive-flamingo-700: #88235e;
  --color-fugitive-flamingo-800: #6f154b;
  --color-fugitive-flamingo-900: #590b3b;
  --color-fugitive-flamingo-950: #3c0426;
  --color-duck-butter: #ddc452;
  --color-duck-butter-50: #fff8d6;
  --color-duck-butter-100: #fdeeaf;
  --color-duck-butter-200: #ecdb8f;
  --color-duck-butter-300: #ddc452;
  --color-duck-butter-400: #bba435;
  --color-duck-butter-500: #9f8700;
  --color-duck-butter-600: #806c00;
  --color-duck-butter-700: #655600;
  --color-duck-butter-800: #4f4200;
  --color-duck-butter-900: #3c3200;
  --color-duck-butter-950: #261f00;
  --color-shallow-water: #87edff;
  --color-shallow-water-50: #e9fcff;
  --color-shallow-water-100: #ccf7ff;
  --color-shallow-water-200: #87edff;
  --color-shallow-water-300: #80d3e1;
  --color-shallow-water-400: #52b4c4;
  --color-shallow-water-500: #2897a8;
  --color-shallow-water-600: #007b8a;
  --color-shallow-water-700: #00616e;
  --color-shallow-water-800: #004c56;
  --color-shallow-water-900: #003a42;
  --color-shallow-water-950: #00242a;
}

Similar palettes