Start generating

Porcelain Skin to Darkest Forest color palette

FFE6E4Porcelain SkinDDA9F0Testosterose78A164Frankenstein007D85Jade Jewel005256Cape Verde1E3115Darkest Forest
Open in generator Export PNG, PDF, ASE…

About this palette

Porcelain Skin to Darkest Forest is a 6-color cool palette: #FFE6E4 (Porcelain Skin), #DDA9F0 (Testosterose), #78A164 (Frankenstein), #007D85 (Jade Jewel), #005256 (Cape Verde), #1E3115 (Darkest Forest). It mixes white, purple, green, turquoise tones and feels cool overall. The strongest text pairing is #FFE6E4 on #1E3115 with a contrast ratio of 11.75:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Porcelain Skinrgb(255, 230, 228)hsl(4, 100%, 95%)
Testosterosergb(221, 169, 240)hsl(284, 70%, 80%)
Frankensteinrgb(120, 161, 100)hsl(100, 24%, 51%)
Jade Jewelrgb(0, 125, 133)hsl(184, 100%, 26%)
Cape Verdergb(0, 82, 86)hsl(183, 100%, 17%)
Darkest Forestrgb(30, 49, 21)hsl(101, 40%, 14%)

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.75:1 Very good#FFE6E4 on #1E3115
  • Aa11.75:1 Very good#1E3115 on #FFE6E4
  • Aa7.56:1 Very good#FFE6E4 on #005256
  • Aa7.56:1 Very good#005256 on #FFE6E4
  • Aa7.31:1 Very good#DDA9F0 on #1E3115
  • Aa7.31:1 Very good#1E3115 on #DDA9F0
  • Aa4.70:1 Good#78A164 on #1E3115
  • Aa4.70:1 Good#1E3115 on #78A164

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Porcelain Skin to Darkest Forest — https://swatchly.xyz/palette/ffe6e4-dda9f0-78a164-007d85-005256-1e3115 */
:root {
  --porcelain-skin: #ffe6e4;
  --testosterose: #dda9f0;
  --frankenstein: #78a164;
  --jade-jewel: #007d85;
  --cape-verde: #005256;
  --darkest-forest: #1e3115;
}

Tailwind CSS v4

/* Porcelain Skin to Darkest Forest — https://swatchly.xyz/palette/ffe6e4-dda9f0-78a164-007d85-005256-1e3115 */
@theme {
  --color-porcelain-skin: #ffe6e4;
  --color-porcelain-skin-50: #fff3f2;
  --color-porcelain-skin-100: #ffe6e4;
  --color-porcelain-skin-200: #e6d4d2;
  --color-porcelain-skin-300: #d1bcbb;
  --color-porcelain-skin-400: #b29c9a;
  --color-porcelain-skin-500: #97807f;
  --color-porcelain-skin-600: #7b6665;
  --color-porcelain-skin-700: #63504f;
  --color-porcelain-skin-800: #4e3e3d;
  --color-porcelain-skin-900: #3d2f2e;
  --color-porcelain-skin-950: #261c1c;
  --color-testosterose: #dda9f0;
  --color-testosterose-50: #fbf0ff;
  --color-testosterose-100: #f7e2ff;
  --color-testosterose-200: #edc6fc;
  --color-testosterose-300: #dda9f0;
  --color-testosterose-400: #bc8bcd;
  --color-testosterose-500: #a06fb2;
  --color-testosterose-600: #855595;
  --color-testosterose-700: #6c417b;
  --color-testosterose-800: #563063;
  --color-testosterose-900: #43234f;
  --color-testosterose-950: #2b1433;
  --color-frankenstein: #78a164;
  --color-frankenstein-50: #ebffe1;
  --color-frankenstein-100: #dff9d4;
  --color-frankenstein-200: #cbeabd;
  --color-frankenstein-300: #b3d7a3;
  --color-frankenstein-400: #93ba81;
  --color-frankenstein-500: #78a164;
  --color-frankenstein-600: #5c8348;
  --color-frankenstein-700: #456932;
  --color-frankenstein-800: #325221;
  --color-frankenstein-900: #243f15;
  --color-frankenstein-950: #142709;
  --color-jade-jewel: #007d85;
  --color-jade-jewel-50: #dcfcff;
  --color-jade-jewel-100: #c0f7fc;
  --color-jade-jewel-200: #a3e6ec;
  --color-jade-jewel-300: #83d1d8;
  --color-jade-jewel-400: #58b3bb;
  --color-jade-jewel-500: #3398a0;
  --color-jade-jewel-600: #007d85;
  --color-jade-jewel-700: #00636a;
  --color-jade-jewel-800: #004e53;
  --color-jade-jewel-900: #003c40;
  --color-jade-jewel-950: #002528;
  --color-cape-verde: #005256;
  --color-cape-verde-50: #dafdff;
  --color-cape-verde-100: #ccf4f6;
  --color-cape-verde-200: #b1e2e5;
  --color-cape-verde-300: #96ced1;
  --color-cape-verde-400: #71b0b4;
  --color-cape-verde-500: #549699;
  --color-cape-verde-600: #397b7f;
  --color-cape-verde-700: #256468;
  --color-cape-verde-800: #005256;
  --color-cape-verde-900: #0a3f42;
  --color-cape-verde-950: #03282a;
  --color-darkest-forest: #1e3115;
  --color-darkest-forest-50: #ecfae7;
  --color-darkest-forest-100: #e1f1db;
  --color-darkest-forest-200: #ccdec4;
  --color-darkest-forest-300: #b4c8ab;
  --color-darkest-forest-400: #91a888;
  --color-darkest-forest-500: #748b6b;
  --color-darkest-forest-600: #596f50;
  --color-darkest-forest-700: #43563b;
  --color-darkest-forest-800: #31412a;
  --color-darkest-forest-900: #1e3115;
  --color-darkest-forest-950: #131c0f;
}

Similar palettes