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.

  1. Color picker and hex input: Choose visually or paste a six-digit hex—the original swatch updates instantly.
  2. Amount slider: 0–100% scale toward black with a numeric input for precise steps.
  3. Live preview: Original and dark hues side by side—the darkened swatch updates as you move Amount or change the base hex.
  4. Copy HEX, RGB, HSL: One-click copy for the darkened result in three common formats.
  5. Linear RGB darken: Each channel scales toward 0 by the same percentage—predictable shades.
  6. 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.

  1. Start small: 10–30% often enough for pressed states or borders on saturated bases.
  2. Check contrast: Dark text on dark UI still needs readable pairs—pair with /contrast-checker when unsure.
  3. Build a shade scale: Run the same hex at 20%, 40%, 60%, and 80% for a darker color palette or token ramp.
  4. Paste from a picker: Sample a photo color on /image-color-picker, then paste the hex here.
  5. Pair with lighten: Need a paler tint? Use /lighten-color for the opposite blend toward white.
  6. 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.

  1. Active and pressed states: Generate a darker pressed or active shade from a single brand hex.
  2. Text on light UI: Deepen a brand color into darker colors for headings or icons—a color-dark variant without shifting hue.
  3. Design tokens: Build darker colors on a scale (700, 800, 900) from one brand hex—run several amount values and copy each.
  4. Shadow and border tones: Derive subtle border or divider colors from a saturated base.
  5. Quick experiments: Try several amount values without leaving the browser.
  6. CSS variables: Copy RGB or HSL directly into custom properties.

Why use this darken color tool

Benefits of browser-based color darkening.

  1. Instant: No install or sign-up—picker, slider, and copy in one page.
  2. Private: Colors never leave your device.
  3. Predictable math: Linear scale toward black—easy to reason about for shades.
  4. Multiple formats: HEX, RGB, and HSL for different handoff workflows.
  5. Free: Unlimited previews and copies.
  6. Honest scope: Single-color darken—not photo editing or batch palette export.

Technical details

How color darkening works here.

  1. Algorithm: Per channel: new = round(old × (1 − amount / 100)).
  2. Input: Six-digit hex via picker or text field.
  3. Amount range: 0–100 percent toward black.
  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