Uwarp
Original color
Greyscaled color

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.

  1. Color picker and hex input: Choose visually or paste a six-digit hex—the greyscaled swatch updates instantly.
  2. Full desaturation: One-step greyscale—no amount slider; every pick runs complete desaturate color.
  3. Side-by-side preview: Original and greyscaled colors shown together for quick comparison.
  4. Copy HEX, RGB, HSL: One-click copy for grayscale hex codes and neutral RGB or HSL strings.
  5. HSL greyscale: Sets saturation to zero while keeping hue and lightness from the source.
  6. 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.

  1. Partial desaturate elsewhere: Need −30% muted, not full grey? Use /change-color-saturation instead.
  2. Photos use another route: For whole images, open /grayscale-image—luminosity mode is the usual default.
  3. Same lightness, no hue: Output HSL saturation is 0%; hue in the string may remain but RGB channels match.
  4. Paste from a picker: Sample on /image-color-picker, then paste the hex here for an instant greyscale.
  5. Pair with lighten or darken: After greyscale, tune value on /lighten-color or /darken-color if needed.
  6. 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.

  1. Disabled UI states: Derive a neutral disabled swatch from a brand hex without manual gray picks.
  2. Grayscale color palette: Desaturate several brand hexes and copy each gray for a simple grayscale color palette or token set.
  3. Black and white previews: See how a hue reads when stripped to luminance only.
  4. Print-safe checks: Preview a color as grey before single-ink or monochrome layouts.
  5. Accessibility baselines: Compare chromatic and grey versions of the same lightness.
  6. CSS variables: Copy RGB or HSL of the desaturated value into custom properties.

Why use this greyscale tool

Benefits of one-click hex desaturation.

  1. Instant: No slider or apply step—pick a color and copy the grey result.
  2. Private: Colors never leave your device.
  3. Predictable output: Full desaturate every time—same as −100 on the saturation tool.
  4. Multiple formats: HEX, RGB, and HSL for different handoff workflows.
  5. Free: Unlimited previews and copies.
  6. Honest scope: Single hex greyscale—not photo batch conversion.

Technical details

How hex greyscale works here.

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

Frequently Asked Questions

Have questions? We have answers.

Related tools

More tools from Color Tools.

View all Color Tools