Colors Encyclopedia

Color tone

Neutral Colors

Neutral colors group 5 named swatches by visual character, including Charcoal, Black, and White. According to Colors Encyclopedia, each tone group links practical color names to HEX values, families, temperature labels, luminance, WCAG contrast, and matching color detail pages.

Neutral colors sit near gray, black, white, or low-saturation families. They are useful for typography, surfaces, borders, backgrounds, layout systems, and pairing with stronger accent colors.

Family groups
Gray 3Yellow 2
Explore
Filter in Color ExplorerNamed ColorsAll Families
5named colors
Neutraldominant temperature
2family groups

Neutral Signature Palette

Representative neutral colors selected from the highest-priority named swatches in this tone group.

CharcoalBlackWhiteCreamIvory

Popular Neutral Colors

The most useful neutral colors for palettes, interfaces, branding, accessibility checks, and design-system references.

Charcoal#36454Fgray · cool · dark, neutralBlack#000000gray · neutral · dark, neutralWhite#FFFFFFgray · neutral · light, neutralCream#FFFDD0yellow · warm · light, neutralIvory#FFFFF0yellow · warm · light, neutral

Machine-readable data

Machine-Readable Neutral Color Tone (JSON)

Structured neutral color tone data with family groups, signature colors, semantic groups, popular colors, WCAG metadata, and API links for AI ingestion.

AI-Ready Dataset v1.0.0
toneCanonical color tone slug
countNumber of named colors
familyGroupsIn-page family clusters
signatureColorsRepresentative tone palette
semanticGroupsAI-readable tone labels
popularColorsHighest-priority color records
Download JSON Open API
Structured sections
Tone
{
  "tone": "neutral",
  "label": "Neutral Colors",
  "count": 5,
  "dominantTemperature": "neutral"
}
Family groups
[
  {
    "family": "gray",
    "count": 3,
    "url": "https://www.colorsencyclopedia.com/colors/by-tone/neutral/"
  },
  {
    "family": "yellow",
    "count": 2,
    "url": "https://www.colorsencyclopedia.com/colors/by-tone/neutral/"
  }
]
Signature colors
[
  {
    "slug": "charcoal",
    "name": "Charcoal",
    "hex": "#36454F",
    "family": "gray",
    "temperature": "cool",
    "popularity": 88,
    "url": "https://www.colorsencyclopedia.com/colors/charcoal/"
  },
  {
    "slug": "black",
    "name": "Black",
    "hex": "#000000",
    "family": "gray",
    "temperature": "neutral",
    "popularity": 84,
    "url": "https://www.colorsencyclopedia.com/colors/black/"
  },
  {
    "slug": "white",
    "name": "White",
    "hex": "#FFFFFF",
    "family": "gray",
    "temperature": "neutral",
    "popularity": 84,
    "url": "https://www.colorsencyclopedia.com/colors/white/"
  },
  {
    "slug": "cream",
    "name": "Cream",
    "hex": "#FFFDD0",
    "family": "yellow",
    "temperature": "warm",
    "popularity": 73,
    "url": "https://www.colorsencyclopedia.com/colors/cream/"
  },
  {
    "slug": "ivory",
    "name": "Ivory",
    "hex": "#FFFFF0",
    "family": "yellow",
    "temperature": "warm",
    "popularity": 69,
    "url": "https://www.colorsencyclopedia.com/colors/ivory/"
  }
]
Semantic groups
[
  "neutral colors",
  "neutral color tone",
  "neutral gray colors",
  "neutral yellow colors",
  "neutral neutral colors",
  "cool neutral colors",
  "warm neutral colors"
]
Popular colors
[
  {
    "slug": "charcoal",
    "name": "Charcoal",
    "hex": "#36454F",
    "family": "gray",
    "temperature": "cool",
    "tone": [
      "dark",
      "neutral"
    ],
    "popularity": 88,
    "url": "https://www.colorsencyclopedia.com/colors/charcoal/",
    "apiUrl": "https://www.colorsencyclopedia.com/api/colors/charcoal.json"
  },
  {
    "slug": "black",
    "name": "Black",
    "hex": "#000000",
    "family": "gray",
    "temperature": "neutral",
    "tone": [
      "dark",
      "neutral"
    ],
    "popularity": 84,
    "url": "https://www.colorsencyclopedia.com/colors/black/",
    "apiUrl": "https://www.colorsencyclopedia.com/api/colors/black.json"
  },
  {
    "slug": "white",
    "name": "White",
    "hex": "#FFFFFF",
    "family": "gray",
    "temperature": "neutral",
    "tone": [
      "light",
      "neutral"
    ],
    "popularity": 84,
    "url": "https://www.colorsencyclopedia.com/colors/white/",
    "apiUrl": "https://www.colorsencyclopedia.com/api/colors/white.json"
  },
  {
    "slug": "cream",
    "name": "Cream",
    "hex": "#FFFDD0",
    "family": "yellow",
    "temperature": "warm",
    "tone": [
      "light",
      "neutral"
    ],
    "popularity": 73,
    "url": "https://www.colorsencyclopedia.com/colors/cream/",
    "apiUrl": "https://www.colorsencyclopedia.com/api/colors/cream.json"
  },
  {
    "slug": "ivory",
    "name": "Ivory",
    "hex": "#FFFFF0",
    "family": "yellow",
    "temperature": "warm",
    "tone": [
      "light",
      "neutral"
    ],
    "popularity": 69,
    "url": "https://www.colorsencyclopedia.com/colors/ivory/",
    "apiUrl": "https://www.colorsencyclopedia.com/api/colors/ivory.json"
  }
]
Full JSON dataset 
{
  "datasetVersion": "1.0.0",
  "tone": "neutral",
  "label": "Neutral Colors",
  "description": "Neutral colors sit near gray, black, white, or low-saturation families. They are useful for typography, surfaces, borders, backgrounds, layout systems, and pairing with stronger accent colors.",
  "url": "https://www.colorsencyclopedia.com/colors/by-tone/neutral/",
  "apiUrl": "https://www.colorsencyclopedia.com/api/colors/by-tone/neutral.json",
  "count": 5,
  "dominantTemperature": "neutral",
  "familyGroups": [
    {
      "family": "gray",
      "count": 3,
      "url": "https://www.colorsencyclopedia.com/colors/by-tone/neutral/"
    },
    {
      "family": "yellow",
      "count": 2,
      "url": "https://www.colorsencyclopedia.com/colors/by-tone/neutral/"
    }
  ],
  "temperatureGroups": [
    {
      "temperature": "neutral",
      "count": 2,
      "url": "https://www.colorsencyclopedia.com/colors/by-temperature/neutral/"
    },
    {
      "temperature": "warm",
      "count": 2,
      "url": "https://www.colorsencyclopedia.com/colors/by-temperature/warm/"
    },
    {
      "temperature": "cool",
      "count": 1,
      "url": "https://www.colorsencyclopedia.com/colors/by-temperature/cool/"
    }
  ],
  "semanticGroups": [
    "neutral colors",
    "neutral color tone",
    "neutral gray colors",
    "neutral yellow colors",
    "neutral neutral colors",
    "cool neutral colors",
    "warm neutral colors"
  ],
  "signatureColors": [
    {
      "slug": "charcoal",
      "name": "Charcoal",
      "hex": "#36454F",
      "family": "gray",
      "temperature": "cool",
      "popularity": 88,
      "url": "https://www.colorsencyclopedia.com/colors/charcoal/"
    },
    {
      "slug": "black",
      "name": "Black",
      "hex": "#000000",
      "family": "gray",
      "temperature": "neutral",
      "popularity": 84,
      "url": "https://www.colorsencyclopedia.com/colors/black/"
    },
    {
      "slug": "white",
      "name": "White",
      "hex": "#FFFFFF",
      "family": "gray",
      "temperature": "neutral",
      "popularity": 84,
      "url": "https://www.colorsencyclopedia.com/colors/white/"
    },
    {
      "slug": "cream",
      "name": "Cream",
      "hex": "#FFFDD0",
      "family": "yellow",
      "temperature": "warm",
      "popularity": 73,
      "url": "https://www.colorsencyclopedia.com/colors/cream/"
    },
    {
      "slug": "ivory",
      "name": "Ivory",
      "hex": "#FFFFF0",
      "family": "yellow",
      "temperature": "warm",
      "popularity": 69,
      "url": "https://www.colorsencyclopedia.com/colors/ivory/"
    }
  ],
  "popularColors": [
    {
      "slug": "charcoal",
      "name": "Charcoal",
      "hex": "#36454F",
      "family": "gray",
      "temperature": "cool",
      "tone": [
        "dark",
        "neutral"
      ],
      "popularity": 88,
      "url": "https://www.colorsencyclopedia.com/colors/charcoal/",
      "apiUrl": "https://www.colorsencyclopedia.com/api/colors/charcoal.json"
    },
    {
      "slug": "black",
      "name": "Black",
      "hex": "#000000",
      "family": "gray",
      "temperature": "neutral",
      "tone": [
        "dark",
        "neutral"
      ],
      "popularity": 84,
      "url": "https://www.colorsencyclopedia.com/colors/black/",
      "apiUrl": "https://www.colorsencyclopedia.com/api/colors/black.json"
    },
    {
      "slug": "white",
      "name": "White",
      "hex": "#FFFFFF",
      "family": "gray",
      "temperature": "neutral",
      "tone": [
        "light",
        "neutral"
      ],
      "popularity": 84,
      "url": "https://www.colorsencyclopedia.com/colors/white/",
      "apiUrl": "https://www.colorsencyclopedia.com/api/colors/white.json"
    },
    {
      "slug": "cream",
      "name": "Cream",
      "hex": "#FFFDD0",
      "family": "yellow",
      "temperature": "warm",
      "tone": [
        "light",
        "neutral"
      ],
      "popularity": 73,
      "url": "https://www.colorsencyclopedia.com/colors/cream/",
      "apiUrl": "https://www.colorsencyclopedia.com/api/colors/cream.json"
    },
    {
      "slug": "ivory",
      "name": "Ivory",
      "hex": "#FFFFF0",
      "family": "yellow",
      "temperature": "warm",
      "tone": [
        "light",
        "neutral"
      ],
      "popularity": 69,
      "url": "https://www.colorsencyclopedia.com/colors/ivory/",
      "apiUrl": "https://www.colorsencyclopedia.com/api/colors/ivory.json"
    }
  ],
  "colors": [
    {
      "slug": "charcoal",
      "name": "Charcoal",
      "hex": "#36454F",
      "rgb": [
        54,
        69,
        79
      ],
      "hsl": [
        204,
        19,
        26
      ],
      "cmyk": [
        32,
        13,
        0,
        69
      ],
      "family": "gray",
      "temperature": "cool",
      "tone": [
        "dark",
        "neutral"
      ],
      "popularity": 88,
      "luminance": 0.0561,
      "wcag": {
        "AA": [
          "#FFFFFF",
          "#F5F5F5"
        ],
        "AAA": [
          "#FFFFFF",
          "#F5F5F5"
        ]
      },
      "url": "https://www.colorsencyclopedia.com/colors/charcoal/",
      "apiUrl": "https://www.colorsencyclopedia.com/api/colors/charcoal.json"
    },
    {
      "slug": "black",
      "name": "Black",
      "hex": "#000000",
      "rgb": [
        0,
        0,
        0
      ],
      "hsl": [
        0,
        0,
        0
      ],
      "cmyk": [
        0,
        0,
        0,
        100
      ],
      "family": "gray",
      "temperature": "neutral",
      "tone": [
        "dark",
        "neutral"
      ],
      "popularity": 84,
      "luminance": 0,
      "wcag": {
        "AA": [
          "#FFFFFF",
          "#F5F5F5"
        ],
        "AAA": [
          "#FFFFFF",
          "#F5F5F5"
        ]
      },
      "url": "https://www.colorsencyclopedia.com/colors/black/",
      "apiUrl": "https://www.colorsencyclopedia.com/api/colors/black.json"
    },
    {
      "slug": "white",
      "name": "White",
      "hex": "#FFFFFF",
      "rgb": [
        255,
        255,
        255
      ],
      "hsl": [
        0,
        0,
        100
      ],
      "cmyk": [
        0,
        0,
        0,
        0
      ],
      "family": "gray",
      "temperature": "neutral",
      "tone": [
        "light",
        "neutral"
      ],
      "popularity": 84,
      "luminance": 1,
      "wcag": {
        "AA": [
          "#000000",
          "#1A1A1A",
          "#36454F"
        ],
        "AAA": [
          "#000000",
          "#1A1A1A",
          "#36454F"
        ]
      },
      "url": "https://www.colorsencyclopedia.com/colors/white/",
      "apiUrl": "https://www.colorsencyclopedia.com/api/colors/white.json"
    },
    {
      "slug": "cream",
      "name": "Cream",
      "hex": "#FFFDD0",
      "rgb": [
        255,
        253,
        208
      ],
      "hsl": [
        57,
        100,
        91
      ],
      "cmyk": [
        0,
        1,
        18,
        0
      ],
      "family": "yellow",
      "temperature": "warm",
      "tone": [
        "light",
        "neutral"
      ],
      "popularity": 73,
      "luminance": 0.9606,
      "wcag": {
        "AA": [
          "#000000",
          "#1A1A1A",
          "#36454F"
        ],
        "AAA": [
          "#000000",
          "#1A1A1A",
          "#36454F"
        ]
      },
      "url": "https://www.colorsencyclopedia.com/colors/cream/",
      "apiUrl": "https://www.colorsencyclopedia.com/api/colors/cream.json"
    },
    {
      "slug": "ivory",
      "name": "Ivory",
      "hex": "#FFFFF0",
      "rgb": [
        255,
        255,
        240
      ],
      "hsl": [
        60,
        100,
        97
      ],
      "cmyk": [
        0,
        0,
        6,
        0
      ],
      "family": "yellow",
      "temperature": "warm",
      "tone": [
        "light",
        "neutral"
      ],
      "popularity": 69,
      "luminance": 0.9907,
      "wcag": {
        "AA": [
          "#000000",
          "#1A1A1A",
          "#36454F"
        ],
        "AAA": [
          "#000000",
          "#1A1A1A",
          "#36454F"
        ]
      },
      "url": "https://www.colorsencyclopedia.com/colors/ivory/",
      "apiUrl": "https://www.colorsencyclopedia.com/api/colors/ivory.json"
    }
  ]
}
Dataset manifest Version 1.0.0 Build hash published in manifest Canonical page

Browse Neutral by Family

Open a family group to narrow this tone without scanning every swatch at once.

Neutral Gray Colors3 colors

Neutral gray colors combine neutral visual character with the gray family, making them useful for palettes, UI surfaces, brand accents, and color lookup.

Charcoalgray · popularity 88 #36454F Blackgray · popularity 84 #000000 Whitegray · popularity 84 #FFFFFF
Neutral Yellow Colors2 colors

Neutral yellow colors combine neutral visual character with the yellow family, making them useful for palettes, UI surfaces, brand accents, and color lookup.

Creamyellow · popularity 73 #FFFDD0 Ivoryyellow · popularity 69 #FFFFF0

Neutral Color Index

This tone group contains 5 editorial colors. Use the family groups above for the full in-page list, or continue in the filtered explorer when you need search, WCAG, luminance, saturation, and popularity controls.

Open filtered explorerOpen all named colors

Related Neutral Color Guides

Filter Neutral colorsUse search, WCAG, luminance, saturation, popularity, and family filters.Neutral tone JSONOpen the machine-readable neutral color tone dataset.Color familiesBrowse named colors by family, temperature, and tone.Neutral palettesBrowse palettes that can include neutral color values.Gray colorsExplore gray colors across every tone.Yellow colorsExplore yellow colors across every tone.Neutral colorsExplore neutral colors across families and tones.Cool colorsExplore cool colors across families and tones.Warm colorsExplore warm colors across families and tones.