Horizon to Cactus Color Palette

About this palette

Horizon to Cactus is a 5-color muted, cool palette: #5D8B8F (Horizon), #CCE0DD (Mountain Dew), #A4BDB9 (Seafoam Whisper), #324B36 (Palm Leaf), #506E5B (Cactus). It mixes turquoise, gray, green tones and feels cool overall. The strongest text pairing is #CCE0DD on #324B36 with a contrast ratio of 6.96:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Horizon	rgb(93, 139, 143)	hsl(185, 21%, 46%)
Mountain Dew	rgb(204, 224, 221)	hsl(171, 24%, 84%)
Seafoam Whisper	rgb(164, 189, 185)	hsl(170, 16%, 69%)
Palm Leaf	rgb(50, 75, 54)	hsl(130, 20%, 25%)
Cactus	rgb(80, 110, 91)	hsl(142, 16%, 37%)

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.

Aa6.96:1 Good#CCE0DD on #324B36
Aa6.96:1 Good#324B36 on #CCE0DD
Aa4.81:1 Good#A4BDB9 on #324B36
Aa4.81:1 Good#324B36 on #A4BDB9
Aa4.10:1 Poor#CCE0DD on #506E5B
Aa4.10:1 Poor#506E5B on #CCE0DD

Color blindness preview

CSS variables

/* Horizon to Cactus — https://swatchly.xyz/palette/5d8b8f-cce0dd-a4bdb9-324b36-506e5b */
:root {
  --horizon: #5d8b8f;
  --mountain-dew: #cce0dd;
  --seafoam-whisper: #a4bdb9;
  --palm-leaf: #324b36;
  --cactus: #506e5b;
}

Tailwind CSS v4

/* Horizon to Cactus — https://swatchly.xyz/palette/5d8b8f-cce0dd-a4bdb9-324b36-506e5b */
@theme {
  --color-horizon: #5d8b8f;
  --color-horizon-50: #e0fafd;
  --color-horizon-100: #d2f0f3;
  --color-horizon-200: #b9dde0;
  --color-horizon-300: #9ec7ca;
  --color-horizon-400: #7aa7ab;
  --color-horizon-500: #5d8b8f;
  --color-horizon-600: #457175;
  --color-horizon-700: #325a5e;
  --color-horizon-800: #23474a;
  --color-horizon-900: #18373a;
  --color-horizon-950: #0c2325;
  --color-mountain-dew: #cce0dd;
  --color-mountain-dew-50: #f0faf9;
  --color-mountain-dew-100: #e5f1ef;
  --color-mountain-dew-200: #cce0dd;
  --color-mountain-dew-300: #b7c8c5;
  --color-mountain-dew-400: #96a8a6;
  --color-mountain-dew-500: #7a8c8a;
  --color-mountain-dew-600: #5f716f;
  --color-mountain-dew-700: #4a5a57;
  --color-mountain-dew-800: #384644;
  --color-mountain-dew-900: #2a3634;
  --color-mountain-dew-950: #192120;
  --color-seafoam-whisper: #a4bdb9;
  --color-seafoam-whisper-50: #e5f4f1;
  --color-seafoam-whisper-100: #d7e8e6;
  --color-seafoam-whisper-200: #c0d4d1;
  --color-seafoam-whisper-300: #a4bdb9;
  --color-seafoam-whisper-400: #879f9b;
  --color-seafoam-whisper-500: #6e8682;
  --color-seafoam-whisper-600: #566d69;
  --color-seafoam-whisper-700: #435754;
  --color-seafoam-whisper-800: #334542;
  --color-seafoam-whisper-900: #273634;
  --color-seafoam-whisper-950: #172220;
  --color-palm-leaf: #324b36;
  --color-palm-leaf-50: #eafaec;
  --color-palm-leaf-100: #dff1e1;
  --color-palm-leaf-200: #c9decb;
  --color-palm-leaf-300: #b0c9b3;
  --color-palm-leaf-400: #8faa93;
  --color-palm-leaf-500: #748f78;
  --color-palm-leaf-600: #5b755e;
  --color-palm-leaf-700: #465e49;
  --color-palm-leaf-800: #324b36;
  --color-palm-leaf-900: #27392a;
  --color-palm-leaf-950: #172419;
  --color-cactus: #506e5b;
  --color-cactus-50: #e8fbee;
  --color-cactus-100: #dbf0e2;
  --color-cactus-200: #c4ddcc;
  --color-cactus-300: #a9c6b3;
  --color-cactus-400: #87a692;
  --color-cactus-500: #6b8a76;
  --color-cactus-600: #506e5b;
  --color-cactus-700: #3d5847;
  --color-cactus-800: #2e4537;
  --color-cactus-900: #223529;
  --color-cactus-950: #132119;
}