Atlas Cedar to Greenhorn color palette

5C9F9CAtlas Cedar 0F3033Elite Teal 435C43Muddy Olive 855B8AMuted Purple F8CFCDStrawberry Ripple B4CC98Greenhorn

Open in generator Export PNG, PDF, ASE…

About this palette

Atlas Cedar to Greenhorn is a 6-color cool palette: #5C9F9C (Atlas Cedar), #0F3033 (Elite Teal), #435C43 (Muddy Olive), #855B8A (Muted Purple), #F8CFCD (Strawberry Ripple), #B4CC98 (Greenhorn). It mixes turquoise, green, pink tones and feels cool overall. The strongest text pairing is #0F3033 on #F8CFCD with a contrast ratio of 9.93:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Atlas Cedar	rgb(92, 159, 156)	hsl(177, 27%, 49%)
Elite Teal	rgb(15, 48, 51)	hsl(185, 55%, 13%)
Muddy Olive	rgb(67, 92, 67)	hsl(120, 16%, 31%)
Muted Purple	rgb(133, 91, 138)	hsl(294, 21%, 45%)
Strawberry Ripple	rgb(248, 207, 205)	hsl(3, 75%, 89%)
Greenhorn	rgb(180, 204, 152)	hsl(88, 34%, 70%)

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.93:1 Very good#0F3033 on #F8CFCD
Aa9.93:1 Very good#F8CFCD on #0F3033
Aa8.07:1 Very good#0F3033 on #B4CC98
Aa8.07:1 Very good#B4CC98 on #0F3033
Aa5.19:1 Good#435C43 on #F8CFCD
Aa5.19:1 Good#F8CFCD on #435C43
Aa4.62:1 Good#5C9F9C on #0F3033
Aa4.62:1 Good#0F3033 on #5C9F9C

Color blindness preview

CSS variables

/* Atlas Cedar to Greenhorn — https://swatchly.xyz/palette/5c9f9c-0f3033-435c43-855b8a-f8cfcd-b4cc98 */
:root {
  --atlas-cedar: #5c9f9c;
  --elite-teal: #0f3033;
  --muddy-olive: #435c43;
  --muted-purple: #855b8a;
  --strawberry-ripple: #f8cfcd;
  --greenhorn: #b4cc98;
}

Tailwind CSS v4

/* Atlas Cedar to Greenhorn — https://swatchly.xyz/palette/5c9f9c-0f3033-435c43-855b8a-f8cfcd-b4cc98 */
@theme {
  --color-atlas-cedar: #5c9f9c;
  --color-atlas-cedar-50: #defffd;
  --color-atlas-cedar-100: #d1f9f6;
  --color-atlas-cedar-200: #bae8e6;
  --color-atlas-cedar-300: #9fd5d2;
  --color-atlas-cedar-400: #7ab8b5;
  --color-atlas-cedar-500: #5c9f9c;
  --color-atlas-cedar-600: #3f827f;
  --color-atlas-cedar-700: #276865;
  --color-atlas-cedar-800: #16514f;
  --color-atlas-cedar-900: #093e3d;
  --color-atlas-cedar-950: #022726;
  --color-elite-teal: #0f3033;
  --color-elite-teal-50: #e6fafb;
  --color-elite-teal-100: #daf0f2;
  --color-elite-teal-200: #c3dde0;
  --color-elite-teal-300: #a9c8ca;
  --color-elite-teal-400: #86a7aa;
  --color-elite-teal-500: #688a8d;
  --color-elite-teal-600: #4d6e71;
  --color-elite-teal-700: #385558;
  --color-elite-teal-800: #274042;
  --color-elite-teal-900: #0f3033;
  --color-elite-teal-950: #0e1b1d;
  --color-muddy-olive: #435c43;
  --color-muddy-olive-50: #eafaea;
  --color-muddy-olive-100: #dff1df;
  --color-muddy-olive-200: #c9dec8;
  --color-muddy-olive-300: #b0c8b0;
  --color-muddy-olive-400: #8fa98f;
  --color-muddy-olive-500: #738e73;
  --color-muddy-olive-600: #5a7359;
  --color-muddy-olive-700: #435c43;
  --color-muddy-olive-800: #344834;
  --color-muddy-olive-900: #263726;
  --color-muddy-olive-950: #162316;
  --color-muted-purple: #855b8a;
  --color-muted-purple-50: #fef0ff;
  --color-muted-purple-100: #fce1ff;
  --color-muted-purple-200: #edcaf1;
  --color-muted-purple-300: #d9b2de;
  --color-muted-purple-400: #bc91c1;
  --color-muted-purple-500: #a075a6;
  --color-muted-purple-600: #855b8a;
  --color-muted-purple-700: #6b4670;
  --color-muted-purple-800: #56355a;
  --color-muted-purple-900: #432746;
  --color-muted-purple-950: #2b172d;
  --color-strawberry-ripple: #f8cfcd;
  --color-strawberry-ripple-50: #fff4f4;
  --color-strawberry-ripple-100: #ffe7e6;
  --color-strawberry-ripple-200: #f8cfcd;
  --color-strawberry-ripple-300: #dcbab8;
  --color-strawberry-ripple-400: #be9997;
  --color-strawberry-ripple-500: #a27d7b;
  --color-strawberry-ripple-600: #856261;
  --color-strawberry-ripple-700: #6c4c4b;
  --color-strawberry-ripple-800: #553a39;
  --color-strawberry-ripple-900: #432c2b;
  --color-strawberry-ripple-950: #2b1a1a;
  --color-greenhorn: #b4cc98;
  --color-greenhorn-50: #eefcdf;
  --color-greenhorn-100: #e3f3d2;
  --color-greenhorn-200: #cee0ba;
  --color-greenhorn-300: #b4cc98;
  --color-greenhorn-400: #95ac7b;
  --color-greenhorn-500: #7a905f;
  --color-greenhorn-600: #607545;
  --color-greenhorn-700: #4a5d32;
  --color-greenhorn-800: #394923;
  --color-greenhorn-900: #2a3818;
  --color-greenhorn-950: #19230c;
}