Start generating

Total Eclipse to Nomad color palette

30343ETotal Eclipse625F4EIvy TopiaryC2D6CCAquatic Edge1F151CBats Cloak6F8979Aloe VeraA19985Nomad
Open in generator Export PNG, PDF, ASE…

About this palette

Total Eclipse to Nomad is a 6-color muted palette: #30343E (Total Eclipse), #625F4E (Ivy Topiary), #C2D6CC (Aquatic Edge), #1F151C (Bats Cloak), #6F8979 (Aloe Vera), #A19985 (Nomad). It mixes gray, black, green tones and feels cool overall. The strongest text pairing is #C2D6CC on #1F151C with a contrast ratio of 11.66:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Total Eclipsergb(48, 52, 62)hsl(223, 13%, 22%)
Ivy Topiaryrgb(98, 95, 78)hsl(51, 11%, 35%)
Aquatic Edgergb(194, 214, 204)hsl(150, 20%, 80%)
Bats Cloakrgb(31, 21, 28)hsl(318, 19%, 10%)
Aloe Verargb(111, 137, 121)hsl(143, 10%, 49%)
Nomadrgb(161, 153, 133)hsl(43, 13%, 58%)

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.

  • Aa11.66:1 Very good#C2D6CC on #1F151C
  • Aa11.66:1 Very good#1F151C on #C2D6CC
  • Aa8.17:1 Very good#30343E on #C2D6CC
  • Aa8.17:1 Very good#C2D6CC on #30343E
  • Aa6.27:1 Good#1F151C on #A19985
  • Aa6.27:1 Good#A19985 on #1F151C
  • Aa4.68:1 Good#1F151C on #6F8979
  • Aa4.68:1 Good#6F8979 on #1F151C

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Total Eclipse to Nomad — https://swatchly.xyz/palette/30343e-625f4e-c2d6cc-1f151c-6f8979-a19985 */
:root {
  --total-eclipse: #30343e;
  --ivy-topiary: #625f4e;
  --aquatic-edge: #c2d6cc;
  --bats-cloak: #1f151c;
  --aloe-vera: #6f8979;
  --nomad: #a19985;
}

Tailwind CSS v4

/* Total Eclipse to Nomad — https://swatchly.xyz/palette/30343e-625f4e-c2d6cc-1f151c-6f8979-a19985 */
@theme {
  --color-total-eclipse: #30343e;
  --color-total-eclipse-50: #f2f5fc;
  --color-total-eclipse-100: #e8ebf3;
  --color-total-eclipse-200: #d3d7e1;
  --color-total-eclipse-300: #bcc1cc;
  --color-total-eclipse-400: #9da2ad;
  --color-total-eclipse-500: #828792;
  --color-total-eclipse-600: #686c78;
  --color-total-eclipse-700: #525660;
  --color-total-eclipse-800: #40434c;
  --color-total-eclipse-900: #30343e;
  --color-total-eclipse-950: #1e2026;
  --color-ivy-topiary: #625f4e;
  --color-ivy-topiary-50: #f7f5eb;
  --color-ivy-topiary-100: #eeecdf;
  --color-ivy-topiary-200: #dcdacc;
  --color-ivy-topiary-300: #c8c5b5;
  --color-ivy-topiary-400: #aaa796;
  --color-ivy-topiary-500: #908d7b;
  --color-ivy-topiary-600: #777463;
  --color-ivy-topiary-700: #625f4e;
  --color-ivy-topiary-800: #4d4a3c;
  --color-ivy-topiary-900: #3b392d;
  --color-ivy-topiary-950: #25231b;
  --color-aquatic-edge: #c2d6cc;
  --color-aquatic-edge-50: #e8f4ee;
  --color-aquatic-edge-100: #dce9e2;
  --color-aquatic-edge-200: #c2d6cc;
  --color-aquatic-edge-300: #afc0b7;
  --color-aquatic-edge-400: #90a299;
  --color-aquatic-edge-500: #75887f;
  --color-aquatic-edge-600: #5d6f66;
  --color-aquatic-edge-700: #495951;
  --color-aquatic-edge-800: #38463f;
  --color-aquatic-edge-900: #2a3630;
  --color-aquatic-edge-950: #19221d;
  --color-bats-cloak: #1f151c;
  --color-bats-cloak-50: #fbf2f8;
  --color-bats-cloak-100: #f1e8ee;
  --color-bats-cloak-200: #dfd4db;
  --color-bats-cloak-300: #c9bdc5;
  --color-bats-cloak-400: #aa9da6;
  --color-bats-cloak-500: #8d8089;
  --color-bats-cloak-600: #71656d;
  --color-bats-cloak-700: #594e55;
  --color-bats-cloak-800: #433a40;
  --color-bats-cloak-900: #322a2f;
  --color-bats-cloak-950: #1f151c;
  --color-aloe-vera: #6f8979;
  --color-aloe-vera-50: #e9f9ef;
  --color-aloe-vera-100: #ddefe3;
  --color-aloe-vera-200: #c6dbce;
  --color-aloe-vera-300: #adc5b6;
  --color-aloe-vera-400: #8ba595;
  --color-aloe-vera-500: #6f8979;
  --color-aloe-vera-600: #566f60;
  --color-aloe-vera-700: #42594b;
  --color-aloe-vera-800: #32463a;
  --color-aloe-vera-900: #26362c;
  --color-aloe-vera-950: #16221b;
  --color-nomad: #a19985;
  --color-nomad-50: #f7f2e6;
  --color-nomad-100: #ece7d9;
  --color-nomad-200: #d8d1c1;
  --color-nomad-300: #c1baa7;
  --color-nomad-400: #a19985;
  --color-nomad-500: #877f6c;
  --color-nomad-600: #6e6654;
  --color-nomad-700: #585141;
  --color-nomad-800: #454031;
  --color-nomad-900: #363125;
  --color-nomad-950: #231f16;
}

Similar palettes