Atlas Cedar to Veil of Cinder color palette

509DA1Atlas Cedar CCADACGarden Snail D9F4F4Let It Snow 214B4DMysterious Waters 755355Veil of Cinder

About this palette

Atlas Cedar to Veil of Cinder is a 5-color muted, vintage palette: #509DA1 (Atlas Cedar), #CCADAC (Garden Snail), #D9F4F4 (Let It Snow), #214B4D (Mysterious Waters), #755355 (Veil of Cinder). It mixes turquoise, red, white tones and feels balanced overall. The strongest text pairing is #D9F4F4 on #214B4D with a contrast ratio of 8.35:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Atlas Cedar	rgb(80, 157, 161)	hsl(183, 34%, 47%)
Garden Snail	rgb(204, 173, 172)	hsl(2, 24%, 74%)
Let It Snow	rgb(217, 244, 244)	hsl(180, 55%, 90%)
Mysterious Waters	rgb(33, 75, 77)	hsl(183, 40%, 22%)
Veil of Cinder	rgb(117, 83, 85)	hsl(356, 17%, 39%)

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.

Aa8.35:1 Very good#D9F4F4 on #214B4D
Aa8.35:1 Very good#214B4D on #D9F4F4
Aa5.82:1 Good#D9F4F4 on #755355
Aa5.82:1 Good#755355 on #D9F4F4
Aa4.66:1 Good#CCADAC on #214B4D
Aa4.66:1 Good#214B4D on #CCADAC
Aa3.25:1 Poor#CCADAC on #755355
Aa3.25:1 Poor#755355 on #CCADAC

Color blindness preview

CSS variables

/* Atlas Cedar to Veil of Cinder — https://swatchly.xyz/palette/509da1-ccadac-d9f4f4-214b4d-755355 */
:root {
  --atlas-cedar: #509da1;
  --garden-snail: #ccadac;
  --let-it-snow: #d9f4f4;
  --mysterious-waters: #214b4d;
  --veil-of-cinder: #755355;
}

Tailwind CSS v4

/* Atlas Cedar to Veil of Cinder — https://swatchly.xyz/palette/509da1-ccadac-d9f4f4-214b4d-755355 */
@theme {
  --color-atlas-cedar: #509da1;
  --color-atlas-cedar-50: #dffeff;
  --color-atlas-cedar-100: #ccf8fa;
  --color-atlas-cedar-200: #b2e8ea;
  --color-atlas-cedar-300: #96d4d7;
  --color-atlas-cedar-400: #70b7bb;
  --color-atlas-cedar-500: #509da1;
  --color-atlas-cedar-600: #328084;
  --color-atlas-cedar-700: #19676a;
  --color-atlas-cedar-800: #045154;
  --color-atlas-cedar-900: #003e41;
  --color-atlas-cedar-950: #002628;
  --color-garden-snail: #ccadac;
  --color-garden-snail-50: #fdeae9;
  --color-garden-snail-100: #f3dddd;
  --color-garden-snail-200: #e0c7c6;
  --color-garden-snail-300: #ccadac;
  --color-garden-snail-400: #ad908f;
  --color-garden-snail-500: #947776;
  --color-garden-snail-600: #7a5f5e;
  --color-garden-snail-700: #634b4a;
  --color-garden-snail-800: #503b3a;
  --color-garden-snail-900: #402d2d;
  --color-garden-snail-950: #281b1b;
  --color-let-it-snow: #d9f4f4;
  --color-let-it-snow-50: #ecfbfb;
  --color-let-it-snow-100: #d9f4f4;
  --color-let-it-snow-200: #cbdede;
  --color-let-it-snow-300: #b2c8c8;
  --color-let-it-snow-400: #90a8a8;
  --color-let-it-snow-500: #748c8d;
  --color-let-it-snow-600: #5a7172;
  --color-let-it-snow-700: #455a5a;
  --color-let-it-snow-800: #344647;
  --color-let-it-snow-900: #263636;
  --color-let-it-snow-950: #162222;
  --color-mysterious-waters: #214b4d;
  --color-mysterious-waters-50: #e2fbfc;
  --color-mysterious-waters-100: #d6f2f3;
  --color-mysterious-waters-200: #bedfe0;
  --color-mysterious-waters-300: #a4c9cb;
  --color-mysterious-waters-400: #81abad;
  --color-mysterious-waters-500: #659092;
  --color-mysterious-waters-600: #4c7577;
  --color-mysterious-waters-700: #385e5f;
  --color-mysterious-waters-800: #214b4d;
  --color-mysterious-waters-900: #1c393b;
  --color-mysterious-waters-950: #0f2425;
  --color-veil-of-cinder: #755355;
  --color-veil-of-cinder-50: #fff1f2;
  --color-veil-of-cinder-100: #fee4e5;
  --color-veil-of-cinder-200: #eed1d2;
  --color-veil-of-cinder-300: #dcbbbc;
  --color-veil-of-cinder-400: #c09b9d;
  --color-veil-of-cinder-500: #a68183;
  --color-veil-of-cinder-600: #8b686a;
  --color-veil-of-cinder-700: #755355;
  --color-veil-of-cinder-800: #5d4042;
  --color-veil-of-cinder-900: #483032;
  --color-veil-of-cinder-950: #2f1d1e;
}