Over the Hills to Lost Golfer Color Palette

About this palette

Over the Hills to Lost Golfer is a 5-color cool palette: #517200 (Over the Hills), #FFB0E6 (Fresh Gum), #66003F (Merlot), #00A0A0 (Silken Jade), #62B255 (Lost Golfer). It mixes green, pink, red, turquoise tones and feels cool overall. The strongest text pairing is #FFB0E6 on #66003F with a contrast ratio of 7.70:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Over the Hills	rgb(81, 114, 0)	hsl(77, 100%, 22%)
Fresh Gum	rgb(255, 176, 230)	hsl(319, 100%, 85%)
Merlot	rgb(102, 0, 63)	hsl(323, 100%, 20%)
Silken Jade	rgb(0, 160, 160)	hsl(180, 100%, 31%)
Lost Golfer	rgb(98, 178, 85)	hsl(112, 38%, 52%)

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.70:1 Very good#FFB0E6 on #66003F
Aa7.70:1 Very good#66003F on #FFB0E6
Aa4.90:1 Good#66003F on #62B255
Aa4.90:1 Good#62B255 on #66003F
Aa3.99:1 Poor#66003F on #00A0A0
Aa3.99:1 Poor#00A0A0 on #66003F
Aa3.36:1 Poor#517200 on #FFB0E6
Aa3.36:1 Poor#FFB0E6 on #517200

Color blindness preview

CSS variables

/* Over the Hills to Lost Golfer — https://swatchly.xyz/palette/517200-ffb0e6-66003f-00a0a0-62b255 */
:root {
  --over-the-hills: #517200;
  --fresh-gum: #ffb0e6;
  --merlot: #66003f;
  --silken-jade: #00a0a0;
  --lost-golfer: #62b255;
}

Tailwind CSS v4

/* Over the Hills to Lost Golfer — https://swatchly.xyz/palette/517200-ffb0e6-66003f-00a0a0-62b255 */
@theme {
  --color-over-the-hills: #517200;
  --color-over-the-hills-50: #e8ffcb;
  --color-over-the-hills-100: #dbf5ba;
  --color-over-the-hills-200: #c4e29b;
  --color-over-the-hills-300: #aacb79;
  --color-over-the-hills-400: #88ab4f;
  --color-over-the-hills-500: #6b8e2d;
  --color-over-the-hills-600: #517200;
  --color-over-the-hills-700: #3f5a00;
  --color-over-the-hills-800: #314700;
  --color-over-the-hills-900: #253700;
  --color-over-the-hills-950: #162200;
  --color-fresh-gum: #ffb0e6;
  --color-fresh-gum-50: #ffe6f6;
  --color-fresh-gum-100: #ffd4f0;
  --color-fresh-gum-200: #ffb0e6;
  --color-fresh-gum-300: #e49fce;
  --color-fresh-gum-400: #c87fb2;
  --color-fresh-gum-500: #ad6598;
  --color-fresh-gum-600: #924d7e;
  --color-fresh-gum-700: #783a67;
  --color-fresh-gum-800: #622b53;
  --color-fresh-gum-900: #4d1f41;
  --color-fresh-gum-950: #321129;
  --color-merlot: #66003f;
  --color-merlot-50: #fff1f6;
  --color-merlot-100: #ffe2ee;
  --color-merlot-200: #ffc4dd;
  --color-merlot-300: #fca0ca;
  --color-merlot-400: #e07dac;
  --color-merlot-500: #c56191;
  --color-merlot-600: #a74777;
  --color-merlot-700: #8b3361;
  --color-merlot-800: #72234d;
  --color-merlot-900: #66003f;
  --color-merlot-950: #3e0b27;
  --color-silken-jade: #00a0a0;
  --color-silken-jade-50: #d9fffe;
  --color-silken-jade-100: #bafcfb;
  --color-silken-jade-200: #9bebea;
  --color-silken-jade-300: #78d8d7;
  --color-silken-jade-400: #45bbba;
  --color-silken-jade-500: #00a0a0;
  --color-silken-jade-600: #008181;
  --color-silken-jade-700: #006666;
  --color-silken-jade-800: #005050;
  --color-silken-jade-900: #003d3d;
  --color-silken-jade-950: #002626;
  --color-lost-golfer: #62b255;
  --color-lost-golfer-50: #dbffd5;
  --color-lost-golfer-100: #c5f9bc;
  --color-lost-golfer-200: #a9e79f;
  --color-lost-golfer-300: #8bd17f;
  --color-lost-golfer-400: #62b255;
  --color-lost-golfer-500: #47973a;
  --color-lost-golfer-600: #2d7c1f;
  --color-lost-golfer-700: #196409;
  --color-lost-golfer-800: #0d4f00;
  --color-lost-golfer-900: #083e00;
  --color-lost-golfer-950: #032800;
}