Named color

White

White is a light and neutral gray color with HEX #FFFFFF. According to Colors Encyclopedia, it has RGB 255, 255, 255, HSL 0, 0%, 100%, neutral temperature, and is useful for backgrounds, negative space, and high contrast.

#FFFFFF gray neutral light neutral

HEX #FFFFFF

RGB rgb(255, 255, 255)

HSL hsl(0 0% 100%)

CMYK cmyk(0, 0, 0, 0)

Luminance 1

Contrast Black 21:1White 1:1

CSS Utilities

--color-white: #FFFFFF;
.bg-white { background-color: #FFFFFF; }
.text-white { color: #FFFFFF; }

Open CSS utility pageReusable variables, classes, examples, and implementation notes

Luminance1

Black text21:1AA Pass

White text1:1AA Fail

hexCanonical HEX value

rgbRed, green, blue channels

hslHue, saturation, lightness

cmykApproximate print conversion

wcagAA and AAA contrast options

harmoniesMathematical harmony sets

variantsGenerated tone variants

nearestColorsKnowledge graph neighbors

Structured sections

Color systems

{
  "hex": "#FFFFFF",
  "rgb": [
    255,
    255,
    255
  ],
  "hsl": [
    0,
    0,
    100
  ],
  "cmyk": [
    0,
    0,
    0,
    0
  ],
  "luminance": 1,
  "contrast": {
    "black": 21,
    "white": 1
  }
}

WCAG

{
  "AA": [
    "#000000",
    "#1A1A1A",
    "#36454F"
  ],
  "AAA": [
    "#000000",
    "#1A1A1A",
    "#36454F"
  ]
}

Harmonies

{
  "complementary": "#FFFFFF",
  "analogous": [
    "#FFFFFF",
    "#FFFFFF"
  ],
  "triadic": [
    "#FFFFFF",
    "#FFFFFF"
  ],
  "tetradic": [
    "#FFFFFF",
    "#FFFFFF",
    "#FFFFFF"
  ],
  "splitComplementary": [
    "#FFFFFF",
    "#FFFFFF"
  ],
  "monochromatic": [
    "#FFFFFF",
    "#FFFFFF",
    "#D1D1D1"
  ]
}

Variants

{
  "light": "#FFFFFF",
  "dark": "#D1D1D1",
  "saturated": "#FFFFFF",
  "desaturated": "#FFFFFF",
  "pastel": "#FFFFFF",
  "neon": "#FFFFFF"
}

Pairings

{
  "best": [
    "#000000",
    "#FFFFFF",
    "#FFFFFF",
    "#FFFFFF"
  ],
  "avoid": [
    "#FFFFFF",
    "#FFFFFF"
  ],
  "neutral": [
    "#1A1A1A",
    "#F5F5F5",
    "#E8E8E4"
  ],
  "highContrast": [
    "#000000"
  ],
  "lowContrast": [
    "#FFFFFF",
    "#FFFFFF"
  ]
}

Knowledge graph

{
  "nearestColors": [
    "snow",
    "ghost-white",
    "mint-cream",
    "cool-white",
    "magnolia"
  ],
  "generatedPalettes": [
    "white"
  ],
  "generatedComparisons": [
    "snow-vs-white",
    "white-vs-ghost-white"
  ],
  "relatedFamilies": [
    "/colors/by-family/gray",
    "/colors/by-temperature/neutral",
    "/colors/by-tone/light",
    "/colors/by-tone/neutral"
  ],
  "relatedTools": [
    "/harmonies/white",
    "/wcag/white",
    "/css/colors/white",
    "/hex/ffffff"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/gray",
      "/colors/by-temperature/neutral",
      "/colors/by-tone/light",
      "/colors/by-tone/neutral"
    ],
    "narrower": [
      "/palettes/white"
    ],
    "related": [
      "/colors/snow",
      "/colors/ghost-white",
      "/colors/mint-cream",
      "/colors/cool-white",
      "/colors/magnolia",
      "/compare/snow-vs-white",
      "/compare/white-vs-ghost-white",
      "/harmonies/white",
      "/wcag/white",
      "/css/colors/white",
      "/hex/ffffff"
    ]
  }
}

Full JSON dataset

{
  "slug": "white",
  "name": "White",
  "hex": "#FFFFFF",
  "family": "gray",
  "temperature": "neutral",
  "tone": [
    "light",
    "neutral"
  ],
  "uses": [
    "backgrounds",
    "negative space",
    "high contrast"
  ],
  "psychology": {
    "associations": [
      "clarity",
      "space",
      "simplicity"
    ],
    "contexts": [
      "interfaces",
      "editorial design",
      "minimal brands"
    ],
    "avoidIn": [
      "low-contrast pale-on-white interfaces"
    ]
  },
  "aliases": [],
  "sourceType": "standard",
  "confidence": "high",
  "sourceUrl": "https://www.w3.org/TR/css-color-4/#named-colors",
  "reviewStatus": "auto",
  "editorialNotes": "Generated from CSS named color data and computed color-system properties.",
  "origin": {
    "type": "css",
    "notes": "Standard CSS named color."
  },
  "tags": [
    "gray",
    "neutral",
    "light",
    "backgrounds",
    "negative-space",
    "high-contrast",
    "clarity",
    "space",
    "simplicity"
  ],
  "popularity": 84,
  "rgb": [
    255,
    255,
    255
  ],
  "hsl": [
    0,
    0,
    100
  ],
  "cmyk": [
    0,
    0,
    0,
    0
  ],
  "luminance": 1,
  "contrast": {
    "black": 21,
    "white": 1
  },
  "harmonies": {
    "complementary": "#FFFFFF",
    "analogous": [
      "#FFFFFF",
      "#FFFFFF"
    ],
    "triadic": [
      "#FFFFFF",
      "#FFFFFF"
    ],
    "tetradic": [
      "#FFFFFF",
      "#FFFFFF",
      "#FFFFFF"
    ],
    "splitComplementary": [
      "#FFFFFF",
      "#FFFFFF"
    ],
    "monochromatic": [
      "#FFFFFF",
      "#FFFFFF",
      "#D1D1D1"
    ]
  },
  "variants": {
    "light": "#FFFFFF",
    "dark": "#D1D1D1",
    "saturated": "#FFFFFF",
    "desaturated": "#FFFFFF",
    "pastel": "#FFFFFF",
    "neon": "#FFFFFF"
  },
  "wcag": {
    "AA": [
      "#000000",
      "#1A1A1A",
      "#36454F"
    ],
    "AAA": [
      "#000000",
      "#1A1A1A",
      "#36454F"
    ]
  },
  "css": {
    "variable": "--color-white: #FFFFFF;",
    "utility": ".bg-white { background-color: #FFFFFF; }",
    "textUtility": ".text-white { color: #FFFFFF; }"
  },
  "nearestColors": [
    "snow",
    "ghost-white",
    "mint-cream",
    "cool-white",
    "magnolia"
  ],
  "generatedPalettes": [
    "white"
  ],
  "generatedComparisons": [
    "snow-vs-white",
    "white-vs-ghost-white"
  ],
  "relatedFamilies": [
    "/colors/by-family/gray",
    "/colors/by-temperature/neutral",
    "/colors/by-tone/light",
    "/colors/by-tone/neutral"
  ],
  "relatedTools": [
    "/harmonies/white",
    "/wcag/white",
    "/css/colors/white",
    "/hex/ffffff"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/gray",
      "/colors/by-temperature/neutral",
      "/colors/by-tone/light",
      "/colors/by-tone/neutral"
    ],
    "narrower": [
      "/palettes/white"
    ],
    "related": [
      "/colors/snow",
      "/colors/ghost-white",
      "/colors/mint-cream",
      "/colors/cool-white",
      "/colors/magnolia",
      "/compare/snow-vs-white",
      "/compare/white-vs-ghost-white",
      "/harmonies/white",
      "/wcag/white",
      "/css/colors/white",
      "/hex/ffffff"
    ]
  },
  "pairings": {
    "best": [
      "#000000",
      "#FFFFFF",
      "#FFFFFF",
      "#FFFFFF"
    ],
    "avoid": [
      "#FFFFFF",
      "#FFFFFF"
    ],
    "neutral": [
      "#1A1A1A",
      "#F5F5F5",
      "#E8E8E4"
    ],
    "highContrast": [
      "#000000"
    ],
    "lowContrast": [
      "#FFFFFF",
      "#FFFFFF"
    ]
  }
}

Color meaning and use

About White Color

White sits in the gray family with neutral temperature and light and neutral visual character. Standard CSS named color.

Its common associations include clarity, space, and simplicity, which makes it relevant for interfaces and editorial design. In design work, White is most useful for backgrounds, negative space, and high contrast, especially when paired with black text for stronger contrast.