Porcelain Skin to Patina color palette

FFE6E9Porcelain Skin BE6671Watermelon Gelato 4E0008Lonely Chocolate 006E70Pine Scented Lagoon 61CCC3Patina

Open in generator Export PNG, PDF, ASE…

About this palette

Porcelain Skin to Patina is a 5-color vintage palette: #FFE6E9 (Porcelain Skin), #BE6671 (Watermelon Gelato), #4E0008 (Lonely Chocolate), #006E70 (Pine Scented Lagoon), #61CCC3 (Patina). It mixes white, red, brown, turquoise tones and feels balanced overall. The strongest text pairing is #FFE6E9 on #4E0008 with a contrast ratio of 13.37:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Porcelain Skin	rgb(255, 230, 233)	hsl(353, 100%, 95%)
Watermelon Gelato	rgb(190, 102, 113)	hsl(352, 40%, 57%)
Lonely Chocolate	rgb(78, 0, 8)	hsl(354, 100%, 15%)
Pine Scented Lagoon	rgb(0, 110, 112)	hsl(181, 100%, 22%)
Patina	rgb(97, 204, 195)	hsl(175, 51%, 59%)

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.

Aa13.37:1 Super#FFE6E9 on #4E0008
Aa13.37:1 Super#4E0008 on #FFE6E9
Aa8.24:1 Very good#4E0008 on #61CCC3
Aa8.24:1 Very good#61CCC3 on #4E0008
Aa5.12:1 Good#FFE6E9 on #006E70
Aa5.12:1 Good#006E70 on #FFE6E9
Aa4.01:1 Poor#BE6671 on #4E0008
Aa4.01:1 Poor#4E0008 on #BE6671

Color blindness preview

CSS variables

/* Porcelain Skin to Patina — https://swatchly.xyz/palette/ffe6e9-be6671-4e0008-006e70-61ccc3 */
:root {
  --porcelain-skin: #ffe6e9;
  --watermelon-gelato: #be6671;
  --lonely-chocolate: #4e0008;
  --pine-scented-lagoon: #006e70;
  --patina: #61ccc3;
}

Tailwind CSS v4

/* Porcelain Skin to Patina — https://swatchly.xyz/palette/ffe6e9-be6671-4e0008-006e70-61ccc3 */
@theme {
  --color-porcelain-skin: #ffe6e9;
  --color-porcelain-skin-50: #fff3f5;
  --color-porcelain-skin-100: #ffe6e9;
  --color-porcelain-skin-200: #e6d4d6;
  --color-porcelain-skin-300: #d1bcbf;
  --color-porcelain-skin-400: #b29c9f;
  --color-porcelain-skin-500: #978083;
  --color-porcelain-skin-600: #7b6669;
  --color-porcelain-skin-700: #635052;
  --color-porcelain-skin-800: #4e3d40;
  --color-porcelain-skin-900: #3d2f30;
  --color-porcelain-skin-950: #261c1e;
  --color-watermelon-gelato: #be6671;
  --color-watermelon-gelato-50: #fff1f2;
  --color-watermelon-gelato-100: #ffe3e4;
  --color-watermelon-gelato-200: #ffc5ca;
  --color-watermelon-gelato-300: #f7a6ae;
  --color-watermelon-gelato-400: #db838d;
  --color-watermelon-gelato-500: #be6671;
  --color-watermelon-gelato-600: #a04c58;
  --color-watermelon-gelato-700: #843844;
  --color-watermelon-gelato-800: #6a2933;
  --color-watermelon-gelato-900: #541d26;
  --color-watermelon-gelato-950: #370f16;
  --color-lonely-chocolate: #4e0008;
  --color-lonely-chocolate-50: #fff2f0;
  --color-lonely-chocolate-100: #ffe4e1;
  --color-lonely-chocolate-200: #ffc8c3;
  --color-lonely-chocolate-300: #f7aaa4;
  --color-lonely-chocolate-400: #db8782;
  --color-lonely-chocolate-500: #c06c68;
  --color-lonely-chocolate-600: #a35350;
  --color-lonely-chocolate-700: #893f3d;
  --color-lonely-chocolate-800: #71302e;
  --color-lonely-chocolate-900: #5d2422;
  --color-lonely-chocolate-950: #4e0008;
  --color-pine-scented-lagoon: #006e70;
  --color-pine-scented-lagoon-50: #d5ffff;
  --color-pine-scented-lagoon-100: #c4f6f7;
  --color-pine-scented-lagoon-200: #abe7e7;
  --color-pine-scented-lagoon-300: #8ed3d4;
  --color-pine-scented-lagoon-400: #67b7b8;
  --color-pine-scented-lagoon-500: #479d9f;
  --color-pine-scented-lagoon-600: #298486;
  --color-pine-scented-lagoon-700: #006e70;
  --color-pine-scented-lagoon-800: #005658;
  --color-pine-scented-lagoon-900: #004244;
  --color-pine-scented-lagoon-950: #002a2b;
  --color-patina: #61ccc3;
  --color-patina-50: #c4fdf7;
  --color-patina-100: #b2f3ed;
  --color-patina-200: #92e0d9;
  --color-patina-300: #61ccc3;
  --color-patina-400: #43ada5;
  --color-patina-500: #17938b;
  --color-patina-600: #007871;
  --color-patina-700: #00605a;
  --color-patina-800: #004c47;
  --color-patina-900: #003c38;
  --color-patina-950: #002523;
}