Green Not Found to Puffy Cloud Color Palette

About this palette

Green Not Found to Puffy Cloud is a 5-color warm, earthy, vintage palette: #424300 (Green Not Found), #1C1F00 (Midnight Pines), #D0B643 (Old Gold), #5F65CE (Savoy Blue), #DDE1FF (Puffy Cloud). It mixes brown, green, yellow, purple tones and feels warm overall. The strongest text pairing is #1C1F00 on #DDE1FF with a contrast ratio of 13.08:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Green Not Found	rgb(66, 67, 0)	hsl(61, 100%, 13%)
Midnight Pines	rgb(28, 31, 0)	hsl(66, 100%, 6%)
Old Gold	rgb(208, 182, 67)	hsl(49, 60%, 54%)
Savoy Blue	rgb(95, 101, 206)	hsl(237, 53%, 59%)
Puffy Cloud	rgb(221, 225, 255)	hsl(233, 100%, 93%)

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.

Aa13.08:1 Super#1C1F00 on #DDE1FF
Aa13.08:1 Super#DDE1FF on #1C1F00
Aa8.39:1 Very good#1C1F00 on #D0B643
Aa8.39:1 Very good#D0B643 on #1C1F00
Aa8.01:1 Very good#424300 on #DDE1FF
Aa8.01:1 Very good#DDE1FF on #424300
Aa5.14:1 Good#424300 on #D0B643
Aa5.14:1 Good#D0B643 on #424300

Color blindness preview

CSS variables

/* Green Not Found to Puffy Cloud — https://swatchly.xyz/palette/424300-1c1f00-d0b643-5f65ce-dde1ff */
:root {
  --green-not-found: #424300;
  --midnight-pines: #1c1f00;
  --old-gold: #d0b643;
  --savoy-blue: #5f65ce;
  --puffy-cloud: #dde1ff;
}

Tailwind CSS v4

/* Green Not Found to Puffy Cloud — https://swatchly.xyz/palette/424300-1c1f00-d0b643-5f65ce-dde1ff */
@theme {
  --color-green-not-found: #424300;
  --color-green-not-found-50: #f6f9d7;
  --color-green-not-found-100: #ecefc9;
  --color-green-not-found-200: #d9dcae;
  --color-green-not-found-300: #c2c591;
  --color-green-not-found-400: #a2a56c;
  --color-green-not-found-500: #87894e;
  --color-green-not-found-600: #6c6e35;
  --color-green-not-found-700: #555721;
  --color-green-not-found-800: #424300;
  --color-green-not-found-900: #32330a;
  --color-green-not-found-950: #1f1f04;
  --color-midnight-pines: #1c1f00;
  --color-midnight-pines-50: #f4f8e2;
  --color-midnight-pines-100: #eaeed6;
  --color-midnight-pines-200: #d6dbbf;
  --color-midnight-pines-300: #c0c5a5;
  --color-midnight-pines-400: #a0a682;
  --color-midnight-pines-500: #848a66;
  --color-midnight-pines-600: #696e4c;
  --color-midnight-pines-700: #535738;
  --color-midnight-pines-800: #3f4328;
  --color-midnight-pines-900: #30331c;
  --color-midnight-pines-950: #1c1f00;
  --color-old-gold: #d0b643;
  --color-old-gold-50: #fff1b4;
  --color-old-gold-100: #f5e59f;
  --color-old-gold-200: #e3cf7c;
  --color-old-gold-300: #d0b643;
  --color-old-gold-400: #b19821;
  --color-old-gold-500: #967f00;
  --color-old-gold-600: #796600;
  --color-old-gold-700: #615100;
  --color-old-gold-800: #4d4000;
  --color-old-gold-900: #3d3200;
  --color-old-gold-950: #261f00;
  --color-savoy-blue: #5f65ce;
  --color-savoy-blue-50: #f2f4ff;
  --color-savoy-blue-100: #e8ebff;
  --color-savoy-blue-200: #d1d8ff;
  --color-savoy-blue-300: #b6c0ff;
  --color-savoy-blue-400: #929dff;
  --color-savoy-blue-500: #7780eb;
  --color-savoy-blue-600: #5f65ce;
  --color-savoy-blue-700: #4a4dad;
  --color-savoy-blue-800: #38398f;
  --color-savoy-blue-900: #2a2a73;
  --color-savoy-blue-950: #19184d;
  --color-puffy-cloud: #dde1ff;
  --color-puffy-cloud-50: #ebedff;
  --color-puffy-cloud-100: #dde1ff;
  --color-puffy-cloud-200: #cccfe6;
  --color-puffy-cloud-300: #b7bad3;
  --color-puffy-cloud-400: #989cb7;
  --color-puffy-cloud-500: #7e829d;
  --color-puffy-cloud-600: #656982;
  --color-puffy-cloud-700: #51536a;
  --color-puffy-cloud-800: #3e4155;
  --color-puffy-cloud-900: #2f3142;
  --color-puffy-cloud-950: #1d1e2a;
}