Oceanic Noir to Veiling Waterfalls color palette

022B3COceanic Noir 0087AECorfu Waters 5BD2F7Thor’s Thunder 005C73Deep Lagoon CEEEFFVeiling Waterfalls

Open in generator Export PNG, PDF, ASE…

About this palette

Oceanic Noir to Veiling Waterfalls is a 5-color cool, monochromatic palette: #022B3C (Oceanic Noir), #0087AE (Corfu Waters), #5BD2F7 (Thor’s Thunder), #005C73 (Deep Lagoon), #CEEEFF (Veiling Waterfalls). It mixes blue tones and feels cool overall. The strongest text pairing is #022B3C on #CEEEFF with a contrast ratio of 12.24:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oceanic Noir	rgb(2, 43, 60)	hsl(198, 94%, 12%)
Corfu Waters	rgb(0, 135, 174)	hsl(193, 100%, 34%)
Thor’s Thunder	rgb(91, 210, 247)	hsl(194, 91%, 66%)
Deep Lagoon	rgb(0, 92, 115)	hsl(192, 100%, 23%)
Veiling Waterfalls	rgb(206, 238, 255)	hsl(201, 100%, 90%)

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.

Aa12.24:1 Super#022B3C on #CEEEFF
Aa12.24:1 Super#CEEEFF on #022B3C
Aa8.49:1 Very good#022B3C on #5BD2F7
Aa8.49:1 Very good#5BD2F7 on #022B3C
Aa6.23:1 Good#005C73 on #CEEEFF
Aa6.23:1 Good#CEEEFF on #005C73
Aa4.32:1 Poor#5BD2F7 on #005C73
Aa4.32:1 Poor#005C73 on #5BD2F7

Color blindness preview

CSS variables

/* Oceanic Noir to Veiling Waterfalls — https://swatchly.xyz/palette/022b3c-0087ae-5bd2f7-005c73-ceeeff */
:root {
  --oceanic-noir: #022b3c;
  --corfu-waters: #0087ae;
  --thor-s-thunder: #5bd2f7;
  --deep-lagoon: #005c73;
  --veiling-waterfalls: #ceeeff;
}

Tailwind CSS v4

/* Oceanic Noir to Veiling Waterfalls — https://swatchly.xyz/palette/022b3c-0087ae-5bd2f7-005c73-ceeeff */
@theme {
  --color-oceanic-noir: #022b3c;
  --color-oceanic-noir-50: #eaf8ff;
  --color-oceanic-noir-100: #d6f0fe;
  --color-oceanic-noir-200: #bedded;
  --color-oceanic-noir-300: #a4c7d9;
  --color-oceanic-noir-400: #82a8bc;
  --color-oceanic-noir-500: #678ea2;
  --color-oceanic-noir-600: #4f7588;
  --color-oceanic-noir-700: #3c5f71;
  --color-oceanic-noir-800: #2d4d5d;
  --color-oceanic-noir-900: #223e4c;
  --color-oceanic-noir-950: #022b3c;
  --color-corfu-waters: #0087ae;
  --color-corfu-waters-50: #e4f7ff;
  --color-corfu-waters-100: #c8eeff;
  --color-corfu-waters-200: #92ddfe;
  --color-corfu-waters-300: #6dc6ea;
  --color-corfu-waters-400: #3ca5cc;
  --color-corfu-waters-500: #0087ae;
  --color-corfu-waters-600: #006d8d;
  --color-corfu-waters-700: #005671;
  --color-corfu-waters-800: #00445a;
  --color-corfu-waters-900: #003547;
  --color-corfu-waters-950: #00222e;
  --color-thor-s-thunder: #5bd2f7;
  --color-thor-s-thunder-50: #e7f9ff;
  --color-thor-s-thunder-100: #cff2ff;
  --color-thor-s-thunder-200: #98e5ff;
  --color-thor-s-thunder-300: #5bd2f7;
  --color-thor-s-thunder-400: #3cb1d4;
  --color-thor-s-thunder-500: #0095b7;
  --color-thor-s-thunder-600: #007894;
  --color-thor-s-thunder-700: #005f76;
  --color-thor-s-thunder-800: #004a5d;
  --color-thor-s-thunder-900: #003948;
  --color-thor-s-thunder-950: #00242e;
  --color-deep-lagoon: #005c73;
  --color-deep-lagoon-50: #e7f9ff;
  --color-deep-lagoon-100: #cff2ff;
  --color-deep-lagoon-200: #ace1f4;
  --color-deep-lagoon-300: #8dcbe1;
  --color-deep-lagoon-400: #66abc4;
  --color-deep-lagoon-500: #468fa8;
  --color-deep-lagoon-600: #2a748b;
  --color-deep-lagoon-700: #005c73;
  --color-deep-lagoon-800: #03485a;
  --color-deep-lagoon-900: #003746;
  --color-deep-lagoon-950: #00222d;
  --color-veiling-waterfalls: #ceeeff;
  --color-veiling-waterfalls-50: #e5f6ff;
  --color-veiling-waterfalls-100: #ceeeff;
  --color-veiling-waterfalls-200: #c2d9e6;
  --color-veiling-waterfalls-300: #a9c4d2;
  --color-veiling-waterfalls-400: #88a5b4;
  --color-veiling-waterfalls-500: #6d8a9a;
  --color-veiling-waterfalls-600: #54707f;
  --color-veiling-waterfalls-700: #405967;
  --color-veiling-waterfalls-800: #2f4651;
  --color-veiling-waterfalls-900: #233640;
  --color-veiling-waterfalls-950: #142128;
}