Cane Sugar to Malibu Sun Color Palette

About this palette

Cane Sugar to Malibu Sun is a 4-color pastel, light palette: #E0BB7F (Cane Sugar), #CDD99F (Zombie), #C1DFFA (Broad Daylight), #FFF3D8 (Malibu Sun). It mixes yellow, green, blue, white tones and feels balanced overall. The strongest text pairing is #E0BB7F on #FFF3D8 with a contrast ratio of 1.65:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cane Sugar	rgb(224, 187, 127)	hsl(37, 61%, 69%)
Zombie	rgb(205, 217, 159)	hsl(72, 43%, 74%)
Broad Daylight	rgb(193, 223, 250)	hsl(208, 85%, 87%)
Malibu Sun	rgb(255, 243, 216)	hsl(42, 100%, 92%)

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.

Color blindness preview

CSS variables

/* Cane Sugar to Malibu Sun — https://swatchly.xyz/palette/e0bb7f-cdd99f-c1dffa-fff3d8 */
:root {
  --cane-sugar: #e0bb7f;
  --zombie: #cdd99f;
  --broad-daylight: #c1dffa;
  --malibu-sun: #fff3d8;
}

Tailwind CSS v4

/* Cane Sugar to Malibu Sun — https://swatchly.xyz/palette/e0bb7f-cdd99f-c1dffa-fff3d8 */
@theme {
  --color-cane-sugar: #e0bb7f;
  --color-cane-sugar-50: #fff4e2;
  --color-cane-sugar-100: #ffe8c4;
  --color-cane-sugar-200: #efd3a8;
  --color-cane-sugar-300: #e0bb7f;
  --color-cane-sugar-400: #be9c63;
  --color-cane-sugar-500: #a38045;
  --color-cane-sugar-600: #87662b;
  --color-cane-sugar-700: #6d4f17;
  --color-cane-sugar-800: #573d08;
  --color-cane-sugar-900: #442e01;
  --color-cane-sugar-950: #2c1c00;
  --color-zombie: #cdd99f;
  --color-zombie-50: #eef6d4;
  --color-zombie-100: #e3ebc6;
  --color-zombie-200: #cdd99f;
  --color-zombie-300: #b8c291;
  --color-zombie-400: #9aa46e;
  --color-zombie-500: #7f8a53;
  --color-zombie-600: #66703b;
  --color-zombie-700: #515a29;
  --color-zombie-800: #40471b;
  --color-zombie-900: #303711;
  --color-zombie-950: #1e2207;
  --color-broad-daylight: #c1dffa;
  --color-broad-daylight-50: #f1f8ff;
  --color-broad-daylight-100: #e0f0ff;
  --color-broad-daylight-200: #c1dffa;
  --color-broad-daylight-300: #aec7dd;
  --color-broad-daylight-400: #8ca7c0;
  --color-broad-daylight-500: #708ba4;
  --color-broad-daylight-600: #567087;
  --color-broad-daylight-700: #40596e;
  --color-broad-daylight-800: #304557;
  --color-broad-daylight-900: #233544;
  --color-broad-daylight-950: #14212c;
  --color-malibu-sun: #fff3d8;
  --color-malibu-sun-50: #fff3d8;
  --color-malibu-sun-100: #f1ead9;
  --color-malibu-sun-200: #dfd6c2;
  --color-malibu-sun-300: #c9bfa9;
  --color-malibu-sun-400: #aba088;
  --color-malibu-sun-500: #90856d;
  --color-malibu-sun-600: #756b53;
  --color-malibu-sun-700: #5e543f;
  --color-malibu-sun-800: #4a412f;
  --color-malibu-sun-900: #393222;
  --color-malibu-sun-950: #241f13;
}