Start generating

Dark Roast to Hint of Pink color palette

4A3030Dark Roast445A5BWoodland Night82625CChivalrous Walrus849BA0Lost at Sea9CC4CCContinental WatersF2E4E2Hint of Pink
Open in generator Export PNG, PDF, ASE…

About this palette

Dark Roast to Hint of Pink is a 6-color muted palette: #4A3030 (Dark Roast), #445A5B (Woodland Night), #82625C (Chivalrous Walrus), #849BA0 (Lost at Sea), #9CC4CC (Continental Waters), #F2E4E2 (Hint of Pink). It mixes brown, gray, red, turquoise tones and feels warm overall. The strongest text pairing is #4A3030 on #F2E4E2 with a contrast ratio of 9.66:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Dark Roastrgb(74, 48, 48)hsl(0, 21%, 24%)
Woodland Nightrgb(68, 90, 91)hsl(183, 14%, 31%)
Chivalrous Walrusrgb(130, 98, 92)hsl(9, 17%, 44%)
Lost at Seargb(132, 155, 160)hsl(191, 13%, 57%)
Continental Watersrgb(156, 196, 204)hsl(190, 32%, 71%)
Hint of Pinkrgb(242, 228, 226)hsl(8, 38%, 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.

  • Aa9.66:1 Very good#4A3030 on #F2E4E2
  • Aa9.66:1 Very good#F2E4E2 on #4A3030
  • Aa6.37:1 Good#4A3030 on #9CC4CC
  • Aa6.37:1 Good#9CC4CC on #4A3030
  • Aa5.94:1 Good#445A5B on #F2E4E2
  • Aa5.94:1 Good#F2E4E2 on #445A5B
  • Aa4.41:1 Poor#82625C on #F2E4E2
  • Aa4.41:1 Poor#F2E4E2 on #82625C

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Dark Roast to Hint of Pink — https://swatchly.xyz/palette/4a3030-445a5b-82625c-849ba0-9cc4cc-f2e4e2 */
:root {
  --dark-roast: #4a3030;
  --woodland-night: #445a5b;
  --chivalrous-walrus: #82625c;
  --lost-at-sea: #849ba0;
  --continental-waters: #9cc4cc;
  --hint-of-pink: #f2e4e2;
}

Tailwind CSS v4

/* Dark Roast to Hint of Pink — https://swatchly.xyz/palette/4a3030-445a5b-82625c-849ba0-9cc4cc-f2e4e2 */
@theme {
  --color-dark-roast: #4a3030;
  --color-dark-roast-50: #fff1f1;
  --color-dark-roast-100: #fbe5e5;
  --color-dark-roast-200: #ead1d0;
  --color-dark-roast-300: #d5b9b8;
  --color-dark-roast-400: #b99a99;
  --color-dark-roast-500: #9e7f7f;
  --color-dark-roast-600: #836666;
  --color-dark-roast-700: #6c5151;
  --color-dark-roast-800: #574040;
  --color-dark-roast-900: #4a3030;
  --color-dark-roast-950: #2e1f1f;
  --color-woodland-night: #445a5b;
  --color-woodland-night-50: #eaf8f9;
  --color-woodland-night-100: #dfefef;
  --color-woodland-night-200: #c9dcdc;
  --color-woodland-night-300: #b1c6c7;
  --color-woodland-night-400: #90a7a8;
  --color-woodland-night-500: #748b8c;
  --color-woodland-night-600: #5a7172;
  --color-woodland-night-700: #445a5b;
  --color-woodland-night-800: #344647;
  --color-woodland-night-900: #273637;
  --color-woodland-night-950: #172222;
  --color-chivalrous-walrus: #82625c;
  --color-chivalrous-walrus-50: #fff2ef;
  --color-chivalrous-walrus-100: #fce5e0;
  --color-chivalrous-walrus-200: #ecd0cb;
  --color-chivalrous-walrus-300: #d7b8b2;
  --color-chivalrous-walrus-400: #b99892;
  --color-chivalrous-walrus-500: #9e7c76;
  --color-chivalrous-walrus-600: #82625c;
  --color-chivalrous-walrus-700: #694d47;
  --color-chivalrous-walrus-800: #533b36;
  --color-chivalrous-walrus-900: #412d29;
  --color-chivalrous-walrus-950: #2a1b18;
  --color-lost-at-sea: #849ba0;
  --color-lost-at-sea-50: #e6f4f7;
  --color-lost-at-sea-100: #d8e9ec;
  --color-lost-at-sea-200: #c1d4d8;
  --color-lost-at-sea-300: #a7bcc0;
  --color-lost-at-sea-400: #849ba0;
  --color-lost-at-sea-500: #6b8287;
  --color-lost-at-sea-600: #54696e;
  --color-lost-at-sea-700: #415458;
  --color-lost-at-sea-800: #324246;
  --color-lost-at-sea-900: #263437;
  --color-lost-at-sea-950: #172124;
  --color-continental-waters: #9cc4cc;
  --color-continental-waters-50: #e0f7fc;
  --color-continental-waters-100: #d3edf2;
  --color-continental-waters-200: #bbdae0;
  --color-continental-waters-300: #9cc4cc;
  --color-continental-waters-400: #7fa5ad;
  --color-continental-waters-500: #648a92;
  --color-continental-waters-600: #4c7178;
  --color-continental-waters-700: #385a61;
  --color-continental-waters-800: #29474d;
  --color-continental-waters-900: #1e373c;
  --color-continental-waters-950: #102326;
  --color-hint-of-pink: #f2e4e2;
  --color-hint-of-pink-50: #f8f0ef;
  --color-hint-of-pink-100: #f2e4e2;
  --color-hint-of-pink-200: #dcd2d0;
  --color-hint-of-pink-300: #c7bcba;
  --color-hint-of-pink-400: #a99d9b;
  --color-hint-of-pink-500: #8e8280;
  --color-hint-of-pink-600: #746866;
  --color-hint-of-pink-700: #5d5251;
  --color-hint-of-pink-800: #49403f;
  --color-hint-of-pink-900: #393130;
  --color-hint-of-pink-950: #231e1d;
}

Similar palettes