Dwarf Fortress to Over the Hills color palette

190500Dwarf Fortress 002900PCB Green 402700Secret Passage 564000Pineapple 486E0BOver the Hills

About this palette

Dwarf Fortress to Over the Hills is a 5-color dark, warm, earthy, gradient palette: #190500 (Dwarf Fortress), #002900 (PCB Green), #402700 (Secret Passage), #564000 (Pineapple), #486E0B (Over the Hills). It mixes black, green, brown tones and feels warm overall. The strongest text pairing is #190500 on #486E0B with a contrast ratio of 3.30:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dwarf Fortress	rgb(25, 5, 0)	hsl(12, 100%, 5%)
PCB Green	rgb(0, 41, 0)	hsl(120, 100%, 8%)
Secret Passage	rgb(64, 39, 0)	hsl(37, 100%, 13%)
Pineapple	rgb(86, 64, 0)	hsl(45, 100%, 17%)
Over the Hills	rgb(72, 110, 11)	hsl(83, 82%, 24%)

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.

Aa3.30:1 Poor#190500 on #486E0B
Aa3.30:1 Poor#486E0B on #190500

Color blindness preview

CSS variables

/* Dwarf Fortress to Over the Hills — https://swatchly.xyz/palette/190500-002900-402700-564000-486e0b */
:root {
  --dwarf-fortress: #190500;
  --pcb-green: #002900;
  --secret-passage: #402700;
  --pineapple: #564000;
  --over-the-hills: #486e0b;
}

Tailwind CSS v4

/* Dwarf Fortress to Over the Hills — https://swatchly.xyz/palette/190500-002900-402700-564000-486e0b */
@theme {
  --color-dwarf-fortress: #190500;
  --color-dwarf-fortress-50: #fff2ec;
  --color-dwarf-fortress-100: #fbe6dd;
  --color-dwarf-fortress-200: #ead2c7;
  --color-dwarf-fortress-300: #d6baae;
  --color-dwarf-fortress-400: #b89a8d;
  --color-dwarf-fortress-500: #987a6d;
  --color-dwarf-fortress-600: #785c50;
  --color-dwarf-fortress-700: #5a4338;
  --color-dwarf-fortress-800: #412e25;
  --color-dwarf-fortress-900: #2b1d17;
  --color-dwarf-fortress-950: #190500;
  --color-pcb-green: #002900;
  --color-pcb-green-50: #e4fee2;
  --color-pcb-green-100: #d8f5d5;
  --color-pcb-green-200: #c1e2bd;
  --color-pcb-green-300: #a7cda3;
  --color-pcb-green-400: #85af81;
  --color-pcb-green-500: #699365;
  --color-pcb-green-600: #50784c;
  --color-pcb-green-700: #3b6138;
  --color-pcb-green-800: #2c4c29;
  --color-pcb-green-900: #1f3b1d;
  --color-pcb-green-950: #002900;
  --color-secret-passage: #402700;
  --color-secret-passage-50: #fff3e5;
  --color-secret-passage-100: #fce8cf;
  --color-secret-passage-200: #ebd3b6;
  --color-secret-passage-300: #d7bc9b;
  --color-secret-passage-400: #b89b76;
  --color-secret-passage-500: #9c7e59;
  --color-secret-passage-600: #7f633f;
  --color-secret-passage-700: #654c2c;
  --color-secret-passage-800: #4e391d;
  --color-secret-passage-900: #402700;
  --color-secret-passage-950: #241808;
  --color-pineapple: #564000;
  --color-pineapple-50: #fff4dc;
  --color-pineapple-100: #faeac7;
  --color-pineapple-200: #e8d6ac;
  --color-pineapple-300: #d4bf90;
  --color-pineapple-400: #b79f6a;
  --color-pineapple-500: #9c844d;
  --color-pineapple-600: #806a34;
  --color-pineapple-700: #685321;
  --color-pineapple-800: #564000;
  --color-pineapple-900: #413109;
  --color-pineapple-950: #2a1e03;
  --color-over-the-hills: #486e0b;
  --color-over-the-hills-50: #e6ffcf;
  --color-over-the-hills-100: #d8f5bc;
  --color-over-the-hills-200: #bee19d;
  --color-over-the-hills-300: #a3c97b;
  --color-over-the-hills-400: #80a952;
  --color-over-the-hills-500: #638b31;
  --color-over-the-hills-600: #486e0b;
  --color-over-the-hills-700: #375800;
  --color-over-the-hills-800: #2a4500;
  --color-over-the-hills-900: #203500;
  --color-over-the-hills-950: #122100;
}