Dark to Porcelain Skin color palette
About this palette
Dark to Porcelain Skin is a 6-color muted palette: #1F232E (Dark), #7A6863 (Acoustic Brown), #A3B89F (Salvia), #80907F (Mummy’s Tomb), #474F5E (Nightfall), #FCE7E7 (Porcelain Skin). It mixes gray, green, white tones and feels cool overall. The strongest text pairing is #1F232E on #FCE7E7 with a contrast ratio of 13.24:1, and 4 of its 15 color pairs pass WCAG AA for normal text.
Color codes
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Dark | rgb(31, 35, 46) | hsl(224, 19%, 15%) | |
| Acoustic Brown | rgb(122, 104, 99) | hsl(13, 10%, 43%) | |
| Salvia | rgb(163, 184, 159) | hsl(110, 15%, 67%) | |
| Mummy’s Tomb | rgb(128, 144, 127) | hsl(116, 7%, 53%) | |
| Nightfall | rgb(71, 79, 94) | hsl(219, 14%, 32%) | |
| Porcelain Skin | rgb(252, 231, 231) | hsl(0, 78%, 95%) |
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.24:1 #1F232E on #FCE7E7
- Aa13.24:1 #FCE7E7 on #1F232E
- Aa7.41:1 #1F232E on #A3B89F
- Aa7.41:1 #A3B89F on #1F232E
- Aa6.96:1 #474F5E on #FCE7E7
- Aa6.96:1 #FCE7E7 on #474F5E
- Aa4.64:1 #1F232E on #80907F
- Aa4.64:1 #80907F on #1F232E
Color blindness preview
- Protanopia
- Deuteranopia
- Tritanopia
- Achromatopsia
- Dog vision
CSS variables
/* Dark to Porcelain Skin — https://swatchly.xyz/palette/1f232e-7a6863-a3b89f-80907f-474f5e-fce7e7 */
:root {
--dark: #1f232e;
--acoustic-brown: #7a6863;
--salvia: #a3b89f;
--mummy-s-tomb: #80907f;
--nightfall: #474f5e;
--porcelain-skin: #fce7e7;
}
Tailwind CSS v4
/* Dark to Porcelain Skin — https://swatchly.xyz/palette/1f232e-7a6863-a3b89f-80907f-474f5e-fce7e7 */
@theme {
--color-dark: #1f232e;
--color-dark-50: #f2f5fd;
--color-dark-100: #e7ebf4;
--color-dark-200: #d3d7e2;
--color-dark-300: #bcc1cd;
--color-dark-400: #9ca1af;
--color-dark-500: #828795;
--color-dark-600: #686d7a;
--color-dark-700: #535763;
--color-dark-800: #414550;
--color-dark-900: #33363f;
--color-dark-950: #1f232e;
--color-acoustic-brown: #7a6863;
--color-acoustic-brown-50: #fef2ef;
--color-acoustic-brown-100: #f5e8e4;
--color-acoustic-brown-200: #e3d4d0;
--color-acoustic-brown-300: #cebdb8;
--color-acoustic-brown-400: #b09d98;
--color-acoustic-brown-500: #95827d;
--color-acoustic-brown-600: #7a6863;
--color-acoustic-brown-700: #62524d;
--color-acoustic-brown-800: #4d3f3b;
--color-acoustic-brown-900: #3c302d;
--color-acoustic-brown-950: #261d1b;
--color-salvia: #a3b89f;
--color-salvia-50: #f3fff1;
--color-salvia-100: #ebf8e9;
--color-salvia-200: #d9e7d6;
--color-salvia-300: #c3d4c0;
--color-salvia-400: #a3b89f;
--color-salvia-500: #859981;
--color-salvia-600: #687c65;
--color-salvia-700: #50624d;
--color-salvia-800: #3c4c39;
--color-salvia-900: #2c392a;
--color-salvia-950: #192217;
--color-mummy-s-tomb: #80907f;
--color-mummy-s-tomb-50: #f0f9ef;
--color-mummy-s-tomb-100: #e6f0e5;
--color-mummy-s-tomb-200: #d2ded1;
--color-mummy-s-tomb-300: #bbc9ba;
--color-mummy-s-tomb-400: #9bab9a;
--color-mummy-s-tomb-500: #80907f;
--color-mummy-s-tomb-600: #657464;
--color-mummy-s-tomb-700: #4f5d4e;
--color-mummy-s-tomb-800: #3c483b;
--color-mummy-s-tomb-900: #2d372d;
--color-mummy-s-tomb-950: #1b221a;
--color-nightfall: #474f5e;
--color-nightfall-50: #f0f5ff;
--color-nightfall-100: #e5ebf7;
--color-nightfall-200: #cfd6e4;
--color-nightfall-300: #b7bfce;
--color-nightfall-400: #959eaf;
--color-nightfall-500: #798292;
--color-nightfall-600: #5e6676;
--color-nightfall-700: #474f5e;
--color-nightfall-800: #373d49;
--color-nightfall-900: #2a2f39;
--color-nightfall-950: #191d24;
--color-porcelain-skin: #fce7e7;
--color-porcelain-skin-50: #fff3f3;
--color-porcelain-skin-100: #fce7e7;
--color-porcelain-skin-200: #e4d5d5;
--color-porcelain-skin-300: #cebdbd;
--color-porcelain-skin-400: #b09d9d;
--color-porcelain-skin-500: #948181;
--color-porcelain-skin-600: #796767;
--color-porcelain-skin-700: #615151;
--color-porcelain-skin-800: #4c3e3e;
--color-porcelain-skin-900: #3b2f30;
--color-porcelain-skin-950: #251d1d;
}
Similar palettes
- 2729324E526AFEE2D8C0968395C0AB6B8170Jaguar to Ecological
- F6E7E3B4B08A9C74634A5865192833Petal Pink to Oceanic Noir
- 4A4C6CE1DFF2B5AA7A819A8B3829307C5F6CIntergalactic to Chimaera
- 87697F809B855A4556A9BFB2221720D7E8DCSunshone Plum to Splashdown
- 1D1F28364234859887BBA19AF4E2DE595D72Inkwell Inception to Concrete Landscape
- 21302A554E6B80635573998AB7ABCCF0DECFMarshland to Buttercream
- 161E185545517462708C9F93B2D8C9FAE4F3Coco’s Black to Bunny Tail
- 2220296F6A7F938EA64A4659EEEEFFB2B1CCInk Black to Pastel Lilac