Start generating

Old World to Lizard color palette

9EADD2Old World563D00PineappleC9D8FFIcy Plains202C48Eternal DarknessA87A23Chai Tea7A6738Lizard
Open in generator Export PNG, PDF, ASE…

About this palette

Old World to Lizard is a 6-color vintage palette: #9EADD2 (Old World), #563D00 (Pineapple), #C9D8FF (Icy Plains), #202C48 (Eternal Darkness), #A87A23 (Chai Tea), #7A6738 (Lizard). It mixes blue, brown, yellow tones and feels balanced overall. The strongest text pairing is #C9D8FF on #202C48 with a contrast ratio of 9.73:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Old Worldrgb(158, 173, 210)hsl(223, 37%, 72%)
Pineapplergb(86, 61, 0)hsl(43, 100%, 17%)
Icy Plainsrgb(201, 216, 255)hsl(223, 100%, 89%)
Eternal Darknessrgb(32, 44, 72)hsl(222, 38%, 20%)
Chai Teargb(168, 122, 35)hsl(39, 66%, 40%)
Lizardrgb(122, 103, 56)hsl(43, 37%, 35%)

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.73:1 Very good#C9D8FF on #202C48
  • Aa9.73:1 Very good#202C48 on #C9D8FF
  • Aa7.15:1 Very good#563D00 on #C9D8FF
  • Aa7.15:1 Very good#C9D8FF on #563D00
  • Aa6.18:1 Good#9EADD2 on #202C48
  • Aa6.18:1 Good#202C48 on #9EADD2
  • Aa4.54:1 Good#9EADD2 on #563D00
  • Aa4.54:1 Good#563D00 on #9EADD2

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Old World to Lizard — https://swatchly.xyz/palette/9eadd2-563d00-c9d8ff-202c48-a87a23-7a6738 */
:root {
  --old-world: #9eadd2;
  --pineapple: #563d00;
  --icy-plains: #c9d8ff;
  --eternal-darkness: #202c48;
  --chai-tea: #a87a23;
  --lizard: #7a6738;
}

Tailwind CSS v4

/* Old World to Lizard — https://swatchly.xyz/palette/9eadd2-563d00-c9d8ff-202c48-a87a23-7a6738 */
@theme {
  --color-old-world: #9eadd2;
  --color-old-world-50: #f7f9ff;
  --color-old-world-100: #ecf2ff;
  --color-old-world-200: #d5e0fb;
  --color-old-world-300: #becbea;
  --color-old-world-400: #9eadd2;
  --color-old-world-500: #818fb3;
  --color-old-world-600: #657295;
  --color-old-world-700: #4e5a79;
  --color-old-world-800: #3a4560;
  --color-old-world-900: #2b344a;
  --color-old-world-950: #191f2f;
  --color-pineapple: #563d00;
  --color-pineapple-50: #fff4e0;
  --color-pineapple-100: #fbe9c7;
  --color-pineapple-200: #ead5ad;
  --color-pineapple-300: #d6bd90;
  --color-pineapple-400: #b89d6b;
  --color-pineapple-500: #9d824d;
  --color-pineapple-600: #816734;
  --color-pineapple-700: #685121;
  --color-pineapple-800: #563d00;
  --color-pineapple-900: #412f0a;
  --color-pineapple-950: #291d03;
  --color-icy-plains: #c9d8ff;
  --color-icy-plains-50: #f2f6ff;
  --color-icy-plains-100: #e4ecff;
  --color-icy-plains-200: #c9d8ff;
  --color-icy-plains-300: #b5c1e2;
  --color-icy-plains-400: #94a2c5;
  --color-icy-plains-500: #7886a9;
  --color-icy-plains-600: #5f6b8d;
  --color-icy-plains-700: #495473;
  --color-icy-plains-800: #38415c;
  --color-icy-plains-900: #2a3248;
  --color-icy-plains-950: #191f2f;
  --color-eternal-darkness: #202c48;
  --color-eternal-darkness-50: #f1f5ff;
  --color-eternal-darkness-100: #e2ebff;
  --color-eternal-darkness-200: #cbd8f3;
  --color-eternal-darkness-300: #b3c1e0;
  --color-eternal-darkness-400: #91a0c1;
  --color-eternal-darkness-500: #7484a5;
  --color-eternal-darkness-600: #5a6887;
  --color-eternal-darkness-700: #44516c;
  --color-eternal-darkness-800: #323d55;
  --color-eternal-darkness-900: #202c48;
  --color-eternal-darkness-950: #141a28;
  --color-chai-tea: #a87a23;
  --color-chai-tea-50: #fff3e0;
  --color-chai-tea-100: #ffe6c1;
  --color-chai-tea-200: #f5d095;
  --color-chai-tea-300: #e1b874;
  --color-chai-tea-400: #c49648;
  --color-chai-tea-500: #a87a23;
  --color-chai-tea-600: #8b6100;
  --color-chai-tea-700: #6f4c00;
  --color-chai-tea-800: #573b00;
  --color-chai-tea-900: #442d00;
  --color-chai-tea-950: #2b1b00;
  --color-lizard: #7a6738;
  --color-lizard-50: #fff4db;
  --color-lizard-100: #f7eacb;
  --color-lizard-200: #e5d5b0;
  --color-lizard-300: #d0be94;
  --color-lizard-400: #b19e6f;
  --color-lizard-500: #958252;
  --color-lizard-600: #7a6738;
  --color-lizard-700: #625127;
  --color-lizard-800: #4e3f19;
  --color-lizard-900: #3c3010;
  --color-lizard-950: #261d06;
}

Similar palettes