Bubbles to Anthracite Color Palette

About this palette

Bubbles to Anthracite is a 5-color muted, gradient palette: #E5FFFB (Bubbles), #D2C4AF (Pistachio Shell), #907FA4 (Amorous), #554635 (Olive Leaf), #2D252F (Anthracite). It mixes white, gray, purple tones and feels cool overall. The strongest text pairing is #E5FFFB on #2D252F with a contrast ratio of 14.13:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bubbles	rgb(229, 255, 251)	hsl(171, 100%, 95%)
Pistachio Shell	rgb(210, 196, 175)	hsl(36, 28%, 75%)
Amorous	rgb(144, 127, 164)	hsl(268, 17%, 57%)
Olive Leaf	rgb(85, 70, 53)	hsl(32, 23%, 27%)
Anthracite	rgb(45, 37, 47)	hsl(288, 12%, 16%)

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.

Aa14.13:1 Super#E5FFFB on #2D252F
Aa14.13:1 Super#2D252F on #E5FFFB
Aa8.66:1 Very good#E5FFFB on #554635
Aa8.66:1 Very good#554635 on #E5FFFB
Aa8.65:1 Very good#D2C4AF on #2D252F
Aa8.65:1 Very good#2D252F on #D2C4AF
Aa5.30:1 Good#D2C4AF on #554635
Aa5.30:1 Good#554635 on #D2C4AF

Color blindness preview

CSS variables

/* Bubbles to Anthracite — https://swatchly.xyz/palette/e5fffb-d2c4af-907fa4-554635-2d252f */
:root {
  --bubbles: #e5fffb;
  --pistachio-shell: #d2c4af;
  --amorous: #907fa4;
  --olive-leaf: #554635;
  --anthracite: #2d252f;
}

Tailwind CSS v4

/* Bubbles to Anthracite — https://swatchly.xyz/palette/e5fffb-d2c4af-907fa4-554635-2d252f */
@theme {
  --color-bubbles: #e5fffb;
  --color-bubbles-50: #e5fffb;
  --color-bubbles-100: #e2f2ef;
  --color-bubbles-200: #ccdedb;
  --color-bubbles-300: #b3c8c4;
  --color-bubbles-400: #91a8a5;
  --color-bubbles-500: #758c89;
  --color-bubbles-600: #5b716e;
  --color-bubbles-700: #465a57;
  --color-bubbles-800: #354744;
  --color-bubbles-900: #273634;
  --color-bubbles-950: #172220;
  --color-pistachio-shell: #d2c4af;
  --color-pistachio-shell-50: #fef7eb;
  --color-pistachio-shell-100: #f6ede1;
  --color-pistachio-shell-200: #e5dacb;
  --color-pistachio-shell-300: #d2c4af;
  --color-pistachio-shell-400: #b1a490;
  --color-pistachio-shell-500: #948774;
  --color-pistachio-shell-600: #796c59;
  --color-pistachio-shell-700: #605544;
  --color-pistachio-shell-800: #4b4133;
  --color-pistachio-shell-900: #3a3125;
  --color-pistachio-shell-950: #241e15;
  --color-amorous: #907fa4;
  --color-amorous-50: #f8f3ff;
  --color-amorous-100: #f1e6ff;
  --color-amorous-200: #dfd2ef;
  --color-amorous-300: #c9badc;
  --color-amorous-400: #ab9abf;
  --color-amorous-500: #907fa4;
  --color-amorous-600: #756588;
  --color-amorous-700: #5d4f6e;
  --color-amorous-800: #493c58;
  --color-amorous-900: #392e45;
  --color-amorous-950: #231b2c;
  --color-olive-leaf: #554635;
  --color-olive-leaf-50: #fef3e8;
  --color-olive-leaf-100: #f5e9dd;
  --color-olive-leaf-200: #e3d5c6;
  --color-olive-leaf-300: #cfbfaf;
  --color-olive-leaf-400: #b2a18f;
  --color-olive-leaf-500: #978774;
  --color-olive-leaf-600: #7e6e5c;
  --color-olive-leaf-700: #675848;
  --color-olive-leaf-800: #554635;
  --color-olive-leaf-900: #413629;
  --color-olive-leaf-950: #2a2218;
  --color-anthracite: #2d252f;
  --color-anthracite-50: #f9f3fa;
  --color-anthracite-100: #efe8f1;
  --color-anthracite-200: #dcd4de;
  --color-anthracite-300: #c6bdc8;
  --color-anthracite-400: #a79eaa;
  --color-anthracite-500: #8e8490;
  --color-anthracite-600: #756c77;
  --color-anthracite-700: #605762;
  --color-anthracite-800: #4e4650;
  --color-anthracite-900: #3f3841;
  --color-anthracite-950: #2d252f;
}