Start generating

Rich Black to Strawberry Blonde color palette

00413ERich Black7F3934Dockside Red008B99WaikikiC37E7FOld Rose88D7E3Infinity PoolFFD9D8Strawberry Blonde
Open in generator Export PNG, PDF, ASE…

About this palette

Rich Black to Strawberry Blonde is a 6-color vintage palette: #00413E (Rich Black), #7F3934 (Dockside Red), #008B99 (Waikiki), #C37E7F (Old Rose), #88D7E3 (Infinity Pool), #FFD9D8 (Strawberry Blonde). It mixes turquoise, red, pink tones and feels balanced overall. The strongest text pairing is #00413E on #FFD9D8 with a contrast ratio of 8.86:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Rich Blackrgb(0, 65, 62)hsl(177, 100%, 13%)
Dockside Redrgb(127, 57, 52)hsl(4, 42%, 35%)
Waikikirgb(0, 139, 153)hsl(185, 100%, 30%)
Old Rosergb(195, 126, 127)hsl(359, 37%, 63%)
Infinity Poolrgb(136, 215, 227)hsl(188, 62%, 71%)
Strawberry Blondergb(255, 217, 216)hsl(2, 100%, 92%)

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.

  • Aa8.86:1 Very good#00413E on #FFD9D8
  • Aa8.86:1 Very good#FFD9D8 on #00413E
  • Aa7.05:1 Very good#00413E on #88D7E3
  • Aa7.05:1 Very good#88D7E3 on #00413E
  • Aa6.37:1 Good#7F3934 on #FFD9D8
  • Aa6.37:1 Good#FFD9D8 on #7F3934
  • Aa5.07:1 Good#7F3934 on #88D7E3
  • Aa5.07:1 Good#88D7E3 on #7F3934

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Rich Black to Strawberry Blonde — https://swatchly.xyz/palette/00413e-7f3934-008b99-c37e7f-88d7e3-ffd9d8 */
:root {
  --rich-black: #00413e;
  --dockside-red: #7f3934;
  --waikiki: #008b99;
  --old-rose: #c37e7f;
  --infinity-pool: #88d7e3;
  --strawberry-blonde: #ffd9d8;
}

Tailwind CSS v4

/* Rich Black to Strawberry Blonde — https://swatchly.xyz/palette/00413e-7f3934-008b99-c37e7f-88d7e3-ffd9d8 */
@theme {
  --color-rich-black: #00413e;
  --color-rich-black-50: #defdfa;
  --color-rich-black-100: #d1f3f0;
  --color-rich-black-200: #b8e1dd;
  --color-rich-black-300: #9cccc8;
  --color-rich-black-400: #79aeaa;
  --color-rich-black-500: #5d948f;
  --color-rich-black-600: #447976;
  --color-rich-black-700: #30635f;
  --color-rich-black-800: #214f4c;
  --color-rich-black-900: #00413e;
  --color-rich-black-950: #0a2827;
  --color-dockside-red: #7f3934;
  --color-dockside-red-50: #fff2f0;
  --color-dockside-red-100: #ffe4e1;
  --color-dockside-red-200: #ffc7c1;
  --color-dockside-red-300: #f1aba3;
  --color-dockside-red-400: #d48880;
  --color-dockside-red-500: #b76b64;
  --color-dockside-red-600: #98514b;
  --color-dockside-red-700: #7f3934;
  --color-dockside-red-800: #632c28;
  --color-dockside-red-900: #4f201d;
  --color-dockside-red-950: #331210;
  --color-waikiki: #008b99;
  --color-waikiki-50: #d9faff;
  --color-waikiki-100: #b5f4fd;
  --color-waikiki-200: #93e0eb;
  --color-waikiki-300: #6ec9d6;
  --color-waikiki-400: #3da9b7;
  --color-waikiki-500: #008b99;
  --color-waikiki-600: #00707c;
  --color-waikiki-700: #005963;
  --color-waikiki-800: #00464e;
  --color-waikiki-900: #00373d;
  --color-waikiki-950: #002327;
  --color-old-rose: #c37e7f;
  --color-old-rose-50: #fff5f5;
  --color-old-rose-100: #ffebea;
  --color-old-rose-200: #ffd2d2;
  --color-old-rose-300: #f5b9b9;
  --color-old-rose-400: #db9999;
  --color-old-rose-500: #c37e7f;
  --color-old-rose-600: #a36163;
  --color-old-rose-700: #86494b;
  --color-old-rose-800: #6b3638;
  --color-old-rose-900: #542729;
  --color-old-rose-950: #361617;
  --color-infinity-pool: #88d7e3;
  --color-infinity-pool-50: #ecfcff;
  --color-infinity-pool-100: #d0f9ff;
  --color-infinity-pool-200: #b3e9f1;
  --color-infinity-pool-300: #88d7e3;
  --color-infinity-pool-400: #6bb5c0;
  --color-infinity-pool-500: #4998a4;
  --color-infinity-pool-600: #2a7c87;
  --color-infinity-pool-700: #10636d;
  --color-infinity-pool-800: #004d56;
  --color-infinity-pool-900: #003a41;
  --color-infinity-pool-950: #002529;
  --color-strawberry-blonde: #ffd9d8;
  --color-strawberry-blonde-50: #ffe9e8;
  --color-strawberry-blonde-100: #ffd9d8;
  --color-strawberry-blonde-200: #e6c9c8;
  --color-strawberry-blonde-300: #d3b3b2;
  --color-strawberry-blonde-400: #b69493;
  --color-strawberry-blonde-500: #9c7a79;
  --color-strawberry-blonde-600: #816161;
  --color-strawberry-blonde-700: #6a4d4c;
  --color-strawberry-blonde-800: #543b3b;
  --color-strawberry-blonde-900: #422c2c;
  --color-strawberry-blonde-950: #2a1b1a;
}

Similar palettes