Ruins of Civilization to Aztec color palette

CBE1D2Ruins of Civilization 6C9881Yucca 525947Verdant Hush ACBAA2Meadow Morn 203936Aztec

About this palette

Ruins of Civilization to Aztec is a 5-color muted palette: #CBE1D2 (Ruins of Civilization), #6C9881 (Yucca), #525947 (Verdant Hush), #ACBAA2 (Meadow Morn), #203936 (Aztec). It mixes gray, green tones and feels cool overall. The strongest text pairing is #CBE1D2 on #203936 with a contrast ratio of 8.97:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ruins of Civilization	rgb(203, 225, 210)	hsl(139, 27%, 84%)
Yucca	rgb(108, 152, 129)	hsl(149, 18%, 51%)
Verdant Hush	rgb(82, 89, 71)	hsl(83, 11%, 31%)
Meadow Morn	rgb(172, 186, 162)	hsl(95, 15%, 68%)
Aztec	rgb(32, 57, 54)	hsl(173, 28%, 17%)

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.97:1 Very good#CBE1D2 on #203936
Aa8.97:1 Very good#203936 on #CBE1D2
Aa6.06:1 Good#ACBAA2 on #203936
Aa6.06:1 Good#203936 on #ACBAA2
Aa5.29:1 Good#CBE1D2 on #525947
Aa5.29:1 Good#525947 on #CBE1D2
Aa3.79:1 Poor#6C9881 on #203936
Aa3.79:1 Poor#203936 on #6C9881

Color blindness preview

CSS variables

/* Ruins of Civilization to Aztec — https://swatchly.xyz/palette/cbe1d2-6c9881-525947-acbaa2-203936 */
:root {
  --ruins-of-civilization: #cbe1d2;
  --yucca: #6c9881;
  --verdant-hush: #525947;
  --meadow-morn: #acbaa2;
  --aztec: #203936;
}

Tailwind CSS v4

/* Ruins of Civilization to Aztec — https://swatchly.xyz/palette/cbe1d2-6c9881-525947-acbaa2-203936 */
@theme {
  --color-ruins-of-civilization: #cbe1d2;
  --color-ruins-of-civilization-50: #effbf3;
  --color-ruins-of-civilization-100: #e4f2e8;
  --color-ruins-of-civilization-200: #cbe1d2;
  --color-ruins-of-civilization-300: #b7c9bc;
  --color-ruins-of-civilization-400: #95a99c;
  --color-ruins-of-civilization-500: #798d80;
  --color-ruins-of-civilization-600: #5f7265;
  --color-ruins-of-civilization-700: #495b4f;
  --color-ruins-of-civilization-800: #37473d;
  --color-ruins-of-civilization-900: #2a362e;
  --color-ruins-of-civilization-950: #19221c;
  --color-yucca: #6c9881;
  --color-yucca-50: #e4fdef;
  --color-yucca-100: #daf5e6;
  --color-yucca-200: #c3e4d2;
  --color-yucca-300: #aad0bb;
  --color-yucca-400: #88b29c;
  --color-yucca-500: #6c9881;
  --color-yucca-600: #517c66;
  --color-yucca-700: #3c634f;
  --color-yucca-800: #2b4e3c;
  --color-yucca-900: #1e3c2d;
  --color-yucca-950: #10251b;
  --color-verdant-hush: #525947;
  --color-verdant-hush-50: #f2f7eb;
  --color-verdant-hush-100: #e8eee0;
  --color-verdant-hush-200: #d4dacb;
  --color-verdant-hush-300: #bdc4b3;
  --color-verdant-hush-400: #9ea592;
  --color-verdant-hush-500: #828a77;
  --color-verdant-hush-600: #68705d;
  --color-verdant-hush-700: #525947;
  --color-verdant-hush-800: #404537;
  --color-verdant-hush-900: #313529;
  --color-verdant-hush-950: #1e2118;
  --color-meadow-morn: #acbaa2;
  --color-meadow-morn-50: #e9f2e3;
  --color-meadow-morn-100: #dde6d6;
  --color-meadow-morn-200: #c6d1be;
  --color-meadow-morn-300: #acbaa2;
  --color-meadow-morn-400: #8f9d86;
  --color-meadow-morn-500: #76836d;
  --color-meadow-morn-600: #5f6b56;
  --color-meadow-morn-700: #4b5643;
  --color-meadow-morn-800: #3b4433;
  --color-meadow-morn-900: #2e3627;
  --color-meadow-morn-950: #1c2117;
  --color-aztec: #203936;
  --color-aztec-50: #e9f9f7;
  --color-aztec-100: #def0ed;
  --color-aztec-200: #c7ddda;
  --color-aztec-300: #aec7c3;
  --color-aztec-400: #8da8a4;
  --color-aztec-500: #728d89;
  --color-aztec-600: #58726f;
  --color-aztec-700: #445b58;
  --color-aztec-800: #334845;
  --color-aztec-900: #203936;
  --color-aztec-950: #162321;
}