Start generating

Darkest Forest to York Plum color palette

2A381BDarkest Forest976348Vintage Copper65A0B0SeasideBBE8FFBreaking the Ice385C21PineD1BEE0York Plum
Open in generator Export PNG, PDF, ASE…

About this palette

Darkest Forest to York Plum is a 6-color cool palette: #2A381B (Darkest Forest), #976348 (Vintage Copper), #65A0B0 (Seaside), #BBE8FF (Breaking the Ice), #385C21 (Pine), #D1BEE0 (York Plum). It mixes green, brown, blue, purple tones and feels cool overall. The strongest text pairing is #2A381B on #BBE8FF with a contrast ratio of 9.58:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Darkest Forestrgb(42, 56, 27)hsl(89, 35%, 16%)
Vintage Copperrgb(151, 99, 72)hsl(21, 35%, 44%)
Seasidergb(101, 160, 176)hsl(193, 32%, 54%)
Breaking the Icergb(187, 232, 255)hsl(200, 100%, 87%)
Pinergb(56, 92, 33)hsl(97, 47%, 25%)
York Plumrgb(209, 190, 224)hsl(274, 35%, 81%)

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.

  • Aa9.58:1 Very good#2A381B on #BBE8FF
  • Aa9.58:1 Very good#BBE8FF on #2A381B
  • Aa7.23:1 Very good#2A381B on #D1BEE0
  • Aa7.23:1 Very good#D1BEE0 on #2A381B
  • Aa5.92:1 Good#BBE8FF on #385C21
  • Aa5.92:1 Good#385C21 on #BBE8FF
  • Aa4.47:1 Poor#385C21 on #D1BEE0
  • Aa4.47:1 Poor#D1BEE0 on #385C21

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Darkest Forest to York Plum — https://swatchly.xyz/palette/2a381b-976348-65a0b0-bbe8ff-385c21-d1bee0 */
:root {
  --darkest-forest: #2a381b;
  --vintage-copper: #976348;
  --seaside: #65a0b0;
  --breaking-the-ice: #bbe8ff;
  --pine: #385c21;
  --york-plum: #d1bee0;
}

Tailwind CSS v4

/* Darkest Forest to York Plum — https://swatchly.xyz/palette/2a381b-976348-65a0b0-bbe8ff-385c21-d1bee0 */
@theme {
  --color-darkest-forest: #2a381b;
  --color-darkest-forest-50: #eff9e6;
  --color-darkest-forest-100: #e4f0da;
  --color-darkest-forest-200: #cfddc3;
  --color-darkest-forest-300: #b8c7aa;
  --color-darkest-forest-400: #97a888;
  --color-darkest-forest-500: #7c8d6c;
  --color-darkest-forest-600: #627253;
  --color-darkest-forest-700: #4c5b3f;
  --color-darkest-forest-800: #3b472e;
  --color-darkest-forest-900: #2a381b;
  --color-darkest-forest-950: #1b2213;
  --color-vintage-copper: #976348;
  --color-vintage-copper-50: #fff2ec;
  --color-vintage-copper-100: #ffe7db;
  --color-vintage-copper-200: #facfb9;
  --color-vintage-copper-300: #e9b89f;
  --color-vintage-copper-400: #cd987d;
  --color-vintage-copper-500: #b27d61;
  --color-vintage-copper-600: #976348;
  --color-vintage-copper-700: #7b4c34;
  --color-vintage-copper-800: #633a24;
  --color-vintage-copper-900: #4e2b18;
  --color-vintage-copper-950: #32190c;
  --color-seaside: #65a0b0;
  --color-seaside-50: #daf7ff;
  --color-seaside-100: #c5edf8;
  --color-seaside-200: #aad8e5;
  --color-seaside-300: #8cc1cf;
  --color-seaside-400: #65a0b0;
  --color-seaside-500: #4c8696;
  --color-seaside-600: #356d7c;
  --color-seaside-700: #235865;
  --color-seaside-800: #164651;
  --color-seaside-900: #0d3741;
  --color-seaside-950: #05242b;
  --color-breaking-the-ice: #bbe8ff;
  --color-breaking-the-ice-50: #f6fcff;
  --color-breaking-the-ice-100: #e4f6ff;
  --color-breaking-the-ice-200: #bbe8ff;
  --color-breaking-the-ice-300: #aacee1;
  --color-breaking-the-ice-400: #85aec2;
  --color-breaking-the-ice-500: #6791a6;
  --color-breaking-the-ice-600: #4c7589;
  --color-breaking-the-ice-700: #365c6e;
  --color-breaking-the-ice-800: #264757;
  --color-breaking-the-ice-900: #1a3744;
  --color-breaking-the-ice-950: #0e222c;
  --color-pine: #385c21;
  --color-pine-50: #e6feda;
  --color-pine-100: #daf5cd;
  --color-pine-200: #c2e2b2;
  --color-pine-300: #a8cc95;
  --color-pine-400: #86ac71;
  --color-pine-500: #699053;
  --color-pine-600: #4f743a;
  --color-pine-700: #385c21;
  --color-pine-800: #2b481a;
  --color-pine-900: #203710;
  --color-pine-950: #122307;
  --color-york-plum: #d1bee0;
  --color-york-plum-50: #fbf6ff;
  --color-york-plum-100: #f5eaff;
  --color-york-plum-200: #e4d6ef;
  --color-york-plum-300: #d1bee0;
  --color-york-plum-400: #b09ebd;
  --color-york-plum-500: #9382a1;
  --color-york-plum-600: #786685;
  --color-york-plum-700: #5f506b;
  --color-york-plum-800: #4a3d55;
  --color-york-plum-900: #392d41;
  --color-york-plum-950: #241b2a;
}

Similar palettes