Corfu Waters to Hammam Blue Color Palette

About this palette

Corfu Waters to Hammam Blue is a 5-color cool palette: #0087A6 (Corfu Waters), #E7FFF5 (Snow White), #002F2C (Pitch-Black Forests), #006641 (Jewel), #4FD7D8 (Hammam Blue). It mixes blue, white, turquoise, green tones and feels cool overall. The strongest text pairing is #E7FFF5 on #002F2C with a contrast ratio of 13.87:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Corfu Waters	rgb(0, 135, 166)	hsl(191, 100%, 33%)
Snow White	rgb(231, 255, 245)	hsl(155, 100%, 95%)
Pitch-Black Forests	rgb(0, 47, 44)	hsl(176, 100%, 9%)
Jewel	rgb(0, 102, 65)	hsl(158, 100%, 20%)
Hammam Blue	rgb(79, 215, 216)	hsl(180, 64%, 58%)

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.87:1 Super#E7FFF5 on #002F2C
Aa13.87:1 Super#002F2C on #E7FFF5
Aa8.35:1 Very good#002F2C on #4FD7D8
Aa8.35:1 Very good#4FD7D8 on #002F2C
Aa6.73:1 Good#E7FFF5 on #006641
Aa6.73:1 Good#006641 on #E7FFF5
Aa4.05:1 Poor#006641 on #4FD7D8
Aa4.05:1 Poor#4FD7D8 on #006641

Color blindness preview

CSS variables

/* Corfu Waters to Hammam Blue — https://swatchly.xyz/palette/0087a6-e7fff5-002f2c-006641-4fd7d8 */
:root {
  --corfu-waters: #0087a6;
  --snow-white: #e7fff5;
  --pitch-black-forests: #002f2c;
  --jewel: #006641;
  --hammam-blue: #4fd7d8;
}

Tailwind CSS v4

/* Corfu Waters to Hammam Blue — https://swatchly.xyz/palette/0087a6-e7fff5-002f2c-006641-4fd7d8 */
@theme {
  --color-corfu-waters: #0087a6;
  --color-corfu-waters-50: #e1f7ff;
  --color-corfu-waters-100: #c2efff;
  --color-corfu-waters-200: #92def7;
  --color-corfu-waters-300: #6dc6e3;
  --color-corfu-waters-400: #3ca5c4;
  --color-corfu-waters-500: #0087a6;
  --color-corfu-waters-600: #006d86;
  --color-corfu-waters-700: #00576c;
  --color-corfu-waters-800: #004455;
  --color-corfu-waters-900: #003543;
  --color-corfu-waters-950: #00222c;
  --color-snow-white: #e7fff5;
  --color-snow-white-50: #e7fff5;
  --color-snow-white-100: #e4f2ec;
  --color-snow-white-200: #cdded7;
  --color-snow-white-300: #b4c8c0;
  --color-snow-white-400: #93a89f;
  --color-snow-white-500: #778c84;
  --color-snow-white-600: #5d7169;
  --color-snow-white-700: #475a53;
  --color-snow-white-800: #364740;
  --color-snow-white-900: #283631;
  --color-snow-white-950: #18221e;
  --color-pitch-black-forests: #002f2c;
  --color-pitch-black-forests-50: #e2fbf8;
  --color-pitch-black-forests-100: #d6f2ef;
  --color-pitch-black-forests-200: #bee0dc;
  --color-pitch-black-forests-300: #a4cac6;
  --color-pitch-black-forests-400: #81aba7;
  --color-pitch-black-forests-500: #66928d;
  --color-pitch-black-forests-600: #4e7874;
  --color-pitch-black-forests-700: #3b625f;
  --color-pitch-black-forests-800: #2c504d;
  --color-pitch-black-forests-900: #21413e;
  --color-pitch-black-forests-950: #002f2c;
  --color-jewel: #006641;
  --color-jewel-50: #ddffeb;
  --color-jewel-100: #c8f9dd;
  --color-jewel-200: #ace7c6;
  --color-jewel-300: #8ed3ae;
  --color-jewel-400: #67b48c;
  --color-jewel-500: #479971;
  --color-jewel-600: #2a7d57;
  --color-jewel-700: #006641;
  --color-jewel-800: #015032;
  --color-jewel-900: #003e26;
  --color-jewel-950: #002716;
  --color-hammam-blue: #4fd7d8;
  --color-hammam-blue-50: #d2ffff;
  --color-hammam-blue-100: #b1fafa;
  --color-hammam-blue-200: #8fe9e9;
  --color-hammam-blue-300: #4fd7d8;
  --color-hammam-blue-400: #2cb6b7;
  --color-hammam-blue-500: #00999a;
  --color-hammam-blue-600: #007b7c;
  --color-hammam-blue-700: #006263;
  --color-hammam-blue-800: #004d4d;
  --color-hammam-blue-900: #003b3c;
  --color-hammam-blue-950: #002526;
}