Start generating

Porcelain Skin to Caramel Drizzle color palette

FFE8E9Porcelain Skin153A44Royal Neptune937147Tobacco LeafB7797DNipple2D4F60Shadow of NightD7A974Caramel Drizzle
Open in generator Export PNG, PDF, ASE…

About this palette

Porcelain Skin to Caramel Drizzle is a 6-color muted, vintage palette: #FFE8E9 (Porcelain Skin), #153A44 (Royal Neptune), #937147 (Tobacco Leaf), #B7797D (Nipple), #2D4F60 (Shadow of Night), #D7A974 (Caramel Drizzle). It mixes white, blue, brown, red, orange tones and feels warm overall. The strongest text pairing is #FFE8E9 on #153A44 with a contrast ratio of 10.44:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Porcelain Skinrgb(255, 232, 233)hsl(357, 100%, 95%)
Royal Neptunergb(21, 58, 68)hsl(193, 53%, 17%)
Tobacco Leafrgb(147, 113, 71)hsl(33, 35%, 43%)
Nipplergb(183, 121, 125)hsl(356, 30%, 60%)
Shadow of Nightrgb(45, 79, 96)hsl(200, 36%, 28%)
Caramel Drizzlergb(215, 169, 116)hsl(32, 55%, 65%)

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.

  • Aa10.44:1 Very good#FFE8E9 on #153A44
  • Aa10.44:1 Very good#153A44 on #FFE8E9
  • Aa7.49:1 Very good#FFE8E9 on #2D4F60
  • Aa7.49:1 Very good#2D4F60 on #FFE8E9
  • Aa5.71:1 Good#153A44 on #D7A974
  • Aa5.71:1 Good#D7A974 on #153A44
  • Aa4.09:1 Poor#2D4F60 on #D7A974
  • Aa4.09:1 Poor#D7A974 on #2D4F60

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Porcelain Skin to Caramel Drizzle — https://swatchly.xyz/palette/ffe8e9-153a44-937147-b7797d-2d4f60-d7a974 */
:root {
  --porcelain-skin: #ffe8e9;
  --royal-neptune: #153a44;
  --tobacco-leaf: #937147;
  --nipple: #b7797d;
  --shadow-of-night: #2d4f60;
  --caramel-drizzle: #d7a974;
}

Tailwind CSS v4

/* Porcelain Skin to Caramel Drizzle — https://swatchly.xyz/palette/ffe8e9-153a44-937147-b7797d-2d4f60-d7a974 */
@theme {
  --color-porcelain-skin: #ffe8e9;
  --color-porcelain-skin-50: #fff5f5;
  --color-porcelain-skin-100: #ffe8e9;
  --color-porcelain-skin-200: #e6d6d6;
  --color-porcelain-skin-300: #d0bebf;
  --color-porcelain-skin-400: #b29d9e;
  --color-porcelain-skin-500: #968182;
  --color-porcelain-skin-600: #7a6768;
  --color-porcelain-skin-700: #625051;
  --color-porcelain-skin-800: #4d3e3f;
  --color-porcelain-skin-900: #3c2f30;
  --color-porcelain-skin-950: #261d1d;
  --color-royal-neptune: #153a44;
  --color-royal-neptune-50: #e6f9ff;
  --color-royal-neptune-100: #d8f0f8;
  --color-royal-neptune-200: #c0dde6;
  --color-royal-neptune-300: #a6c7d2;
  --color-royal-neptune-400: #84a9b4;
  --color-royal-neptune-500: #688e99;
  --color-royal-neptune-600: #4f737e;
  --color-royal-neptune-700: #3b5c66;
  --color-royal-neptune-800: #2b4952;
  --color-royal-neptune-900: #153a44;
  --color-royal-neptune-950: #112429;
  --color-tobacco-leaf: #937147;
  --color-tobacco-leaf-50: #fff3e5;
  --color-tobacco-leaf-100: #ffead1;
  --color-tobacco-leaf-200: #f2d7b8;
  --color-tobacco-leaf-300: #e1c29e;
  --color-tobacco-leaf-400: #c6a47b;
  --color-tobacco-leaf-500: #ad8a60;
  --color-tobacco-leaf-600: #937147;
  --color-tobacco-leaf-700: #785831;
  --color-tobacco-leaf-800: #5f4420;
  --color-tobacco-leaf-900: #4a3314;
  --color-tobacco-leaf-950: #301f08;
  --color-nipple: #b7797d;
  --color-nipple-50: #fff3f3;
  --color-nipple-100: #ffe7e8;
  --color-nipple-200: #fecdcf;
  --color-nipple-300: #edb5b8;
  --color-nipple-400: #d19498;
  --color-nipple-500: #b7797d;
  --color-nipple-600: #995e62;
  --color-nipple-700: #7d474c;
  --color-nipple-800: #643539;
  --color-nipple-900: #4e272b;
  --color-nipple-950: #321619;
  --color-shadow-of-night: #2d4f60;
  --color-shadow-of-night-50: #eaf8ff;
  --color-shadow-of-night-100: #d8effc;
  --color-shadow-of-night-200: #c1dceb;
  --color-shadow-of-night-300: #a8c8d9;
  --color-shadow-of-night-400: #88aabd;
  --color-shadow-of-night-500: #6d90a3;
  --color-shadow-of-night-600: #547789;
  --color-shadow-of-night-700: #416172;
  --color-shadow-of-night-800: #2d4f60;
  --color-shadow-of-night-900: #243d49;
  --color-shadow-of-night-950: #142730;
  --color-caramel-drizzle: #d7a974;
  --color-caramel-drizzle-50: #ffead3;
  --color-caramel-drizzle-100: #fcdbb7;
  --color-caramel-drizzle-200: #eac499;
  --color-caramel-drizzle-300: #d7a974;
  --color-caramel-drizzle-400: #b88d59;
  --color-caramel-drizzle-500: #9f743f;
  --color-caramel-drizzle-600: #845c29;
  --color-caramel-drizzle-700: #6d4818;
  --color-caramel-drizzle-800: #59390c;
  --color-caramel-drizzle-900: #482c05;
  --color-caramel-drizzle-950: #2e1a01;
}

Similar palettes