Blue Ocean to Hawaii Morning Color Palette

About this palette

Blue Ocean to Hawaii Morning is a 5-color vibrant, cool palette: #009CBD (Blue Ocean), #7980F5 (Orchid), #FF9EF3 (Pink Elephants), #926300 (Embarrassed Frog), #12B7FF (Hawaii Morning). It mixes blue, purple, pink, brown tones and feels cool overall. The strongest text pairing is #FF9EF3 on #926300 with a contrast ratio of 2.85:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blue Ocean	rgb(0, 156, 189)	hsl(190, 100%, 37%)
Orchid	rgb(121, 128, 245)	hsl(237, 86%, 72%)
Pink Elephants	rgb(255, 158, 243)	hsl(307, 100%, 81%)
Embarrassed Frog	rgb(146, 99, 0)	hsl(41, 100%, 29%)
Hawaii Morning	rgb(18, 183, 255)	hsl(198, 100%, 54%)

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

/* Blue Ocean to Hawaii Morning — https://swatchly.xyz/palette/009cbd-7980f5-ff9ef3-926300-12b7ff */
:root {
  --blue-ocean: #009cbd;
  --orchid: #7980f5;
  --pink-elephants: #ff9ef3;
  --embarrassed-frog: #926300;
  --hawaii-morning: #12b7ff;
}

Tailwind CSS v4

/* Blue Ocean to Hawaii Morning — https://swatchly.xyz/palette/009cbd-7980f5-ff9ef3-926300-12b7ff */
@theme {
  --color-blue-ocean: #009cbd;
  --color-blue-ocean-50: #e9faff;
  --color-blue-ocean-100: #d3f4ff;
  --color-blue-ocean-200: #9fe8ff;
  --color-blue-ocean-300: #77d4f1;
  --color-blue-ocean-400: #45b7d7;
  --color-blue-ocean-500: #009cbd;
  --color-blue-ocean-600: #007e99;
  --color-blue-ocean-700: #00647a;
  --color-blue-ocean-800: #004e5f;
  --color-blue-ocean-900: #003b4a;
  --color-blue-ocean-950: #00252f;
  --color-orchid: #7980f5;
  --color-orchid-50: #f5f6ff;
  --color-orchid-100: #eaedff;
  --color-orchid-200: #d4daff;
  --color-orchid-300: #bac3ff;
  --color-orchid-400: #959fff;
  --color-orchid-500: #7980f5;
  --color-orchid-600: #5f63d4;
  --color-orchid-700: #494ab3;
  --color-orchid-800: #383693;
  --color-orchid-900: #2a2776;
  --color-orchid-950: #18164e;
  --color-pink-elephants: #ff9ef3;
  --color-pink-elephants-50: #fff3fd;
  --color-pink-elephants-100: #ffe5fb;
  --color-pink-elephants-200: #ffc6f7;
  --color-pink-elephants-300: #ff9ef3;
  --color-pink-elephants-400: #da80cf;
  --color-pink-elephants-500: #bd61b3;
  --color-pink-elephants-600: #9e4695;
  --color-pink-elephants-700: #82317a;
  --color-pink-elephants-800: #682062;
  --color-pink-elephants-900: #52154d;
  --color-pink-elephants-950: #350932;
  --color-embarrassed-frog: #926300;
  --color-embarrassed-frog-50: #fff3e3;
  --color-embarrassed-frog-100: #ffe8c7;
  --color-embarrassed-frog-200: #f8d19a;
  --color-embarrassed-frog-300: #e5ba7a;
  --color-embarrassed-frog-400: #c99950;
  --color-embarrassed-frog-500: #ae7d2d;
  --color-embarrassed-frog-600: #926300;
  --color-embarrassed-frog-700: #744e00;
  --color-embarrassed-frog-800: #5c3c00;
  --color-embarrassed-frog-900: #472e00;
  --color-embarrassed-frog-950: #2d1c00;
  --color-hawaii-morning: #12b7ff;
  --color-hawaii-morning-50: #f1faff;
  --color-hawaii-morning-100: #e0f3ff;
  --color-hawaii-morning-200: #bae4ff;
  --color-hawaii-morning-300: #89d2ff;
  --color-hawaii-morning-400: #12b7ff;
  --color-hawaii-morning-500: #0098d6;
  --color-hawaii-morning-600: #007aad;
  --color-hawaii-morning-700: #006089;
  --color-hawaii-morning-800: #004b6c;
  --color-hawaii-morning-900: #003953;
  --color-hawaii-morning-950: #002235;
}