Autumn Gold to Clouded Pine color palette

816440Autumn Gold 9CEDD4Seafoam Splashes 172637Dark 563F1BPineapple E592B2Pomelo Red 5B8C72Clouded Pine

Open in generator Export PNG, PDF, ASE…

About this palette

Autumn Gold to Clouded Pine is a 6-color vintage palette: #816440 (Autumn Gold), #9CEDD4 (Seafoam Splashes), #172637 (Dark), #563F1B (Pineapple), #E592B2 (Pomelo Red), #5B8C72 (Clouded Pine). It mixes brown, turquoise, blue, pink, green tones and feels balanced overall. The strongest text pairing is #9CEDD4 on #172637 with a contrast ratio of 11.31:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Autumn Gold	rgb(129, 100, 64)	hsl(33, 34%, 38%)
Seafoam Splashes	rgb(156, 237, 212)	hsl(161, 69%, 77%)
Dark	rgb(23, 38, 55)	hsl(212, 41%, 15%)
Pineapple	rgb(86, 63, 27)	hsl(37, 52%, 22%)
Pomelo Red	rgb(229, 146, 178)	hsl(337, 61%, 74%)
Clouded Pine	rgb(91, 140, 114)	hsl(148, 21%, 45%)

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.31:1 Very good#9CEDD4 on #172637
Aa11.31:1 Very good#172637 on #9CEDD4
Aa7.29:1 Very good#9CEDD4 on #563F1B
Aa7.29:1 Very good#563F1B on #9CEDD4
Aa6.64:1 Good#172637 on #E592B2
Aa6.64:1 Good#E592B2 on #172637
Aa4.28:1 Poor#563F1B on #E592B2
Aa4.28:1 Poor#E592B2 on #563F1B

Color blindness preview

CSS variables

/* Autumn Gold to Clouded Pine — https://swatchly.xyz/palette/816440-9cedd4-172637-563f1b-e592b2-5b8c72 */
:root {
  --autumn-gold: #816440;
  --seafoam-splashes: #9cedd4;
  --dark: #172637;
  --pineapple: #563f1b;
  --pomelo-red: #e592b2;
  --clouded-pine: #5b8c72;
}

Tailwind CSS v4

/* Autumn Gold to Clouded Pine — https://swatchly.xyz/palette/816440-9cedd4-172637-563f1b-e592b2-5b8c72 */
@theme {
  --color-autumn-gold: #816440;
  --color-autumn-gold-50: #fff3e5;
  --color-autumn-gold-100: #fce7cf;
  --color-autumn-gold-200: #ebd2b6;
  --color-autumn-gold-300: #d6bb9a;
  --color-autumn-gold-400: #b89a76;
  --color-autumn-gold-500: #9d7f5a;
  --color-autumn-gold-600: #816440;
  --color-autumn-gold-700: #684e2e;
  --color-autumn-gold-800: #533c20;
  --color-autumn-gold-900: #412e16;
  --color-autumn-gold-950: #291c0a;
  --color-seafoam-splashes: #9cedd4;
  --color-seafoam-splashes-50: #e0fff4;
  --color-seafoam-splashes-100: #caf9ea;
  --color-seafoam-splashes-200: #9cedd4;
  --color-seafoam-splashes-300: #90d3be;
  --color-seafoam-splashes-400: #68b49e;
  --color-seafoam-splashes-500: #489882;
  --color-seafoam-splashes-600: #2a7c67;
  --color-seafoam-splashes-700: #126451;
  --color-seafoam-splashes-800: #004f3e;
  --color-seafoam-splashes-900: #003d30;
  --color-seafoam-splashes-950: #00261d;
  --color-dark: #172637;
  --color-dark-50: #eef6ff;
  --color-dark-100: #e0edfb;
  --color-dark-200: #cbd9ea;
  --color-dark-300: #b2c3d6;
  --color-dark-400: #92a3b8;
  --color-dark-500: #77899e;
  --color-dark-600: #5f7084;
  --color-dark-700: #4a5a6c;
  --color-dark-800: #3a4858;
  --color-dark-900: #2d3947;
  --color-dark-950: #172637;
  --color-pineapple: #563f1b;
  --color-pineapple-50: #fff3e3;
  --color-pineapple-100: #fae8d0;
  --color-pineapple-200: #e9d4b7;
  --color-pineapple-300: #d5bd9c;
  --color-pineapple-400: #b79e79;
  --color-pineapple-500: #9c825d;
  --color-pineapple-600: #816845;
  --color-pineapple-700: #685231;
  --color-pineapple-800: #563f1b;
  --color-pineapple-900: #413118;
  --color-pineapple-950: #2a1e0c;
  --color-pomelo-red: #e592b2;
  --color-pomelo-red-50: #fff8fa;
  --color-pomelo-red-100: #ffedf3;
  --color-pomelo-red-200: #ffd3e2;
  --color-pomelo-red-300: #fbb6cf;
  --color-pomelo-red-400: #e592b2;
  --color-pomelo-red-500: #c47594;
  --color-pomelo-red-600: #a45877;
  --color-pomelo-red-700: #86415e;
  --color-pomelo-red-800: #6b2e48;
  --color-pomelo-red-900: #532036;
  --color-pomelo-red-950: #351121;
  --color-clouded-pine: #5b8c72;
  --color-clouded-pine-50: #dffcec;
  --color-clouded-pine-100: #d1f2df;
  --color-clouded-pine-200: #b8dfc9;
  --color-clouded-pine-300: #9cc8b0;
  --color-clouded-pine-400: #78a98e;
  --color-clouded-pine-500: #5b8c72;
  --color-clouded-pine-600: #43725a;
  --color-clouded-pine-700: #315b46;
  --color-clouded-pine-800: #224835;
  --color-clouded-pine-900: #183829;
  --color-clouded-pine-950: #0c2418;
}