Oceanic Noir to Light Pink Color Palette

About this palette

Oceanic Noir to Light Pink is a 4-color vintage palette: #002D3B (Oceanic Noir), #1F694D (Into the Green), #E17F3D (Solar Flare), #FFCFE1 (Light Pink). It mixes blue, green, orange, pink tones and feels balanced overall. The strongest text pairing is #002D3B on #FFCFE1 with a contrast ratio of 10.61:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oceanic Noir	rgb(0, 45, 59)	hsl(194, 100%, 12%)
Into the Green	rgb(31, 105, 77)	hsl(157, 54%, 27%)
Solar Flare	rgb(225, 127, 61)	hsl(24, 73%, 56%)
Light Pink	rgb(255, 207, 225)	hsl(338, 100%, 91%)

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.

Aa10.61:1 Very good#002D3B on #FFCFE1
Aa10.61:1 Very good#FFCFE1 on #002D3B
Aa5.08:1 Good#002D3B on #E17F3D
Aa5.08:1 Good#E17F3D on #002D3B
Aa4.79:1 Good#1F694D on #FFCFE1
Aa4.79:1 Good#FFCFE1 on #1F694D

Color blindness preview

CSS variables

/* Oceanic Noir to Light Pink — https://swatchly.xyz/palette/002d3b-1f694d-e17f3d-ffcfe1 */
:root {
  --oceanic-noir: #002d3b;
  --into-the-green: #1f694d;
  --solar-flare: #e17f3d;
  --light-pink: #ffcfe1;
}

Tailwind CSS v4

/* Oceanic Noir to Light Pink — https://swatchly.xyz/palette/002d3b-1f694d-e17f3d-ffcfe1 */
@theme {
  --color-oceanic-noir: #002d3b;
  --color-oceanic-noir-50: #e8f8ff;
  --color-oceanic-noir-100: #d5f0fc;
  --color-oceanic-noir-200: #bddeeb;
  --color-oceanic-noir-300: #a3c8d7;
  --color-oceanic-noir-400: #80a9b9;
  --color-oceanic-noir-500: #658fa0;
  --color-oceanic-noir-600: #4d7686;
  --color-oceanic-noir-700: #3b606f;
  --color-oceanic-noir-800: #2c4e5b;
  --color-oceanic-noir-900: #213f4b;
  --color-oceanic-noir-950: #002d3b;
  --color-into-the-green: #1f694d;
  --color-into-the-green-50: #dcffed;
  --color-into-the-green-100: #ccf7e2;
  --color-into-the-green-200: #b3e6cd;
  --color-into-the-green-300: #97d2b6;
  --color-into-the-green-400: #72b596;
  --color-into-the-green-500: #549a7c;
  --color-into-the-green-600: #3a8063;
  --color-into-the-green-700: #1f694d;
  --color-into-the-green-800: #14523b;
  --color-into-the-green-900: #09402d;
  --color-into-the-green-950: #02291b;
  --color-solar-flare: #e17f3d;
  --color-solar-flare-50: #fff0e7;
  --color-solar-flare-100: #ffe2d1;
  --color-solar-flare-200: #ffc6a4;
  --color-solar-flare-300: #fca46d;
  --color-solar-flare-400: #e17f3d;
  --color-solar-flare-500: #c3641c;
  --color-solar-flare-600: #a24d00;
  --color-solar-flare-700: #823c00;
  --color-solar-flare-800: #672f00;
  --color-solar-flare-900: #512300;
  --color-solar-flare-950: #351500;
  --color-light-pink: #ffcfe1;
  --color-light-pink-50: #fff7fa;
  --color-light-pink-100: #ffebf2;
  --color-light-pink-200: #ffcfe1;
  --color-light-pink-300: #e1bac9;
  --color-light-pink-400: #c398a8;
  --color-light-pink-500: #a67b8c;
  --color-light-pink-600: #896070;
  --color-light-pink-700: #6f4a58;
  --color-light-pink-800: #573744;
  --color-light-pink-900: #442934;
  --color-light-pink-950: #2c1820;
}