Lazy Lizard to Mediaeval Blue Color Palette

About this palette

Lazy Lizard to Mediaeval Blue is a 4-color vintage palette: #A09A43 (Lazy Lizard), #F9D3C7 (Cinderella), #006C80 (Teal With It), #2D3860 (Mediaeval Blue). It mixes yellow, pink, blue tones and feels balanced overall. The strongest text pairing is #F9D3C7 on #2D3860 with a contrast ratio of 8.22:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lazy Lizard	rgb(160, 154, 67)	hsl(56, 41%, 45%)
Cinderella	rgb(249, 211, 199)	hsl(14, 81%, 88%)
Teal With It	rgb(0, 108, 128)	hsl(189, 100%, 25%)
Mediaeval Blue	rgb(45, 56, 96)	hsl(227, 36%, 28%)

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.22:1 Very good#F9D3C7 on #2D3860
Aa8.22:1 Very good#2D3860 on #F9D3C7
Aa4.39:1 Poor#F9D3C7 on #006C80
Aa4.39:1 Poor#006C80 on #F9D3C7
Aa3.90:1 Poor#A09A43 on #2D3860
Aa3.90:1 Poor#2D3860 on #A09A43

Color blindness preview

CSS variables

/* Lazy Lizard to Mediaeval Blue — https://swatchly.xyz/palette/a09a43-f9d3c7-006c80-2d3860 */
:root {
  --lazy-lizard: #a09a43;
  --cinderella: #f9d3c7;
  --teal-with-it: #006c80;
  --mediaeval-blue: #2d3860;
}

Tailwind CSS v4

/* Lazy Lizard to Mediaeval Blue — https://swatchly.xyz/palette/a09a43-f9d3c7-006c80-2d3860 */
@theme {
  --color-lazy-lizard: #a09a43;
  --color-lazy-lizard-50: #f7f4c4;
  --color-lazy-lizard-100: #ebe9b1;
  --color-lazy-lizard-200: #d7d391;
  --color-lazy-lizard-300: #c0bb6f;
  --color-lazy-lizard-400: #a09a43;
  --color-lazy-lizard-500: #878026;
  --color-lazy-lizard-600: #6e6804;
  --color-lazy-lizard-700: #585200;
  --color-lazy-lizard-800: #454100;
  --color-lazy-lizard-900: #363300;
  --color-lazy-lizard-950: #232000;
  --color-cinderella: #f9d3c7;
  --color-cinderella-50: #fff7f4;
  --color-cinderella-100: #ffeae4;
  --color-cinderella-200: #f9d3c7;
  --color-cinderella-300: #dcbdb3;
  --color-cinderella-400: #be9c91;
  --color-cinderella-500: #a27f75;
  --color-cinderella-600: #85655a;
  --color-cinderella-700: #6b4e45;
  --color-cinderella-800: #553b33;
  --color-cinderella-900: #422d26;
  --color-cinderella-950: #2a1b16;
  --color-teal-with-it: #006c80;
  --color-teal-with-it-50: #e5f9ff;
  --color-teal-with-it-100: #caf3ff;
  --color-teal-with-it-200: #aae5f5;
  --color-teal-with-it-300: #8ed1e4;
  --color-teal-with-it-400: #67b5c9;
  --color-teal-with-it-500: #479bb0;
  --color-teal-with-it-600: #298296;
  --color-teal-with-it-700: #006c80;
  --color-teal-with-it-800: #005565;
  --color-teal-with-it-900: #00414e;
  --color-teal-with-it-950: #002932;
  --color-mediaeval-blue: #2d3860;
  --color-mediaeval-blue-50: #f1f5ff;
  --color-mediaeval-blue-100: #e4ebff;
  --color-mediaeval-blue-200: #cad6fb;
  --color-mediaeval-blue-300: #b0bee8;
  --color-mediaeval-blue-400: #8e9dca;
  --color-mediaeval-blue-500: #7280ad;
  --color-mediaeval-blue-600: #57648f;
  --color-mediaeval-blue-700: #414d72;
  --color-mediaeval-blue-800: #2d3860;
  --color-mediaeval-blue-900: #242b46;
  --color-mediaeval-blue-950: #141a2c;
}