White is the lightest opaque sRGB color: every channel is at its maximum. It gives a color-heavy interface a neutral reference rather than adding another hue.
This HEX also has a CSS keyword name.
Better together.
Complementary
Two colors, 180° apart. A clear contrast across the HSL color wheel.
Use white for document canvases, product-photo surrounds or the space between dense dashboard cards. Let borders and headings establish the hierarchy instead of relying on several nearly white panels.
Design advice is context-dependent. It is separate from the numeric calculations.
What to check before using it
A white card on a white page has no color boundary. Use spacing or a sufficiently visible outline when the boundary is needed to identify a control.
#ffffff is rgb(255, 255, 255), hsl(0, 0%, 100%), and oklch(0.99999999 0 0). These values are calculated from the same opaque sRGB color.
Which text color is more readable on #ffffff?
Black has 21.00:1 contrast and white has 1.00:1. Of these two, Black has the higher contrast. Normal-text AA requires at least 4.5:1.
How is the complementary palette calculated?
The engine rotates HSL hue by 180° and keeps saturation and lightness. For this color the result is #ffffff. Achromatic colors stay neutral.
Is #ffffff the same as transparent?
No. #ffffff is opaque white. A transparent surface reveals what is behind it, so its appearance and text contrast depend on that underlying background.
Neighbors at −30°, 0° and +30°. A close-knit family of hues.
This is an achromatic color. Rotating its hue keeps it neutral; try Monochromatic for a range of lightness.
01BASE
#ffffffrgb(255, 255, 255)oklch(0.99999999 0 0)
Contrast ratio: 21.00:1
HSL / Analogous
Color values & advanced tools
Selected color / #FFFFFF
The numbers behind the color
One color, four ways to describe it.
HEX
#ffffff
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
OKLCH
oklch(0.99999999 0 0)
Hue
Not defined (achromatic)
Saturation
0.00%
Lightness
100.00%
Where this harmony might work
Design suggestions below are subjective. Hue angles and contrast ratios are calculated facts.
Suggested use
Editorial pages, lifestyle brands and calm interfaces.
Strength
Neighboring hues create a related visual rhythm.
Considerations
Similar hues can blur boundaries; add labels and neutral spacing.
Design example
Use the middle hue for a hero panel and its neighbors for decorative cards.
OKLCH · Perceptual adjustments
Adjust lightness and chroma of unlocked companions in OKLCH. HSL hue spacing can change. Preview the result before applying.
Current palette
Adjusted preview
Colors needing sRGB chroma reduction: 0
The base color is the anchor. Locks and the base color stay unchanged.
Compare with the original HSL harmony
These are the unedited theory colors. Compare their HEX and OKLCH values with the edited palette above.
#ffffffoklch(0.99999999 0 0)
Palette CSS
:root {
--palette-1: #ffffff;
}
Live design preview
03 / IN CONTEXT
Put it into perspective.
Real CSS. Your colors. A small glimpse of what comes next.
Palette role mapping
Rendered text pair #000000 / #ffffff · 21.00:1
your-next-idea.design
FORM & FIELDIndependent ideas. Considered colors.
STUDIO FOR EVERYDAY IDEAS
Room for a fresh perspective.
Thoughtfully made things start with a little curiosity.
Discover the collection
The palette text/background pair is below normal-text AA.
#ffffff / #ffffff · 1.00:1 · Normal text · AA
Suggested text color: #000000 (21.00:1).
Displayed text contrast: 21.00:1 · Accessible text alternatives affect only the preview. Your palette stays unchanged.
The tested pair is used on colored buttons, cards, KPIs and slide bands. Other template text uses #262a23 (13.18:1) or #55594f (6.47:1) on #f6f3ec. Charts have numbered labels. This is not a complete accessibility audit.
Text contrast checker
Accessibility / WCAG AA
Make it readable.
Check the selected color against your text or background color.
Suggested text color: #000000 · 21.00:1
AA requires 4.5:1 for normal text and 3:1 for large text. This checks color contrast, not full WCAG compliance.
Aa
Color should be seen. Words should be read.
#ffffff / #ffffff
Contrast ratio1.00:1
Normal text · AABelow target
Large text · AABelow target
Normal text · AAABelow target
Large text · AAABelow target
A little theory. A lot to explore.
PALUNEXA rotates hues on the HSL color wheel and keeps saturation and lightness unchanged. Monochromatic palettes vary lightness instead. Harmony is a starting point for design, not a guarantee of aesthetic fit.