Dark Rum to Ruins of Civilization color palette

413825Dark Rum 5D543FVolcanic Island 668268Clouded Pine 82A264Buckingham Gardens BBC589Kiss a Frog C7DECBRuins of Civilization

Open in generator Export PNG, PDF, ASE…

About this palette

Dark Rum to Ruins of Civilization is a 6-color muted, cool, earthy, gradient palette: #413825 (Dark Rum), #5D543F (Volcanic Island), #668268 (Clouded Pine), #82A264 (Buckingham Gardens), #BBC589 (Kiss a Frog), #C7DECB (Ruins of Civilization). It mixes gray, green tones and feels cool overall. The strongest text pairing is #413825 on #C7DECB with a contrast ratio of 8.11:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Rum	rgb(65, 56, 37)	hsl(41, 27%, 20%)
Volcanic Island	rgb(93, 84, 63)	hsl(42, 19%, 31%)
Clouded Pine	rgb(102, 130, 104)	hsl(124, 12%, 45%)
Buckingham Gardens	rgb(130, 162, 100)	hsl(91, 25%, 51%)
Kiss a Frog	rgb(187, 197, 137)	hsl(70, 34%, 65%)
Ruins of Civilization	rgb(199, 222, 203)	hsl(130, 26%, 83%)

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.11:1 Very good#413825 on #C7DECB
Aa8.11:1 Very good#C7DECB on #413825
Aa6.31:1 Good#413825 on #BBC589
Aa6.31:1 Good#BBC589 on #413825
Aa5.25:1 Good#5D543F on #C7DECB
Aa5.25:1 Good#C7DECB on #5D543F
Aa4.09:1 Poor#5D543F on #BBC589
Aa4.09:1 Poor#BBC589 on #5D543F

Color blindness preview

CSS variables

/* Dark Rum to Ruins of Civilization — https://swatchly.xyz/palette/413825-5d543f-668268-82a264-bbc589-c7decb */
:root {
  --dark-rum: #413825;
  --volcanic-island: #5d543f;
  --clouded-pine: #668268;
  --buckingham-gardens: #82a264;
  --kiss-a-frog: #bbc589;
  --ruins-of-civilization: #c7decb;
}

Tailwind CSS v4

/* Dark Rum to Ruins of Civilization — https://swatchly.xyz/palette/413825-5d543f-668268-82a264-bbc589-c7decb */
@theme {
  --color-dark-rum: #413825;
  --color-dark-rum-50: #fbf5e8;
  --color-dark-rum-100: #f1eadc;
  --color-dark-rum-200: #dfd7c6;
  --color-dark-rum-300: #c9c0ad;
  --color-dark-rum-400: #aca28d;
  --color-dark-rum-500: #928872;
  --color-dark-rum-600: #786e5a;
  --color-dark-rum-700: #625946;
  --color-dark-rum-800: #4f4736;
  --color-dark-rum-900: #413825;
  --color-dark-rum-950: #292419;
  --color-volcanic-island: #5d543f;
  --color-volcanic-island-50: #faf5e7;
  --color-volcanic-island-100: #f1ebdc;
  --color-volcanic-island-200: #ded7c5;
  --color-volcanic-island-300: #c9c0ac;
  --color-volcanic-island-400: #aaa08a;
  --color-volcanic-island-500: #8f856f;
  --color-volcanic-island-600: #746b55;
  --color-volcanic-island-700: #5d543f;
  --color-volcanic-island-800: #494130;
  --color-volcanic-island-900: #383224;
  --color-volcanic-island-950: #231f14;
  --color-clouded-pine: #668268;
  --color-clouded-pine-50: #e7f8e8;
  --color-clouded-pine-100: #d9edda;
  --color-clouded-pine-200: #c0d8c2;
  --color-clouded-pine-300: #a6c0a7;
  --color-clouded-pine-400: #839f85;
  --color-clouded-pine-500: #668268;
  --color-clouded-pine-600: #4f6951;
  --color-clouded-pine-700: #3d543f;
  --color-clouded-pine-800: #2e4330;
  --color-clouded-pine-900: #233424;
  --color-clouded-pine-950: #152116;
  --color-buckingham-gardens: #82a264;
  --color-buckingham-gardens-50: #e5f9d3;
  --color-buckingham-gardens-100: #d7eec3;
  --color-buckingham-gardens-200: #bfdaa8;
  --color-buckingham-gardens-300: #a5c28a;
  --color-buckingham-gardens-400: #82a264;
  --color-buckingham-gardens-500: #69884b;
  --color-buckingham-gardens-600: #526f35;
  --color-buckingham-gardens-700: #405924;
  --color-buckingham-gardens-800: #314718;
  --color-buckingham-gardens-900: #25380f;
  --color-buckingham-gardens-950: #162406;
  --color-kiss-a-frog: #bbc589;
  --color-kiss-a-frog-50: #f2f8d6;
  --color-kiss-a-frog-100: #e7eec8;
  --color-kiss-a-frog-200: #d2dbad;
  --color-kiss-a-frog-300: #bbc589;
  --color-kiss-a-frog-400: #9ca66d;
  --color-kiss-a-frog-500: #828b51;
  --color-kiss-a-frog-600: #687038;
  --color-kiss-a-frog-700: #525926;
  --color-kiss-a-frog-800: #404618;
  --color-kiss-a-frog-900: #31360f;
  --color-kiss-a-frog-950: #1e2206;
  --color-ruins-of-civilization: #c7decb;
  --color-ruins-of-civilization-50: #ecf9ee;
  --color-ruins-of-civilization-100: #e1efe3;
  --color-ruins-of-civilization-200: #c7decb;
  --color-ruins-of-civilization-300: #b3c6b6;
  --color-ruins-of-civilization-400: #93a896;
  --color-ruins-of-civilization-500: #778c7b;
  --color-ruins-of-civilization-600: #5d7261;
  --color-ruins-of-civilization-700: #485b4c;
  --color-ruins-of-civilization-800: #37473a;
  --color-ruins-of-civilization-900: #29372c;
  --color-ruins-of-civilization-950: #18221a;
}