Oceanic Noir to Coral Kiss Color Palette

About this palette

Oceanic Noir to Coral Kiss is a 4-color vintage palette: #002A3D (Oceanic Noir), #256C9F (Windsurfing), #CF9460 (Whiskey Sour), #FFDBC3 (Coral Kiss). It mixes blue, orange tones and feels balanced overall. The strongest text pairing is #002A3D on #FFDBC3 with a contrast ratio of 11.56:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oceanic Noir	rgb(0, 42, 61)	hsl(199, 100%, 12%)
Windsurfing	rgb(37, 108, 159)	hsl(205, 62%, 38%)
Whiskey Sour	rgb(207, 148, 96)	hsl(28, 54%, 59%)
Coral Kiss	rgb(255, 219, 195)	hsl(24, 100%, 88%)

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.

Aa11.56:1 Very good#002A3D on #FFDBC3
Aa11.56:1 Very good#FFDBC3 on #002A3D
Aa5.76:1 Good#002A3D on #CF9460
Aa5.76:1 Good#CF9460 on #002A3D
Aa4.34:1 Poor#256C9F on #FFDBC3
Aa4.34:1 Poor#FFDBC3 on #256C9F

Color blindness preview

CSS variables

/* Oceanic Noir to Coral Kiss — https://swatchly.xyz/palette/002a3d-256c9f-cf9460-ffdbc3 */
:root {
  --oceanic-noir: #002a3d;
  --windsurfing: #256c9f;
  --whiskey-sour: #cf9460;
  --coral-kiss: #ffdbc3;
}

Tailwind CSS v4

/* Oceanic Noir to Coral Kiss — https://swatchly.xyz/palette/002a3d-256c9f-cf9460-ffdbc3 */
@theme {
  --color-oceanic-noir: #002a3d;
  --color-oceanic-noir-50: #ebf7ff;
  --color-oceanic-noir-100: #d6f0ff;
  --color-oceanic-noir-200: #beddef;
  --color-oceanic-noir-300: #a3c7dc;
  --color-oceanic-noir-400: #81a8be;
  --color-oceanic-noir-500: #668ea4;
  --color-oceanic-noir-600: #4d748a;
  --color-oceanic-noir-700: #3a5e72;
  --color-oceanic-noir-800: #2b4c5e;
  --color-oceanic-noir-900: #203d4c;
  --color-oceanic-noir-950: #002a3d;
  --color-windsurfing: #256c9f;
  --color-windsurfing-50: #edf7ff;
  --color-windsurfing-100: #d9edff;
  --color-windsurfing-200: #b1dbff;
  --color-windsurfing-300: #8ac5f6;
  --color-windsurfing-400: #63a5d9;
  --color-windsurfing-500: #4388bd;
  --color-windsurfing-600: #256c9f;
  --color-windsurfing-700: #145682;
  --color-windsurfing-800: #05436a;
  --color-windsurfing-900: #003354;
  --color-windsurfing-950: #002037;
  --color-whiskey-sour: #cf9460;
  --color-whiskey-sour-50: #fff3e9;
  --color-whiskey-sour-100: #ffe7d3;
  --color-whiskey-sour-200: #fccea7;
  --color-whiskey-sour-300: #eab68a;
  --color-whiskey-sour-400: #cf9460;
  --color-whiskey-sour-500: #b17845;
  --color-whiskey-sour-600: #945e2a;
  --color-whiskey-sour-700: #794816;
  --color-whiskey-sour-800: #613707;
  --color-whiskey-sour-900: #4d2901;
  --color-whiskey-sour-950: #321800;
  --color-coral-kiss: #ffdbc3;
  --color-coral-kiss-50: #ffeadc;
  --color-coral-kiss-100: #ffdbc3;
  --color-coral-kiss-200: #e6cbb8;
  --color-coral-kiss-300: #d3b5a1;
  --color-coral-kiss-400: #b79680;
  --color-coral-kiss-500: #9c7c66;
  --color-coral-kiss-600: #82634e;
  --color-coral-kiss-700: #6a4e3c;
  --color-coral-kiss-800: #543c2c;
  --color-coral-kiss-900: #422e20;
  --color-coral-kiss-950: #2a1c11;
}