Uwarp

Original

Greyscale

Full desaturation in one step—HSL saturation goes to zero and R, G, and B match in the result.

Help Us Improve

—

(—)

Desaturate color to grayscale online

Convert any hex to grayscale color instantly. Desaturate color with full color desaturation—copy grayscale hex codes as HEX, RGB, or HSL.

What is grayscale color desaturation?

Grayscale color (or greyscale colour) is a neutral gray at the same lightness as your source hex—color desaturation strips chroma so colors in grayscale read as black-and-white grey, not vivid hue. This page converts your pick to HSL, sets saturation to zero, and shows the result beside the original so you can desaturate color and copy grayscale hex codes for CSS or design tools—no install required.

Grayscale color features

Fully desaturate any hex with instant preview and one-click copy.

  • Color picker and hex input

    Choose visually or paste a six-digit hex—the greyscaled swatch updates instantly.

  • Full desaturation

    One-step greyscale—no amount slider; every pick runs complete desaturate color.

  • Side-by-side preview

    Original and greyscaled colors shown together for quick comparison.

  • Copy HEX, RGB, HSL

    One-click copy for grayscale hex codes and neutral RGB or HSL strings.

  • HSL greyscale

    Sets saturation to zero while keeping hue and lightness from the source.

  • No account

    Free, unlimited previews in modern browsers.

How to desaturate a color

Two steps to turn a hex into grayscale color.

  1. Set the original color

    Use the picker or paste a six-digit hex—grayscale colours and saturated picks both work.

  2. Copy the grayscale result

    Copy HEX, RGB, or HSL from the greyscaled panel into CSS, Figma, or code.

Tips for greyscale colors

Better results when desaturating hex values.
  • 01

    Partial desaturate elsewhere

    Need −30% muted, not full grey? Use /change-color-saturation instead.

  • 02

    Photos use another route

    For whole images, open /grayscale-image—luminosity mode is the usual default.

  • 03

    Same lightness, no hue

    Output HSL saturation is 0%; hue in the string may remain but RGB channels match.

  • 04

    Paste from a picker

    Sample on /image-color-picker, then paste the hex here for an instant greyscale.

  • 05

    Pair with lighten or darken

    After greyscale, tune value on /lighten-color or /darken-color if needed.

  • 06

    Check contrast

    Grey text on grey UI still needs readable pairs—use /contrast-checker when unsure.

When to greyscale a color

Typical uses for full hex desaturation.

  • Disabled UI states

    Derive a neutral disabled swatch from a brand hex without manual gray picks.

  • Grayscale color palette

    Desaturate several brand hexes and copy each gray for a simple grayscale color palette or token set.

  • Black and white previews

    See how a hue reads when stripped to luminance only.

  • Print-safe checks

    Preview a color as grey before single-ink or monochrome layouts.

  • Accessibility baselines

    Compare chromatic and grey versions of the same lightness.

  • CSS variables

    Copy RGB or HSL of the desaturated value into custom properties.

Why use this greyscale tool

Benefits of one-click hex desaturation.

  • Instant

    No slider or apply step—pick a color and copy the grey result.

  • Private

    Colors never leave your device.

  • Predictable output

    Full desaturate every time—same as −100 on the saturation tool.

  • Multiple formats

    HEX, RGB, and HSL for different handoff workflows.

  • Free

    Unlimited previews and copies.

  • Honest scope

    Single hex greyscale—not photo batch conversion.

Technical details

How hex greyscale works here.
Color space
RGB ↔ HSL; saturation channel set to 0, lightness preserved.
Input
Six-digit hex via picker or text field.
Output
Neutral gray where R = G = B at source lightness.
Output formats
Lowercase HEX, rgb(), and hsl() strings.
Processing
Client-side only—no network requests.
Browser support
Modern Chromium, Firefox, and Safari.

Sources & References

Authoritative references on color desaturation, the HSL color model, and the perception of grayscale colors.
  • “In the HSL color space, saturation is the intensity or purity of a color. Reducing saturation to zero produces a neutral gray at the same lightness as the original hue.”
    — Wikipedia — HSL and HSV

    HSL and HSV — saturation channel: Desaturation sets the HSL saturation channel to 0% while preserving the original lightness. The output is a neutral gray where R = G = B, weighted by the perceived luminance of each channel. en.wikipedia.org/wiki/HSL_and_HSV

  • “A grayscale image is one in which the only colors are shades of gray, each pixel carrying only intensity information ranging from black to white.”
    — Wikipedia — Grayscale

    Grayscale — images with only shades of gray: The grayscale hex output is not a single fixed gray — it preserves the perceived brightness of the original color. A bright yellow desaturates to a light gray; a dark blue becomes a dark gray. en.wikipedia.org/wiki/Grayscale

  • “Chroma is the colorfulness of an area relative to the brightness of a similarly illuminated area that appears white or highly transmitting. Saturation describes how a color differs from gray at the same lightness.”
    — Wikipedia — Colorfulness

    Colorfulness, chroma, and saturation (perception): Fully desaturated colors eliminate all chroma information. The tool converts hex to HSL, zeros the saturation channel, and converts back — producing a grayscale color perception of the original. en.wikipedia.org/wiki/Colorfulness

Frequently Asked Questions

Quick answers about this tool—open a question to read more.