Seaborn to Homoeopathic Red color palette

About this palette

Seaborn to Homoeopathic Red is a 5-color muted palette: #91BFB2 (Seaborn), #4E452E (Olive Leaf), #1E2228 (Noble Black), #5C8577 (Aloe Vera), #EDDCE0 (Homoeopathic Red). It mixes turquoise, brown, gray tones and feels cool overall. The strongest text pairing is #1E2228 on #EDDCE0 with a contrast ratio of 12.11:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Seabornrgb(145, 191, 178)hsl(163, 26%, 66%)
Olive Leafrgb(78, 69, 46)hsl(43, 26%, 24%)
Noble Blackrgb(30, 34, 40)hsl(216, 14%, 14%)
Aloe Verargb(92, 133, 119)hsl(160, 18%, 44%)
Homoeopathic Redrgb(237, 220, 224)hsl(346, 32%, 90%)

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.11:1 Super#1E2228 on #EDDCE0
  • Aa12.11:1 Super#EDDCE0 on #1E2228
  • Aa7.83:1 Very good#91BFB2 on #1E2228
  • Aa7.83:1 Very good#1E2228 on #91BFB2
  • Aa7.19:1 Very good#4E452E on #EDDCE0
  • Aa7.19:1 Very good#EDDCE0 on #4E452E
  • Aa4.65:1 Good#91BFB2 on #4E452E
  • Aa4.65:1 Good#4E452E on #91BFB2

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Seaborn to Homoeopathic Red — https://swatchly.xyz/palette/91bfb2-4e452e-1e2228-5c8577-eddce0 */
:root {
  --seaborn: #91bfb2;
  --olive-leaf: #4e452e;
  --noble-black: #1e2228;
  --aloe-vera: #5c8577;
  --homoeopathic-red: #eddce0;
}

Tailwind CSS v4

/* Seaborn to Homoeopathic Red — https://swatchly.xyz/palette/91bfb2-4e452e-1e2228-5c8577-eddce0 */
@theme {
  --color-seaborn: #91bfb2;
  --color-seaborn-50: #daf5ed;
  --color-seaborn-100: #cbeae1;
  --color-seaborn-200: #b1d6cb;
  --color-seaborn-300: #91bfb2;
  --color-seaborn-400: #75a295;
  --color-seaborn-500: #5c887c;
  --color-seaborn-600: #457064;
  --color-seaborn-700: #335a50;
  --color-seaborn-800: #26483f;
  --color-seaborn-900: #1b3932;
  --color-seaborn-950: #0e241f;
  --color-olive-leaf: #4e452e;
  --color-olive-leaf-50: #fbf5e6;
  --color-olive-leaf-100: #f1ebda;
  --color-olive-leaf-200: #dfd7c3;
  --color-olive-leaf-300: #cac1aa;
  --color-olive-leaf-400: #aca28a;
  --color-olive-leaf-500: #91876e;
  --color-olive-leaf-600: #776e56;
  --color-olive-leaf-700: #605842;
  --color-olive-leaf-800: #4e452e;
  --color-olive-leaf-900: #3c3524;
  --color-olive-leaf-950: #262115;
  --color-noble-black: #1e2228;
  --color-noble-black-50: #f2f5fa;
  --color-noble-black-100: #e8ebf1;
  --color-noble-black-200: #d4d8de;
  --color-noble-black-300: #bdc1c8;
  --color-noble-black-400: #9da2a9;
  --color-noble-black-500: #82878f;
  --color-noble-black-600: #686d74;
  --color-noble-black-700: #53575e;
  --color-noble-black-800: #41444a;
  --color-noble-black-900: #32353a;
  --color-noble-black-950: #1e2228;
  --color-aloe-vera: #5c8577;
  --color-aloe-vera-50: #e1faf0;
  --color-aloe-vera-100: #d2efe4;
  --color-aloe-vera-200: #b9dace;
  --color-aloe-vera-300: #9dc3b5;
  --color-aloe-vera-400: #79a294;
  --color-aloe-vera-500: #5c8577;
  --color-aloe-vera-600: #456c5f;
  --color-aloe-vera-700: #33574b;
  --color-aloe-vera-800: #26443b;
  --color-aloe-vera-900: #1b362d;
  --color-aloe-vera-950: #0f221c;
  --color-homoeopathic-red: #eddce0;
  --color-homoeopathic-red-50: #fffafb;
  --color-homoeopathic-red-100: #faf0f3;
  --color-homoeopathic-red-200: #eddce0;
  --color-homoeopathic-red-300: #d2c5c8;
  --color-homoeopathic-red-400: #b2a3a7;
  --color-homoeopathic-red-500: #95868a;
  --color-homoeopathic-red-600: #796a6e;
  --color-homoeopathic-red-700: #605356;
  --color-homoeopathic-red-800: #4a3f42;
  --color-homoeopathic-red-900: #393032;
  --color-homoeopathic-red-950: #241d1f;
}

Similar palettes