Isle of Dreams to Black Magic Color Palette

About this palette

Isle of Dreams to Black Magic is a 4-color muted palette: #BBCBBE (Isle of Dreams), #829A83 (Parisian Patina), #816B82 (Sakura Night), #4D424C (Black Magic). It mixes gray, green, pink tones and feels cool overall. The strongest text pairing is #BBCBBE on #4D424C with a contrast ratio of 5.64:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Isle of Dreams	rgb(187, 203, 190)	hsl(131, 13%, 76%)
Parisian Patina	rgb(130, 154, 131)	hsl(122, 11%, 56%)
Sakura Night	rgb(129, 107, 130)	hsl(297, 10%, 46%)
Black Magic	rgb(77, 66, 76)	hsl(305, 8%, 28%)

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.

Aa5.64:1 Good#BBCBBE on #4D424C
Aa5.64:1 Good#4D424C on #BBCBBE
Aa3.14:1 Poor#829A83 on #4D424C
Aa3.14:1 Poor#4D424C on #829A83

Color blindness preview

CSS variables

/* Isle of Dreams to Black Magic — https://swatchly.xyz/palette/bbcbbe-829a83-816b82-4d424c */
:root {
  --isle-of-dreams: #bbcbbe;
  --parisian-patina: #829a83;
  --sakura-night: #816b82;
  --black-magic: #4d424c;
}

Tailwind CSS v4

/* Isle of Dreams to Black Magic — https://swatchly.xyz/palette/bbcbbe-829a83-816b82-4d424c */
@theme {
  --color-isle-of-dreams: #bbcbbe;
  --color-isle-of-dreams-50: #f2fbf3;
  --color-isle-of-dreams-100: #e8f2ea;
  --color-isle-of-dreams-200: #d4dfd6;
  --color-isle-of-dreams-300: #bbcbbe;
  --color-isle-of-dreams-400: #9baa9e;
  --color-isle-of-dreams-500: #7f8e82;
  --color-isle-of-dreams-600: #647267;
  --color-isle-of-dreams-700: #4e5b50;
  --color-isle-of-dreams-800: #3b463d;
  --color-isle-of-dreams-900: #2c362e;
  --color-isle-of-dreams-950: #1a211c;
  --color-parisian-patina: #829a83;
  --color-parisian-patina-50: #eefcee;
  --color-parisian-patina-100: #e5f5e6;
  --color-parisian-patina-200: #d2e4d3;
  --color-parisian-patina-300: #bcd0bc;
  --color-parisian-patina-400: #9cb39d;
  --color-parisian-patina-500: #829a83;
  --color-parisian-patina-600: #667d67;
  --color-parisian-patina-700: #4e634f;
  --color-parisian-patina-800: #3b4d3c;
  --color-parisian-patina-900: #2b3b2c;
  --color-parisian-patina-950: #19241a;
  --color-sakura-night: #816b82;
  --color-sakura-night-50: #fef0fe;
  --color-sakura-night-100: #f6e7f7;
  --color-sakura-night-200: #e6d4e6;
  --color-sakura-night-300: #d2bed3;
  --color-sakura-night-400: #b59fb6;
  --color-sakura-night-500: #9b849c;
  --color-sakura-night-600: #816b82;
  --color-sakura-night-700: #685469;
  --color-sakura-night-800: #524053;
  --color-sakura-night-900: #3f3040;
  --color-sakura-night-950: #281d28;
  --color-black-magic: #4d424c;
  --color-black-magic-50: #faf2f9;
  --color-black-magic-100: #f1e8f0;
  --color-black-magic-200: #ded4dd;
  --color-black-magic-300: #c9bec8;
  --color-black-magic-400: #ab9eaa;
  --color-black-magic-500: #90848f;
  --color-black-magic-600: #766a75;
  --color-black-magic-700: #5f555e;
  --color-black-magic-800: #4d424c;
  --color-black-magic-900: #3b333a;
  --color-black-magic-950: #251f25;
}