Named colour

White #ffffff

Every wavelength at once.

Token name suggestion: Mist Bone

RGB

255, 255, 255

HSL

0°, 0%, 100%

CMYK

0, 0, 0, 0

Luminance

1.0000

#ffffff is a pale muted near-white, 0° on the wheel and 50/100 on the cool side. Put black text on it (21.00:1). As text it scores 1.00:1 on white — use #000000 instead. Nearest name is White, nearest Tailwind family is cyan.

hsl(0 0% 100%)rgb(255 255 255)Base step 50AAA inkNeutral

At a glance

Every number on this page in one read: what #ffffff is made of, how bright it looks, and which way it leans.

Hex

#ffffff

Hue

0°

near-white

Saturation

muted

Lightness

100%

pale

Brightness

100%

HSV value

Perceived

100%

weighted brightness

Luminance

1.0000

WCAG relative

Temperature

Neutral

50/100 cool

Color family

Near-white

Tone

Muted

Best ink

Black

21.00:1

Closest name

White

ΔE2000 0

Chroma

0.0

LCH, 0–130ish

OKLCH L

1.000

perceptual lightness

Tailwind

cyan

500 · ΔE 30.7

Web-safe

#FFFFFF

nearest of 216

Where it sits

Hue0° of 360°

Saturation0%

Lightness100%

Saturation × lightness field

Left edge is grey, right edge is full chroma; top is white, bottom is black. The dot is #ffffff.

Temperature

Warm ← → Cool50% cool

Near-neutral, so temperature is a whisper rather than a statement — the tinted siblings below show which way it can lean.

Warmer#FBFAF9 This color#ffffff Cooler#F9FAFB

Luminance by channel

Red21%

Green72%

Blue7%

Green carries most of what the eye calls brightness — that is why WCAG weights it 0.7152.

About White

White, #ffffff, is all three channels at maximum — every visible wavelength emitted together. In design it is not "no color" but the most load-bearing one: white space is the strongest layout tool that exists, and the modern web is overwhelmingly built on white or near-white canvases.

Like black, true white is often tempered in practice: warm off-whites and cool near-whites set a page’s entire temperature before any accent appears.

History

Lead white dominated painting for two millennia — luminous, dense and slowly poisonous to every studio that ground it. Titanium dioxide replaced it in the 20th century and became the world’s most manufactured pigment; the modern world is literally painted with it.

Whitewashed modernism — Bauhaus walls, Apple packaging, gallery cubes — made white the color of clarity, honesty and “nothing to hide.”

Psychology

White reads as clean, honest, spacious and silent. Medical and hygiene contexts lean on it hard; luxury uses it to say confidence (empty space is expensive). Excessive pure white glare, though, fatigues — the reason reading apps offer sepia.

In design

Set type on white with near-black rather than pure black for long reads. Off-whites (#faf9f6, #f8fafc) reduce glare while keeping the airy feel — this hub’s own instrument pages do exactly that. White text needs weight: on colored buttons keep it bold and check contrast (4.5:1 minimum).

In culture

White is purity and weddings in the West, mourning across much of Asia, surrender on the battlefield and truce in politics: white flag, white lie, whiteout. Few colors flip meaning so completely at borders.

Brands that own white

Apple (canvas)#ffffff Tesla#ffffff Muji#f5f5f0 OpenAI#ffffff Wikipedia#ffffff

Shades of white

Snow Ivory Floral white Ghost white Antique white Smoke Linen Alabaster

Every format

HEX	#ffffff
HEX (8-digit)	#ffffffff
RGB	rgb(255, 255, 255)
RGBA	rgba(255, 255, 255, 1)
HSL	hsl(0, 0%, 100%)
HSV / HSB	hsv(0, 0%, 100%)
HWB	hwb(0 100% 0%)
CMYK	cmyk(0%, 0%, 0%, 0%)
LAB	lab(100.0 0.0 0.0)
LCH	lch(100.0 0.0 180.0)
OKLCH	oklch(1.000 0.000 89.9)
XYZ (D65)	xyz(95.05, 100.00, 108.88)
Decimal	16777215
Display P3	color(display-p3 1.000 1.000 1.000)
Web-safe	#FFFFFF

Copy-ready code

every platformclick to select

/* CSS */
color: #ffffff;
background-color: #ffffff;
/* CSS custom property */
--brand: #ffffff;
/* Tailwind (arbitrary) */
class="text-[#ffffff] bg-[#ffffff]"
/* SCSS */
$brand: #ffffff;
/* SwiftUI */
Color(red: 1.000, green: 1.000, blue: 1.000)
/* UIKit */
UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
/* Android XML */
<color name="brand">#FFFFFF</color>
/* Android Compose */
Color(0xFFFFFFFF)
/* Flutter */
Color(0xFFFFFFFF)
/* Python / OpenCV (BGR) */
(255, 255, 255)
/* Python / PIL (RGB) */
(255, 255, 255)
/* Java AWT */
new Color(255, 255, 255)
/* .NET */
Color.FromArgb(255, 255, 255, 255)
/* OpenGL / Unity (0–1) */
(1.0000f, 1.0000f, 1.0000f, 1f)
/* LaTeX */
\definecolor{brand}{RGB}{255,255,255}

modern cssclick to select

/* mix without leaving CSS */
background: color-mix(in oklab, #ffffff 85%, white);
border-color: color-mix(in oklab, #ffffff 40%, transparent);
/* theme-aware in one line */
color: light-dark(#404040, #E0E0E0);
/* relative colour syntax */
--hover: hsl(from #ffffff h s calc(l - 7));

Design tokens

The same ramp in the four formats a team actually needs. Paste one and the whole palette lands with it.

css custom propertiesclick to select

:root {
  --brand-50: #ffffff;
  --brand-100: #F0F0F0;
  --brand-200: #DEDEDE;
  --brand-300: #C7C7C7;
  --brand-400: #ABABAB;
  --brand-500: #8F8F8F;
  --brand-600: #7A7A7A;
  --brand-700: #666666;
  --brand-800: #525252;
  --brand-900: #3D3D3D;
  --brand-950: #262626;
  --brand: #ffffff;
  --brand-ink: #000000;
  --brand-surface: #F7F7F7;
  --brand-border: #D6D6D6;
  --brand-hover: #EDEDED;
  --brand-pressed: #DBDBDB;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand-surface: #1C1C1C;
    --brand-ink: #E0E0E0;
  }
}

tailwind.config.jsclick to select

theme: {
  extend: {
    colors: {
      brand: {
        50: '#ffffff',
        100: '#F0F0F0',
        200: '#DEDEDE',
        300: '#C7C7C7',
        400: '#ABABAB',
        500: '#8F8F8F',
        600: '#7A7A7A',
        700: '#666666',
        800: '#525252',
        900: '#3D3D3D',
        950: '#262626',
        DEFAULT: '#ffffff',
      },
    },
  },
}

scss mapclick to select

$brand: (
  '50': #ffffff,
  '100': #F0F0F0,
  '200': #DEDEDE,
  '300': #C7C7C7,
  '400': #ABABAB,
  '500': #8F8F8F,
  '600': #7A7A7A,
  '700': #666666,
  '800': #525252,
  '900': #3D3D3D,
  '950': #262626,
);
$brand-base: #ffffff;
$brand-ink: #000000;

@function brand($step) { @return map-get($brand, $step); }

w3c design tokens (json)click to select

{
  "color": {
    "brand": {
      "50": { "$value": "#ffffff", "$type": "color" },
      "100": { "$value": "#F0F0F0", "$type": "color" },
      "200": { "$value": "#DEDEDE", "$type": "color" },
      "300": { "$value": "#C7C7C7", "$type": "color" },
      "400": { "$value": "#ABABAB", "$type": "color" },
      "500": { "$value": "#8F8F8F", "$type": "color" },
      "600": { "$value": "#7A7A7A", "$type": "color" },
      "700": { "$value": "#666666", "$type": "color" },
      "800": { "$value": "#525252", "$type": "color" },
      "900": { "$value": "#3D3D3D", "$type": "color" },
      "950": { "$value": "#262626", "$type": "color" }
    },
    "brandInk": { "$value": "#000000", "$type": "color" }
  }
}

Best text color

Only one of black and white can be right. This is the one, with the number that proves it.

Readable at a glance#000000 on #ffffff · 21.00:1

Use #000000 — AAA at every size.

12px

16px

24px

White text · 1.00:1

AA fail · AA large fail · AAA fail

Black text · 21.00:1 · recommended

AA pass · AA large pass · AAA pass

Reading the other direction: #ffffff as text scores 1.00:1 on white and 21.00:1 on black.

Best tinted ink on it, if plain black or white feels flat: #404040 at 10.37:1.

Make it accessible

A contrast checker tells you that you failed. This tells you what to ship instead — same hue, same saturation, lightness moved only as far as WCAG demands.

The quick fox

#000000 · 21.00:1

AA on whiteneeds a new hue

#000000

The quick fox

#000000 · 21.00:1

AAA on whiteneeds a new hue

#000000

The quick fox

#ffffff · 21.00:1

AA on blackalready passes

#ffffff

The quick fox

#ffffff · 21.00:1

AAA on blackalready passes

#ffffff

Large text — 24px regular or 18.66px bold and above — only needs 3:1, so #000000 is enough for headings on white. Non-text elements such as icons, chart strokes and focus rings also sit at 3:1 under WCAG 2.2 (1.4.11).

Accessibility — WCAG contrast

#ffffff on white: 1.00:1

AA ✗ fail · AA-large ✗ · AAA ✗

#ffffff on black: 21.00:1

AA ✓ pass · AA-large ✓ · AAA ✓

Against the neutral ladder

Contrast is symmetric, so each row covers both directions: #ffffff as text on that neutral, and that neutral as text on #ffffff.

Neutral	Ratio	Verdict	Both directions
White#ffffff	1.00:1	AAAA lgAAA	AaAa
Slate 50#f8fafc	1.05:1	AAAA lgAAA	AaAa
Slate 100#f1f5f9	1.10:1	AAAA lgAAA	AaAa
Slate 200#e2e8f0	1.23:1	AAAA lgAAA	AaAa
Slate 300#cbd5e1	1.48:1	AAAA lgAAA	AaAa
Slate 400#94a3b8	2.56:1	AAAA lgAAA	AaAa
Slate 500#64748b	4.76:1	AAAA lgAAA	AaAa
Slate 600#475569	7.58:1	AAAA lgAAA	AaAa
Slate 700#334155	10.35:1	AAAA lgAAA	AaAa
Slate 800#1e293b	14.63:1	AAAA lgAAA	AaAa
Slate 900#0f172a	17.85:1	AAAA lgAAA	AaAa
Black#000000	21.00:1	AAAA lgAAA	AaAa

Colour vision deficiency

true color

protanopia · #FFFFFF

deuteranopia · #FFFFFF

tritanopia · #FFFFFF

Roughly one man in twelve has some form of colour vision deficiency. If any of the three panels above is hard to tell apart from a neighbouring colour in your palette, add a shape, an icon or a label so the meaning does not rest on hue alone.

Color scale — 50 to 950

A Tailwind-shaped ramp built around this exact hex. #ffffff is pinned to step 50; the rest hold its hue and let saturation ease off at the extremes so the pale end never turns neon.

50base 100 200 300 400 500 600 700 800 900 950

#ffffff

#F0F0F0

#DEDEDE

#C7C7C7

#ABABAB

#8F8F8F

#7A7A7A

#666666

#525252

#3D3D3D

#262626

Base = 50Lightest = 50 · #ffffffDarkest = 950 · #262626Text step on white = 700

Perceptual ramp — OKLCH

The same eleven steps expressed in OKLCH, where equal lightness numbers actually look equally spaced. HSL ramps go muddy in the yellows and washed out in the blues; this one does not. Modern browsers render it natively — the hex ramp above is the fallback.

50100200300400500600700800900950

oklch tokensclick to select

:root {
  --brand-50: oklch(0.97 0.000 89.9);
  --brand-100: oklch(0.94 0.000 89.9);
  --brand-200: oklch(0.88 0.000 89.9);
  --brand-300: oklch(0.80 0.000 89.9);
  --brand-400: oklch(0.72 0.000 89.9);
  --brand-500: oklch(0.64 0.000 89.9);
  --brand-600: oklch(0.56 0.000 89.9);
  --brand-700: oklch(0.48 0.000 89.9);
  --brand-800: oklch(0.40 0.000 89.9);
  --brand-900: oklch(0.32 0.000 89.9);
  --brand-950: oklch(0.24 0.000 89.9);
}

Colors that work with #ffffff

Not a palette — a role sheet. Each swatch answers one question you will hit while building the component.

Text on it#000000

Black wins here

Surface#F7F7F7

Tinted page background

Border#D6D6D6

Hairlines and dividers

Muted text#737373

Captions on the surface

Accent#666666

Second voice, not a rival

Dark variant#404040

Hover, pressed, headers

Light variant#F2F2F2

Selected rows, tints

Dark surface#1C1C1C

Dark-mode background

Hover#EDEDED

One step down in lightness

Pressed#DBDBDB

Two steps down

Disabled#F5F5F5

Chroma pulled out

Focus ring#EDE9E9

Offset from the fill so it reads

Light mode

Everything in its place

Surface, border, heading and body all derive from this one hue, so the screen stays coherent without a second palette.

Primary actionSecondaryBadge

Dark mode

Same hue, inverted

Lightness flips, hue holds. The accent stays the anchor in both themes.

Primary actionSecondaryAccent

In real components

The same eight roles, wired into the interface patterns you will actually build with them. Every state below is a computed value, not a mock-up.

Buttons and states

Save changesHoverPressedDisabled

OutlineSubtleLinkFocused

Form field

Work email

you@company.com

Focus ring uses the light variant so the field still reads as one shape.

Send me product updates

Notice

Your export is ready

The file stays available for seven days. Download it before it expires.

NewBetaDraft

Data

Storage used68%

Acme LtdActive

NorthwindTrial

GlobexActive

How to use #ffffff

Derived from its contrast, chroma and lightness — not from taste.

Works well for

✓Text and icons on dark surfaces
✓Borders, dividers and quiet backgrounds
✓Long-form reading surfaces
✓Card and section backgrounds
✓Neutral UI chrome and typography

Use with care

⚠Text of any size on white — fails WCAG AA
⚠White text placed on it
⚠Pairing with a same-lightness hue — edges vibrate

Minimum size as text on white

Not as text

Safe as a fill behind white type

No — use #404040

Safe as a 1px border on white

No — use #000000

Meaning and mood

What a colour in this family tends to signal, and how this particular chroma and lightness change the reading.

cleanopencalmconsidered

Off-whites do the work of white without the glare, and give shadows something to land on.

With almost no chroma left, the family association is barely present; treat it as a neutral that happens to lean this way. The high lightness makes it recede — a surface colour rather than a statement.

Worth knowing

Too many near-whites in one system look like a mistake rather than a decision. Keep two, maximum.

Reads as

FormalityMedium
EnergyLow
Weight0/100
TemperatureNeutral
ApproachabilityBalanced

Colour associations are cultural and vary by market. Treat these as a starting point for a conversation with your audience, not a finding about them.

Similar colors

One move away from this hex in each direction. Every swatch is its own page.

Lighter#FFFFFF Darker#DBDBDB More saturated#FFFFFF Less saturated#FFFFFF Warmer#FBFAF9 Cooler#F9FAFB Softer#FFFFFF Richer#F5EBEB Hue −20°#FFFFFF Hue −10°#FFFFFF Hue +10°#FFFFFF Hue +20°#FFFFFF

Color relationships

The wheel positions with their names attached, so you can grab the one you actually need.

Complementary	#FFFFFF	Directly opposite — maximum tension
Analogous left	#FFFFFF	Neighbour, quieter
Analogous right	#FFFFFF	Neighbour, quieter
Split-complement 1	#FFFFFF	Contrast without the clash
Split-complement 2	#FFFFFF	Contrast without the clash
Triadic 1	#FFFFFF	Even thirds — balanced and loud
Triadic 2	#FFFFFF	Even thirds — balanced and loud
Tetradic	#FFFFFF	Fourth corner of the square scheme

On the wheel

#ffffff sits at 0°. Every dot is a harmony position and links to its own page in the table alongside.

RGB percentages

Red100.0%

Green100.0%

Blue100.0%

R · 0–255

255

0xff

G · 0–255

255

0xff

B · 0–255

255

0xff

CMYK percentages

Cyan0.0%

Magenta0.0%

Yellow0.0%

Key (black)0.0%

Total ink coverage is 0%. Most commercial presses cap around 300% — above that, sheets stop drying properly.

Color previews

#ffffff text on a black background

contrast 21.00:1

Card sample

#ffffff text on a white background

contrast 1.00:1

Card sample

#ffffff on grey

1.10:1

#ffffff on its own surface

1.07:1

#ffffff on its dark surface

17.04:1

CSS3 live lab

Text font color

The quick brown fox

color: #ffffff;

Background color

Panel with #ffffff background

background-color: #ffffff;

Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #ffffff;

Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(255, 255, 255, 0.45);

Div box shadow

Elevated card

box-shadow: 0 12px 32px -8px rgba(255, 255, 255, 0.45);

Border & gradient

Gradient panel

border: 3px solid #ffffff;
background: linear-gradient(135deg, #ffffff, #FFFFFF);

Gradient text

Gradient headline

background: linear-gradient(90deg, #ffffff, #FFFFFF);
-webkit-background-clip: text;
color: transparent;

Focus ring

Focused control

outline: 2px solid #ffffff;
outline-offset: 3px;

Underline & caret

Marked up text

text-decoration-color: #ffffff;
caret-color: #ffffff;

Left rule

Pull quote or callout

border-left: 4px solid #ffffff;

Ring + tint

Selected chip

background: #F2F2F2;
box-shadow: inset 0 0 0 2px #ffffff;

Conic badge

68%

background: conic-gradient(#ffffff 68%, #e2e8f0 0);

Transparency

What each alpha value actually composites to. The top row is #ffffff over white; the bottom row is the same alpha over a checkerboard, so you can see what survives on a photo or a video.

5%10%15%20%30%40%50%60%75%90%100%

#FFFFFF

Bottom row of hexes is the flattened result over white — use those when a design tool refuses transparency, or when you need a solid fallback.

alpha in every syntaxclick to select

rgba(255, 255, 255, 0.5)
rgb(255 255 255 / 50%)
#ffffff80
hsl(0 0% 100% / 50%)
color-mix(in srgb, #ffffff 50%, transparent)

Alpha	8-digit hex	Flat on white
10%	#ffffff1a	#FFFFFF
20%	#ffffff33	#FFFFFF
40%	#ffffff66	#FFFFFF
60%	#ffffff99	#FFFFFF
80%	#ffffffcc	#FFFFFF

Gradients from #ffffff

Six recipes, each built from this hex and shown with the exact CSS that produced it.

Elevation

Same hue, three lightnesses — safe anywhere

background: linear-gradient(135deg, #F5F5F5, #ffffff 45%, #404040);

Duotone

A short hue run reads richer than a flat fill

background: linear-gradient(120deg, #ffffff, #F0F0F0);

Complement sweep

Loud — keep it behind large type only

background: linear-gradient(90deg, #ffffff, #FFFFFF);

Spotlight

Hero panels and app headers

background: radial-gradient(120% 120% at 20% 0%, #F7F7F7 0%, #ffffff 45%, #404040 100%);

Soft wash

Section backgrounds that stay readable

background: linear-gradient(180deg, #F7F7F7, #ffffff);

Mesh

Ambient background, no image weight

background: radial-gradient(60% 60% at 15% 20%, #FFFFFF 0%, transparent 60%), radial-gradient(55% 55% at 85% 15%, #FFFFFF 0%, transparent 60%), radial-gradient(70% 70% at 50% 95%, #404040 0%, transparent 65%), #ffffff;

Monochromatic scale

#1F1F1F #424242 #666666 #8A8A8A #ADADAD #D1D1D1 #EBEBEB

Palettes built from #ffffff

UI palette

Gradient stops

Accent trio

Warm–cool bridge

Data series

Status set

Neutral companions

Shades — darker

#E6E6E6 #CCCCCC #B3B3B3 #999999 #808080 #666666 #4D4D4D #333333 #1A1A1A

Tints — lighter

#F7F7F7 #F7F7F7 #F7F7F7 #F7F7F7 #F7F7F7 #F7F7F7 #F7F7F7 #F7F7F7 #F7F7F7

Tones — desaturated

#FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF

Color harmonies

Complement

Split-complement

Analogous

Triadic

Tetradic

Nearest named colors

Ranked with CIEDE2000 across all 139 CSS keywords. Under ΔE 2 the eye stops telling them apart; over ΔE 10 they are plainly different colors.

White#ffffffΔE00 0 · ΔE76 0 White Smoke#f5f5f5ΔE00 2 · ΔE76 3.5 Snow#fffafaΔE00 2.5 · ΔE76 2.2 Ghost White#f8f8ffΔE00 3.8 · ΔE76 4.2 Alice Blue#f0f8ffΔE00 4.6 · ΔE76 5.3 Floral White#fffaf0ΔE00 4.9 · ΔE76 5.6

Closest CSS keywordWhite · ΔE 0 Closest darker nameGainsboro · ΔE 7.4 Closest lighter nameWhite · ΔE 0

Nearest Tailwind familycyan-500 · #06b6d4 · ΔE 30.7 Nearest web-safe colour#FFFFFF · ΔE 0

#ffffff in the real world

Where a color in this family tends to land, and the interface roles it is usually asked to play.

Industries

EditorialSkincareArchitectureMinimal retail

Common UI roles

BackgroundsBordersBody textDividers

Print note

Very light tints can drop out on uncoated stock; check it at 100% size before signing off.

On screens

Very light values are indistinguishable from white on a dim phone screen outdoors. Give it a border if the boundary matters.

In dark mode

Usable as-is on a dark surface at 21.00:1.

Brand examples for white are listed above — each one links through to its own page.

Explore nearby colors

Small, deliberate steps away from this hex — useful when you are hunting for the version of a colour that finally feels right.

White, answered

What is the hex code for white?

Pure white is #ffffff — rgb(255, 255, 255), all channels at maximum. Popular off-whites include ivory #fffff0, snow #fffafa and smoke #f5f5f5.

Why use off-white instead of pure white?

Slightly tinted whites reduce screen glare and set a temperature (warm cream vs cool gray-white) while preserving spaciousness. Long-form reading surfaces especially benefit.

What contrast does white text need?

WCAG requires 4.5:1 for normal text — white passes on backgrounds darker than roughly #767676. Always verify: white on brand pastels is the most common accessibility failure.

What color is #ffffff?

#ffffff is a pale muted near-white — the CSS keyword White. It sits at 0° on the hue wheel with 0% saturation and 100% lightness, which reads as neutral.

What is the RGB value of #ffffff?

rgb(255, 255, 255) — 255 red, 255 green and 255 blue out of 255, or 100% / 100% / 100% by channel.

What is #ffffff in HSL and HSV?

hsl(0, 0%, 100%) and hsv(0, 0%, 100%). HSL is what CSS takes; HSV is what your design tool's picker shows, which is why the saturation numbers rarely match.

Is #ffffff a light or a dark color?

It is a light color. Relative luminance is 1.0000 and perceived brightness is 100%, so black text on it reaches 21.00:1.

Should I use black or white text on #ffffff?

Black. It scores 21.00:1 against #ffffff, versus 1.00:1 for white — AAA at any size.

Is #ffffff accessible on a white background?

#ffffff on white scores 1.00:1, which fails WCAG AA at every size. Darken it to #000000 to reach 4.5:1, or #000000 for 7:1.

What is the complementary color of #ffffff?

#FFFFFF sits directly opposite on the wheel. Softer options are the split-complements #FFFFFF and #FFFFFF, which give the same contrast with far less vibration.

What colors go well with #ffffff?

For interface work: #F7F7F7 as the surface, #D6D6D6 for borders, #737373 for secondary text, #666666 as an accent and #404040 for hover and pressed states. For a palette, the analogous pair #FFFFFF and #FFFFFF stays calm, while #FFFFFF is the loudest partner.

What is #ffffff in CMYK for printing?

cmyk(0%, 0%, 0%, 0%). This is a screen-to-ink approximation — ask your printer for a proof before committing to a run.

Is #ffffff warm or cool?

Neutral — it scores 50 on a scale where 0 is the warmest orange and 100 the coolest azure. Nudged warmer it becomes #FBFAF9; nudged cooler, #F9FAFB.

Which Tailwind color is closest to #ffffff?

The cyan family — its 500 step is #06b6d4, ΔE2000 30.7 away. That is a visible difference, so define #ffffff as a custom token rather than reaching for the built-in.

How do I use #ffffff in Tailwind CSS?

Inline it as an arbitrary value with bg-[#ffffff] or text-[#ffffff], or register the whole ramp under theme.extend.colors.brand so you get bg-brand-500 and friends. The generated 50–950 scale on this page is ready to paste into your config.

What is #ffffff with 50% opacity?

rgba(255, 255, 255, 0.5), or #ffffff80 in eight-digit hex. Over white that composites to #FFFFFF; over black, #808080.

Is #ffffff a web-safe color?

No. The nearest web-safe colour is #FFFFFF, ΔE2000 0 away. The palette only matters for legacy displays and some email clients now.

What does the color #ffffff mean?

As a near-white, it reads clean, open, calm. Off-whites do the work of white without the glare, and give shadows something to land on. At this low chroma the association is faint; it behaves more like a neutral.

What gradient works with #ffffff?

The safest is same-hue elevation: linear-gradient(135deg, #F5F5F5, #ffffff 45%, #404040). For more colour, a short hue run to #F0F0F0 keeps it rich without turning muddy.

Work with #ffffff in the Color Lab

Every tool opens with this colour already loaded.

Contrast Checker →Palette Generator →Palette Pro →Scale Generator →CSS Code Generator →Color Blind Simulator →Accessibility Checker →Color Distance →Gradient Generator →Image Color Picker →

Every value on this page is computed from #ffffff at request time — conversions, contrast ratios and ΔE distances are calculated, never looked up.