Colors Encyclopedia

Named color

White

White color #FFFFFF: RGB 255, 255, 255 and HSL 0°, 0%, 100%. Explore its neutral gray profile, contrast, CSS, palettes and harmonies.

#FFFFFF gray neutral lightneutral
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

Use this color

Create with White

Open a professional color tool with #FFFFFF already applied. Each configuration stays canonical to the tool and can be adjusted or shared.

All color tools
Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with White and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →

CSS Utilities

--color-white: #FFFFFF;
.bg-white { background-color: #FFFFFF; }
.text-white { color: #FFFFFF; }
Open CSS utility pageReusable variables, classes, examples, and implementation notes

Color history, meaning and use · Editorially reviewed

About White Color

White, like black, changes meaning across light, objects, and code. Additive displays create a white sensation by combining emitted channels, while papers, paints, textiles, and natural surfaces return and scatter incident light in materially different ways. The CSS keyword white fixes the digital case at #FFFFFF without claiming that every physical white is identical.

White is the default canvas of much web publishing because it supports familiar reading patterns and high contrast with dark text. Yet large white fields can produce glare, thin gray boundaries may disappear, and transparency can reveal an unexpected underlying color. Interfaces should specify surface hierarchy, test actual composites, and avoid treating whiteness as a substitute for spacing or structure.

This page documents the CSS/sRGB value, not a paper-white standard, illuminant, paint formula, textile match, display calibration target, or physical reflectance measurement.

WCAG Accessibility

Contrast checks for White against black and white text.

Black text21:1AA Pass
White text1:1AA Fail
AA text options#000000, #1A1A1A, #36454F
AAA text options#000000, #1A1A1A, #36454F
Open WCAG pageDetailed contrast notes, warnings, alternatives, and UI examples

Downloadable color reference infographic

White Color Reference Infographic

Save a high-resolution infographic of White, including its color values, coordinated palette, and black and white text contrast.

1200 × 800
White color reference infographic showing #FFFFFF, RGB and HSL values, a coordinated palette, and black and white text contrast.
White color reference infographic generated from the verified Colors Encyclopedia dataset.
Download WebPDownload SVGOpen full size

Color Harmonies

White#FFFFFFWhite#FFFFFFWhite#FFFFFFWhite#FFFFFFWhite#FFFFFF
Open full White harmony pageComplementary, analogous, triadic, tetradic, split, and monochromatic sets

Variants

White#FFFFFF#D1D1D1#D1D1D1White#FFFFFFWhite#FFFFFFWhite#FFFFFFWhite#FFFFFF

Pairings

Black#000000White#FFFFFFWhite#FFFFFFWhite#FFFFFFMatte Black#1A1A1AWhite Smoke#F5F5F5

Machine-readable data

Machine-Readable Color Data (JSON)

Perfect for CSS, design systems, automation, and AI ingestion.

AI-Ready Dataset v1.0.0
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
Download JSON Open API
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",
    "/tools/css-gradient-generator",
    "/tools/color-palette-generator",
    "/tools/css-color-mixer",
    "/tools/contrast-checker"
  ],
  "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",
      "/tools/css-gradient-generator",
      "/tools/color-palette-generator",
      "/tools/css-color-mixer",
      "/tools/contrast-checker"
    ]
  }
}
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",
    "/tools/css-gradient-generator",
    "/tools/color-palette-generator",
    "/tools/css-color-mixer",
    "/tools/contrast-checker"
  ],
  "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",
      "/tools/css-gradient-generator",
      "/tools/color-palette-generator",
      "/tools/css-color-mixer",
      "/tools/contrast-checker"
    ]
  },
  "pairings": {
    "best": [
      "#000000",
      "#FFFFFF",
      "#FFFFFF",
      "#FFFFFF"
    ],
    "avoid": [
      "#FFFFFF",
      "#FFFFFF"
    ],
    "neutral": [
      "#1A1A1A",
      "#F5F5F5",
      "#E8E8E4"
    ],
    "highContrast": [
      "#000000"
    ],
    "lowContrast": [
      "#FFFFFF",
      "#FFFFFF"
    ]
  }
}
Dataset manifest Version 1.0.0 Build hash published in manifest Canonical page

Similar Colors

Snow#FFFAFA
Ghost White#F8F8FF
Mint Cream#F5FFFA
Cool White#F4F8FF
Magnolia#F8F4FF

Related Color Guides

Gray color familyBrowse named gray colors and compare nearby swatches.Neutral colorsExplore colors with neutral temperature behavior.Light colorsFind colors with light visual character.Neutral colorsFind colors with neutral visual character.White accessibilityCheck contrast and WCAG text options for #FFFFFF.White CSS utilitiesUse White in CSS variables and utility classes.#FFFFFF HEX atlasOpen the permanent HEX atlas record for conversions and variants.White paletteOpen the generated palette based on White.White harmoniesExplore complementary, analogous, triadic, and tetradic harmonies.