Uwarp

Original

Darkened

Amount

Amount scales the original color toward black. At 0 the result matches your pick; at 100 you get pure black.

Help Us Improve

—

(—)

Get a darker color online

Get a darker color from any hex. Darken color with an amount slider—preview dark hues, copy darker shades as HEX, RGB, or HSL in your browser.

What is a darker color?

A darker color is a deeper shade of a base hex, made by scaling RGB channels toward black. This darken color page lets you pick a starting swatch, set how far to darken, preview dark hues and darker shades beside the original, and copy HEX, RGB, or HSL for CSS, Figma, or design tokens—no install required.

Darker color features

Darken any hex toward black with live preview and one-click copy.

  • Color picker and hex input

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

  • Amount slider

    0–100% scale toward black with a numeric input for precise steps.

  • Live preview

    Original and dark hues side by side—the darkened swatch updates as you move Amount or change the base hex.

  • Copy HEX, RGB, HSL

    One-click copy for the darkened result in three common formats.

  • Linear RGB darken

    Each channel scales toward 0 by the same percentage—predictable shades.

  • No account

    Free, unlimited previews in modern browsers.

How to darken a color

Three steps to get a darker color from any hex.

  1. Set the original color

    Use the picker or paste a six-digit hex—no desktop app required for this hex-darker workflow.

  2. Adjust amount

    Move the slider—try 25% for a subtle shade or 60% for a deep accent.

  3. Copy the result

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

Tips for darkening colors

Better results when deepening hex values.
  • 01

    Start small

    10–30% often enough for pressed states or borders on saturated bases.

  • 02

    Check contrast

    Dark text on dark UI still needs readable pairs—pair with /contrast-checker when unsure.

  • 03

    Build a shade scale

    Run the same hex at 20%, 40%, 60%, and 80% for a darker color palette or token ramp.

  • 04

    Paste from a picker

    Sample a photo color on /image-color-picker, then paste the hex here.

  • 05

    Pair with lighten

    Need a paler tint? Use /lighten-color for the opposite blend toward white.

  • 06

    Saturated bases

    Blues and other strong hues often need 30–50% to read as a clear dark hue for pressed states.

When to darken a color

Typical uses for color darkening.

  • Active and pressed states

    Generate a darker pressed or active shade from a single brand hex.

  • Text on light UI

    Deepen a brand color into darker colors for headings or icons—a color-dark variant without shifting hue.

  • Design tokens

    Build darker colors on a scale (700, 800, 900) from one brand hex—run several amount values and copy each.

  • Shadow and border tones

    Derive subtle border or divider colors from a saturated base.

  • Quick experiments

    Try several amount values without leaving the browser.

  • CSS variables

    Copy RGB or HSL directly into custom properties.

Why use this darken color tool

Benefits of browser-based color darkening.

  • Instant

    No install or sign-up—picker, slider, and copy in one page.

  • Private

    Colors never leave your device.

  • Predictable math

    Linear scale toward black—easy to reason about for shades.

  • Multiple formats

    HEX, RGB, and HSL for different handoff workflows.

  • Free

    Unlimited previews and copies.

  • Honest scope

    Single-color darken—not photo editing or batch palette export.

Technical details

How color darkening works here.
Algorithm
Per channel: new = round(old × (1 − amount / 100)).
Input
Six-digit hex via picker or text field.
Amount range
0–100 percent toward black.
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 the RGB color model, color shading, and the client-side processing this tool uses.
  • “The RGB color model is an additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors. Each channel typically ranges from 0 to 255.”
    — Wikipedia — RGB color model

    RGB color model and color depth: Darkening is applied per RGB channel by scaling each value toward 0 using the formula: new = round(old × (1 − amount/100)). At 100% all channels reach 0, producing pure black (#000000). en.wikipedia.org/wiki/RGB_color_model

  • “In color theory, a shade is a mixture of a color with black, which reduces lightness. A tint is a mixture with white, which increases lightness.”
    — Wikipedia — Tints and shades

    Color shading and tints versus shades: This tool produces shades (darker variants). Each darkened value preserves the original hue and saturation proportion while moving each RGB channel toward zero by the specified percentage. en.wikipedia.org/wiki/Tints_and_shades

  • “Linear interpolation (lerp) between two colors produces intermediate values by computing a weighted average of each channel independently.”
    — Wikipedia — Linear interpolation

    Linear blending in color mixing: The amount slider performs a linear interpolation between the source channel value and 0 (black). The result is rounded to the nearest integer channel value for the output hex. en.wikipedia.org/wiki/Linear_interpolation

Frequently Asked Questions

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