Corfu Waters to Wasabi Nori color palette

About this palette

Corfu Waters to Wasabi Nori is a 5-color cool, vintage palette: #008BB3 (Corfu Waters), #BAE8FE (Breaking the Ice), #BEA3FD (Diva), #7B5030 (Chocolate Bells), #373800 (Wasabi Nori). It mixes blue, purple, brown tones and feels cool overall. The strongest text pairing is #BAE8FE on #373800 with a contrast ratio of 9.29:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Corfu Watersrgb(0, 139, 179)hsl(193, 100%, 35%)
Breaking the Icergb(186, 232, 254)hsl(199, 97%, 86%)
Divargb(190, 163, 253)hsl(258, 96%, 82%)
Chocolate Bellsrgb(123, 80, 48)hsl(26, 44%, 34%)
Wasabi Norirgb(55, 56, 0)hsl(61, 100%, 11%)

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.

  • Aa9.29:1 Very good#BAE8FE on #373800
  • Aa9.29:1 Very good#373800 on #BAE8FE
  • Aa5.70:1 Good#BEA3FD on #373800
  • Aa5.70:1 Good#373800 on #BEA3FD
  • Aa5.30:1 Good#BAE8FE on #7B5030
  • Aa5.30:1 Good#7B5030 on #BAE8FE
  • Aa3.25:1 Poor#BEA3FD on #7B5030
  • Aa3.25:1 Poor#7B5030 on #BEA3FD

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Corfu Waters to Wasabi Nori — https://swatchly.xyz/palette/008bb3-bae8fe-bea3fd-7b5030-373800 */
:root {
  --corfu-waters: #008bb3;
  --breaking-the-ice: #bae8fe;
  --diva: #bea3fd;
  --chocolate-bells: #7b5030;
  --wasabi-nori: #373800;
}

Tailwind CSS v4

/* Corfu Waters to Wasabi Nori — https://swatchly.xyz/palette/008bb3-bae8fe-bea3fd-7b5030-373800 */
@theme {
  --color-corfu-waters: #008bb3;
  --color-corfu-waters-50: #e6f7ff;
  --color-corfu-waters-100: #cbefff;
  --color-corfu-waters-200: #95dfff;
  --color-corfu-waters-300: #6fc9ee;
  --color-corfu-waters-400: #3ea8d0;
  --color-corfu-waters-500: #008bb3;
  --color-corfu-waters-600: #007091;
  --color-corfu-waters-700: #005974;
  --color-corfu-waters-800: #00465c;
  --color-corfu-waters-900: #003648;
  --color-corfu-waters-950: #00222f;
  --color-breaking-the-ice: #bae8fe;
  --color-breaking-the-ice-50: #f6fcff;
  --color-breaking-the-ice-100: #e3f6ff;
  --color-breaking-the-ice-200: #bae8fe;
  --color-breaking-the-ice-300: #aacee0;
  --color-breaking-the-ice-400: #84aec2;
  --color-breaking-the-ice-500: #6691a5;
  --color-breaking-the-ice-600: #4b7588;
  --color-breaking-the-ice-700: #365c6e;
  --color-breaking-the-ice-800: #254756;
  --color-breaking-the-ice-900: #1a3744;
  --color-breaking-the-ice-950: #0d222b;
  --color-diva: #bea3fd;
  --color-diva-50: #f0ecff;
  --color-diva-100: #e6ddff;
  --color-diva-200: #d3c2ff;
  --color-diva-300: #bea3fd;
  --color-diva-400: #a186dc;
  --color-diva-500: #886cc1;
  --color-diva-600: #6f54a5;
  --color-diva-700: #5a418a;
  --color-diva-800: #483171;
  --color-diva-900: #39255d;
  --color-diva-950: #24153d;
  --color-chocolate-bells: #7b5030;
  --color-chocolate-bells-50: #fff2ea;
  --color-chocolate-bells-100: #ffe6d4;
  --color-chocolate-bells-200: #f6d0b7;
  --color-chocolate-bells-300: #e4ba9d;
  --color-chocolate-bells-400: #c89a7a;
  --color-chocolate-bells-500: #ad7f5e;
  --color-chocolate-bells-600: #926646;
  --color-chocolate-bells-700: #7b5030;
  --color-chocolate-bells-800: #613e23;
  --color-chocolate-bells-900: #4d2e17;
  --color-chocolate-bells-950: #321c0b;
  --color-wasabi-nori: #373800;
  --color-wasabi-nori-50: #f6f8da;
  --color-wasabi-nori-100: #ecefcd;
  --color-wasabi-nori-200: #d8dbb3;
  --color-wasabi-nori-300: #c2c597;
  --color-wasabi-nori-400: #a3a674;
  --color-wasabi-nori-500: #898b58;
  --color-wasabi-nori-600: #6f713f;
  --color-wasabi-nori-700: #585a2c;
  --color-wasabi-nori-800: #46471e;
  --color-wasabi-nori-900: #373800;
  --color-wasabi-nori-950: #222308;
}

Similar palettes