Petal Pink to Oceanic Noir Color Palette

About this palette

Petal Pink to Oceanic Noir is a 5-color muted, gradient palette: #F6E7E3 (Petal Pink), #B4B08A (Green Tea), #9C7463 (Equestrienne), #4A5865 (Fiord), #192833 (Oceanic Noir). It mixes white, yellow, orange, gray tones and feels warm overall. The strongest text pairing is #F6E7E3 on #192833 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
Petal Pink	rgb(246, 231, 227)	hsl(13, 51%, 93%)
Green Tea	rgb(180, 176, 138)	hsl(54, 22%, 62%)
Equestrienne	rgb(156, 116, 99)	hsl(18, 22%, 50%)
Fiord	rgb(74, 88, 101)	hsl(209, 15%, 34%)
Oceanic Noir	rgb(25, 40, 51)	hsl(205, 34%, 15%)

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#F6E7E3 on #192833
Aa12.54:1 Super#192833 on #F6E7E3
Aa6.83:1 Good#B4B08A on #192833
Aa6.83:1 Good#192833 on #B4B08A
Aa6.07:1 Good#F6E7E3 on #4A5865
Aa6.07:1 Good#4A5865 on #F6E7E3
Aa3.66:1 Poor#9C7463 on #192833
Aa3.66:1 Poor#192833 on #9C7463

Color blindness preview

CSS variables

/* Petal Pink to Oceanic Noir — https://swatchly.xyz/palette/f6e7e3-b4b08a-9c7463-4a5865-192833 */
:root {
  --petal-pink: #f6e7e3;
  --green-tea: #b4b08a;
  --equestrienne: #9c7463;
  --fiord: #4a5865;
  --oceanic-noir: #192833;
}

Tailwind CSS v4

/* Petal Pink to Oceanic Noir — https://swatchly.xyz/palette/f6e7e3-b4b08a-9c7463-4a5865-192833 */
@theme {
  --color-petal-pink: #f6e7e3;
  --color-petal-pink-50: #fbf3f0;
  --color-petal-pink-100: #f6e7e3;
  --color-petal-pink-200: #dfd4d1;
  --color-petal-pink-300: #cabdba;
  --color-petal-pink-400: #ab9e9a;
  --color-petal-pink-500: #90837f;
  --color-petal-pink-600: #756865;
  --color-petal-pink-700: #5e524f;
  --color-petal-pink-800: #4a403d;
  --color-petal-pink-900: #39312e;
  --color-petal-pink-950: #241e1c;
  --color-green-tea: #b4b08a;
  --color-green-tea-50: #fdfbe6;
  --color-green-tea-100: #f5f3dd;
  --color-green-tea-200: #e4e2c7;
  --color-green-tea-300: #d1cdae;
  --color-green-tea-400: #b4b08a;
  --color-green-tea-500: #96926d;
  --color-green-tea-600: #797551;
  --color-green-tea-700: #605c3b;
  --color-green-tea-800: #4a472a;
  --color-green-tea-900: #38351d;
  --color-green-tea-950: #22200f;
  --color-equestrienne: #9c7463;
  --color-equestrienne-50: #fff0ea;
  --color-equestrienne-100: #fee1d5;
  --color-equestrienne-200: #edcbbd;
  --color-equestrienne-300: #d8b2a2;
  --color-equestrienne-400: #b9907f;
  --color-equestrienne-500: #9c7463;
  --color-equestrienne-600: #815c4c;
  --color-equestrienne-700: #694739;
  --color-equestrienne-800: #54372b;
  --color-equestrienne-900: #422a1f;
  --color-equestrienne-950: #2b1912;
  --color-fiord: #4a5865;
  --color-fiord-50: #edf6ff;
  --color-fiord-100: #e2edf6;
  --color-fiord-200: #cdd9e5;
  --color-fiord-300: #b6c3d0;
  --color-fiord-400: #95a4b2;
  --color-fiord-500: #7a8997;
  --color-fiord-600: #606e7c;
  --color-fiord-700: #4a5865;
  --color-fiord-800: #39454f;
  --color-fiord-900: #2b353e;
  --color-fiord-950: #1a2127;
  --color-oceanic-noir: #192833;
  --color-oceanic-noir-50: #ecf7ff;
  --color-oceanic-noir-100: #e1edf6;
  --color-oceanic-noir-200: #ccdae5;
  --color-oceanic-noir-300: #b3c3d0;
  --color-oceanic-noir-400: #93a4b2;
  --color-oceanic-noir-500: #798a98;
  --color-oceanic-noir-600: #60717e;
  --color-oceanic-noir-700: #4c5b67;
  --color-oceanic-noir-800: #3c4954;
  --color-oceanic-noir-900: #2f3b44;
  --color-oceanic-noir-950: #192833;
}