Water to Oceanic Noir color palette

D5EFFFWater 7DADCCWindfall 007AB4Brilliant Blue 0E5A84Whale’s Tale 072A3COceanic Noir

About this palette

Water to Oceanic Noir is a 5-color cool, monochromatic, gradient palette: #D5EFFF (Water), #7DADCC (Windfall), #007AB4 (Brilliant Blue), #0E5A84 (Whale’s Tale), #072A3C (Oceanic Noir). It mixes white, blue tones and feels cool overall. The strongest text pairing is #D5EFFF on #072A3C with a contrast ratio of 12.54:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Water	rgb(213, 239, 255)	hsl(203, 100%, 92%)
Windfall	rgb(125, 173, 204)	hsl(204, 44%, 65%)
Brilliant Blue	rgb(0, 122, 180)	hsl(199, 100%, 35%)
Whale’s Tale	rgb(14, 90, 132)	hsl(201, 81%, 29%)
Oceanic Noir	rgb(7, 42, 60)	hsl(200, 79%, 13%)

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.54:1 Super#D5EFFF on #072A3C
Aa12.54:1 Super#072A3C on #D5EFFF
Aa6.26:1 Good#D5EFFF on #0E5A84
Aa6.26:1 Good#0E5A84 on #D5EFFF
Aa6.21:1 Good#7DADCC on #072A3C
Aa6.21:1 Good#072A3C on #7DADCC
Aa3.97:1 Poor#D5EFFF on #007AB4
Aa3.97:1 Poor#007AB4 on #D5EFFF

Color blindness preview

CSS variables

/* Water to Oceanic Noir — https://swatchly.xyz/palette/d5efff-7dadcc-007ab4-0e5a84-072a3c */
:root {
  --water: #d5efff;
  --windfall: #7dadcc;
  --brilliant-blue: #007ab4;
  --whale-s-tale: #0e5a84;
  --oceanic-noir: #072a3c;
}

Tailwind CSS v4

/* Water to Oceanic Noir — https://swatchly.xyz/palette/d5efff-7dadcc-007ab4-0e5a84-072a3c */
@theme {
  --color-water: #d5efff;
  --color-water-50: #eaf7ff;
  --color-water-100: #d5efff;
  --color-water-200: #c7dae6;
  --color-water-300: #afc4d1;
  --color-water-400: #8ea5b3;
  --color-water-500: #728a98;
  --color-water-600: #596f7d;
  --color-water-700: #445965;
  --color-water-800: #334550;
  --color-water-900: #26353e;
  --color-water-950: #162127;
  --color-windfall: #7dadcc;
  --color-windfall-50: #eff8ff;
  --color-windfall-100: #dcf1ff;
  --color-windfall-200: #bde0f8;
  --color-windfall-300: #a3cbe6;
  --color-windfall-400: #7dadcc;
  --color-windfall-500: #6190ae;
  --color-windfall-600: #477591;
  --color-windfall-700: #325d77;
  --color-windfall-800: #22485f;
  --color-windfall-900: #17374a;
  --color-windfall-950: #0b222f;
  --color-brilliant-blue: #007ab4;
  --color-brilliant-blue-50: #ecf7ff;
  --color-brilliant-blue-100: #dbf0ff;
  --color-brilliant-blue-200: #b6e0ff;
  --color-brilliant-blue-300: #86ceff;
  --color-brilliant-blue-400: #57b0ea;
  --color-brilliant-blue-500: #3295d0;
  --color-brilliant-blue-600: #007ab4;
  --color-brilliant-blue-700: #006190;
  --color-brilliant-blue-800: #004b72;
  --color-brilliant-blue-900: #003a58;
  --color-brilliant-blue-950: #002439;
  --color-whale-s-tale: #0e5a84;
  --color-whale-s-tale-50: #ecf7ff;
  --color-whale-s-tale-100: #d9efff;
  --color-whale-s-tale-200: #b0deff;
  --color-whale-s-tale-300: #8fc8f1;
  --color-whale-s-tale-400: #69a9d5;
  --color-whale-s-tale-500: #4a8dba;
  --color-whale-s-tale-600: #2f719c;
  --color-whale-s-tale-700: #0e5a84;
  --color-whale-s-tale-800: #0a4668;
  --color-whale-s-tale-900: #023652;
  --color-whale-s-tale-950: #002136;
  --color-oceanic-noir: #072a3c;
  --color-oceanic-noir-50: #ebf7ff;
  --color-oceanic-noir-100: #d8effe;
  --color-oceanic-noir-200: #c1dcee;
  --color-oceanic-noir-300: #a7c6da;
  --color-oceanic-noir-400: #85a7bc;
  --color-oceanic-noir-500: #6a8da3;
  --color-oceanic-noir-600: #527488;
  --color-oceanic-noir-700: #3f5e71;
  --color-oceanic-noir-800: #304c5d;
  --color-oceanic-noir-900: #243d4b;
  --color-oceanic-noir-950: #072a3c;
}