Oceanic Noir to Pink Swirl color palette

002E3BOceanic Noir 366369Mediterranea AD5F54Dried Tomatoes 76A9B1Equanimity E7C2B2Mellow Marrow FFE7E1Pink Swirl

Open in generator Export PNG, PDF, ASE…

About this palette

Oceanic Noir to Pink Swirl is a 6-color muted palette: #002E3B (Oceanic Noir), #366369 (Mediterranea), #AD5F54 (Dried Tomatoes), #76A9B1 (Equanimity), #E7C2B2 (Mellow Marrow), #FFE7E1 (Pink Swirl). It mixes blue, turquoise, red, orange, white tones and feels cool overall. The strongest text pairing is #002E3B on #FFE7E1 with a contrast ratio of 12.22:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oceanic Noir	rgb(0, 46, 59)	hsl(193, 100%, 12%)
Mediterranea	rgb(54, 99, 105)	hsl(187, 32%, 31%)
Dried Tomatoes	rgb(173, 95, 84)	hsl(7, 35%, 50%)
Equanimity	rgb(118, 169, 177)	hsl(188, 27%, 58%)
Mellow Marrow	rgb(231, 194, 178)	hsl(18, 52%, 80%)
Pink Swirl	rgb(255, 231, 225)	hsl(12, 100%, 94%)

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.22:1 Super#002E3B on #FFE7E1
Aa12.22:1 Super#FFE7E1 on #002E3B
Aa8.77:1 Very good#002E3B on #E7C2B2
Aa8.77:1 Very good#E7C2B2 on #002E3B
Aa5.65:1 Good#366369 on #FFE7E1
Aa5.65:1 Good#FFE7E1 on #366369
Aa5.56:1 Good#002E3B on #76A9B1
Aa5.56:1 Good#76A9B1 on #002E3B

Color blindness preview

CSS variables

/* Oceanic Noir to Pink Swirl — https://swatchly.xyz/palette/002e3b-366369-ad5f54-76a9b1-e7c2b2-ffe7e1 */
:root {
  --oceanic-noir: #002e3b;
  --mediterranea: #366369;
  --dried-tomatoes: #ad5f54;
  --equanimity: #76a9b1;
  --mellow-marrow: #e7c2b2;
  --pink-swirl: #ffe7e1;
}

Tailwind CSS v4

/* Oceanic Noir to Pink Swirl — https://swatchly.xyz/palette/002e3b-366369-ad5f54-76a9b1-e7c2b2-ffe7e1 */
@theme {
  --color-oceanic-noir: #002e3b;
  --color-oceanic-noir-50: #e7f9ff;
  --color-oceanic-noir-100: #d5f1fb;
  --color-oceanic-noir-200: #bddeea;
  --color-oceanic-noir-300: #a3c8d6;
  --color-oceanic-noir-400: #80a9b8;
  --color-oceanic-noir-500: #65909f;
  --color-oceanic-noir-600: #4d7785;
  --color-oceanic-noir-700: #3b616f;
  --color-oceanic-noir-800: #2c4f5b;
  --color-oceanic-noir-900: #21404b;
  --color-oceanic-noir-950: #002e3b;
  --color-mediterranea: #366369;
  --color-mediterranea-50: #e1fbfe;
  --color-mediterranea-100: #d4f2f6;
  --color-mediterranea-200: #bde0e5;
  --color-mediterranea-300: #a4cbd1;
  --color-mediterranea-400: #81aeb4;
  --color-mediterranea-500: #669399;
  --color-mediterranea-600: #4c797f;
  --color-mediterranea-700: #366369;
  --color-mediterranea-800: #284e53;
  --color-mediterranea-900: #1c3c40;
  --color-mediterranea-950: #0e2629;
  --color-dried-tomatoes: #ad5f54;
  --color-dried-tomatoes-50: #fff2ef;
  --color-dried-tomatoes-100: #ffe7e3;
  --color-dried-tomatoes-200: #ffcfc7;
  --color-dried-tomatoes-300: #fab3a8;
  --color-dried-tomatoes-400: #e19387;
  --color-dried-tomatoes-500: #c8786c;
  --color-dried-tomatoes-600: #ad5f54;
  --color-dried-tomatoes-700: #8f473e;
  --color-dried-tomatoes-800: #73342c;
  --color-dried-tomatoes-900: #5b251f;
  --color-dried-tomatoes-950: #3c1510;
  --color-equanimity: #76a9b1;
  --color-equanimity-50: #defaff;
  --color-equanimity-100: #d0f1f6;
  --color-equanimity-200: #b7dee4;
  --color-equanimity-300: #9cc8cf;
  --color-equanimity-400: #76a9b1;
  --color-equanimity-500: #5b8e96;
  --color-equanimity-600: #42737b;
  --color-equanimity-700: #2f5c63;
  --color-equanimity-800: #20494e;
  --color-equanimity-900: #16383d;
  --color-equanimity-950: #0a2327;
  --color-mellow-marrow: #e7c2b2;
  --color-mellow-marrow-50: #fff9f6;
  --color-mellow-marrow-100: #ffeee7;
  --color-mellow-marrow-200: #f4dacf;
  --color-mellow-marrow-300: #e7c2b2;
  --color-mellow-marrow-400: #c3a193;
  --color-mellow-marrow-500: #a68475;
  --color-mellow-marrow-600: #89685a;
  --color-mellow-marrow-700: #6e5044;
  --color-mellow-marrow-800: #563d32;
  --color-mellow-marrow-900: #422d24;
  --color-mellow-marrow-950: #2a1b14;
  --color-pink-swirl: #ffe7e1;
  --color-pink-swirl-50: #fff4f1;
  --color-pink-swirl-100: #ffe7e1;
  --color-pink-swirl-200: #e6d5d0;
  --color-pink-swirl-300: #d1bdb8;
  --color-pink-swirl-400: #b29d98;
  --color-pink-swirl-500: #97817c;
  --color-pink-swirl-600: #7b6762;
  --color-pink-swirl-700: #63504c;
  --color-pink-swirl-800: #4e3e3a;
  --color-pink-swirl-900: #3d2f2c;
  --color-pink-swirl-950: #261d1a;
}