Highlands to Dark Roast Color Palette

About this palette

Highlands to Dark Roast is a 5-color warm, vintage palette: #4D8A7E (Highlands), #B58798 (Punched Pink), #08658D (Hydra), #F3C5A8 (Shrimp Toast), #493036 (Dark Roast). It mixes turquoise, pink, blue, orange, red tones and feels warm overall. The strongest text pairing is #F3C5A8 on #493036 with a contrast ratio of 7.60:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Highlands	rgb(77, 138, 126)	hsl(168, 28%, 42%)
Punched Pink	rgb(181, 135, 152)	hsl(338, 24%, 62%)
Hydra	rgb(8, 101, 141)	hsl(198, 89%, 29%)
Shrimp Toast	rgb(243, 197, 168)	hsl(23, 76%, 81%)
Dark Roast	rgb(73, 48, 54)	hsl(346, 21%, 24%)

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.

Aa7.60:1 Very good#F3C5A8 on #493036
Aa7.60:1 Very good#493036 on #F3C5A8
Aa4.10:1 Poor#08658D on #F3C5A8
Aa4.10:1 Poor#F3C5A8 on #08658D
Aa3.91:1 Poor#B58798 on #493036
Aa3.91:1 Poor#493036 on #B58798

Color blindness preview

CSS variables

/* Highlands to Dark Roast — https://swatchly.xyz/palette/4d8a7e-b58798-08658d-f3c5a8-493036 */
:root {
  --highlands: #4d8a7e;
  --punched-pink: #b58798;
  --hydra: #08658d;
  --shrimp-toast: #f3c5a8;
  --dark-roast: #493036;
}

Tailwind CSS v4

/* Highlands to Dark Roast — https://swatchly.xyz/palette/4d8a7e-b58798-08658d-f3c5a8-493036 */
@theme {
  --color-highlands: #4d8a7e;
  --color-highlands-50: #dafcf4;
  --color-highlands-100: #caf2e8;
  --color-highlands-200: #afded3;
  --color-highlands-300: #91c7bb;
  --color-highlands-400: #6ba79b;
  --color-highlands-500: #4d8a7e;
  --color-highlands-600: #357065;
  --color-highlands-700: #245a51;
  --color-highlands-800: #16483f;
  --color-highlands-900: #0d3831;
  --color-highlands-950: #05241f;
  --color-punched-pink: #b58798;
  --color-punched-pink-50: #ffebf2;
  --color-punched-pink-100: #fcdbe6;
  --color-punched-pink-200: #eac3d1;
  --color-punched-pink-300: #d4a9b9;
  --color-punched-pink-400: #b58798;
  --color-punched-pink-500: #9a6e7f;
  --color-punched-pink-600: #805766;
  --color-punched-pink-700: #684352;
  --color-punched-pink-800: #543440;
  --color-punched-pink-900: #432832;
  --color-punched-pink-950: #2c1820;
  --color-hydra: #08658d;
  --color-hydra-50: #ebf7ff;
  --color-hydra-100: #d7efff;
  --color-hydra-200: #afe1ff;
  --color-hydra-300: #8ecdf3;
  --color-hydra-400: #67b0d9;
  --color-hydra-500: #4895bf;
  --color-hydra-600: #2c7ba4;
  --color-hydra-700: #08658d;
  --color-hydra-800: #004f70;
  --color-hydra-900: #003d58;
  --color-hydra-950: #002639;
  --color-shrimp-toast: #f3c5a8;
  --color-shrimp-toast-50: #ffece0;
  --color-shrimp-toast-100: #fddeca;
  --color-shrimp-toast-200: #f3c5a8;
  --color-shrimp-toast-300: #d9b198;
  --color-shrimp-toast-400: #bd9278;
  --color-shrimp-toast-500: #a2785d;
  --color-shrimp-toast-600: #875f46;
  --color-shrimp-toast-700: #6f4b33;
  --color-shrimp-toast-800: #593a25;
  --color-shrimp-toast-900: #462c1a;
  --color-shrimp-toast-950: #2d1a0d;
  --color-dark-roast: #493036;
  --color-dark-roast-50: #fff1f4;
  --color-dark-roast-100: #fae5e9;
  --color-dark-roast-200: #e9d0d5;
  --color-dark-roast-300: #d4b9bf;
  --color-dark-roast-400: #b79aa0;
  --color-dark-roast-500: #9d7f86;
  --color-dark-roast-600: #82666c;
  --color-dark-roast-700: #6b5157;
  --color-dark-roast-800: #574045;
  --color-dark-roast-900: #493036;
  --color-dark-roast-950: #2d1f22;
}