Diverse Natural Human Complexions & Foundation Tones Category: Nature 12,100/mo searches

Skin Tones Palette — HEX Codes, Swatches & UI Palette

A rich, inclusive spectrum honoring the full diversity of global human skin tones. From deep espresso and warm bronze to golden almond and fair porcelain for character design, avatars, and cosmetics.

Deep Rich Tone

Deep Espresso

#3D2314

Medium Deep Tone

Chestnut Bronze

#79442B

Warm Golden Midtone

Honey Almond

#B87A54

Fair Warm Tone

Warm Sand Buff

#DEAB82

Fair Light Complexion

Porcelain Ivory

#F4D8C5

Open in Web Studio Color Wheel Tint & Shade Scale

Color Swatches & Technical Specifications

Exact color codes, luminance values, and WCAG contrast ratings for each swatch in the Skin Tones Palette.

Deep Espresso

Deep Rich Tone

HEX #3D2314

RGB rgb(61, 35, 20)

HSL hsl(22deg, 51%, 16%)

vs White: 14.5:1 (AAA) vs Black: 1.45:1 (Fail)

Chestnut Bronze

Medium Deep Tone

HEX #79442B

RGB rgb(121, 68, 43)

HSL hsl(19deg, 48%, 32%)

vs White: 7.85:1 (AAA) vs Black: 2.67:1 (Fail)

Honey Almond

Warm Golden Midtone

HEX #B87A54

RGB rgb(184, 122, 84)

HSL hsl(23deg, 41%, 53%)

vs White: 3.53:1 (AA Large) vs Black: 5.95:1 (AA)

Warm Sand Buff

Fair Warm Tone

HEX #DEAB82

RGB rgb(222, 171, 130)

HSL hsl(27deg, 58%, 69%)

vs White: 2.05:1 (Fail) vs Black: 10.25:1 (AAA)

Porcelain Ivory

Fair Light Complexion

HEX #F4D8C5

RGB rgb(244, 216, 197)

HSL hsl(24deg, 68%, 86%)

vs White: 1.36:1 (Fail) vs Black: 15.48:1 (AAA)

UI Design & Color Hierarchy Guide

An indispensable reference for digital illustrators, character designers, UI avatar generators, and beauty e-commerce shade selectors.

60% Dominant Base

Use the primary neutral/light swatch (Porcelain Ivory) for canvas backgrounds and card surfaces.

30% Structural Secondary

Apply midtones for navigation bars, card headers, borders, and secondary buttons.

10% Accent Callout

Reserve high-saturation focal colors for CTAs, conversion badges, and active state highlights.

WCAG 2.1 Accessibility & Contrast Matrix

Legibility ratings between palette elements and key backgrounds (Lightest: Porcelain Ivory | Darkest: Deep Espresso):

Swatch	Contrast vs Light Canvas	Contrast vs Dark Canvas
Deep Espresso (#3D2314)	10.69:1 AAA	1.0:1 Fail
Chestnut Bronze (#79442B)	5.79:1 AA	1.85:1 Fail
Honey Almond (#B87A54)	2.6:1 Fail	4.11:1 AA Large
Warm Sand Buff (#DEAB82)	1.51:1 Fail	7.08:1 AAA
Porcelain Ivory (#F4D8C5)	1.0:1 Fail	10.69:1 AAA

CSS Custom Properties & Design Tokens

Copy and paste production-ready tokens directly into your CSS stylesheet or Tailwind CSS configuration:

CSS Variables

:root {
  --color-1: #3D2314; /* Deep Espresso - Deep Rich Tone */
  --color-2: #79442B; /* Chestnut Bronze - Medium Deep Tone */
  --color-3: #B87A54; /* Honey Almond - Warm Golden Midtone */
  --color-4: #DEAB82; /* Warm Sand Buff - Fair Warm Tone */
  --color-5: #F4D8C5; /* Porcelain Ivory - Fair Light Complexion */
}

Tailwind CSS Config

{
  colors: {
    'palette-1': '#3D2314',
    'palette-2': '#79442B',
    'palette-3': '#B87A54',
    'palette-4': '#DEAB82',
    'palette-5': '#F4D8C5'
  }
}

Explore More Curated Color Palettes

Browse seasonal palettes, retro aesthetic color schemes, nature tones, and dark mode themes.

All Color Palettes Named Color Dictionary Interactive Color Wheel