Darken Color Online

Darken HEX, RGB, or HSL colors by percentage. Compare shades and copy HEX, RGB, HSL, CSS variables, or color-mix() code.

Enter HEX, rgb(59, 130, 246), or hsl(217, 91%, 60%).

Mixes the selected percentage with black. 0% keeps the original color; 100% is black.

%

Darkened

Original
#3B82F6
Darkened (20%)
#2F68C5
HEX
#2F68C5
RGB
rgb(47, 104, 197)
HSL
hsl(217, 61%, 48%)

CSS output

CSS variable
--color-darkened: #2F68C5;
color-mix()
color-mix(in srgb, #3B82F6 80%, black)

Darker shade scale

Contrast preview

Preview text

5.37:1

Passes WCAG AA for normal text. Minimum darkening for AA: 12%

Darken a color without guessing

A darker color is useful when an interface needs a clear visual change without abandoning its original palette. Use this Color Darkener to turn one HEX, RGB, or HSL value into practical UI states, then copy the exact value or CSS you need.

Build useful UI states from one base color

Instead of choosing a new shade by eye for every component, start with the same brand or interface color and create controlled darker variants. This keeps buttons, links, badges, borders, and charts visually related while making interaction states easier to recognize.

  • Create a subtle 10% to 20% darker hover color for buttons and links.
  • Choose a stronger active or pressed state without changing the color family.
  • Generate darker borders, shadows, chart series, and dark-mode accents from the same source color.

Choose the darkening method for your design goal

Mix with black is the default and most predictable option for a percentage-based adjustment: 20% means the result contains 20% black. Reduce HSL lightness is useful when preserving the original hue and saturation matters more than a literal black mix. Compare both results before committing to a design token.

  • Use Mix with black for direct, consistent darkening and copyable color-mix() CSS.
  • Use Reduce HSL lightness when you want a hue-led scale for a palette or data visualization.
  • Use the darker shade scale to compare several candidate values side by side.

Check readability before you ship

A darker color does not automatically make text readable. Add the intended background in the contrast preview to see the current ratio and WCAG AA status for normal text. If a darker value reaches AA, the tool shows the smallest available darkening percentage that does so; use that as a starting point, then review the final component in context.

  • Copy HEX, RGB, or HSL for design tools and component styles.
  • Copy a CSS custom property to create a reusable design token.
  • All calculations stay in your browser; no color value is uploaded.

How this Darken Color Online works

How the color darkening calculation works

Enter a HEX, RGB, or HSL color and select a value from 0% to 100%. The tool normalizes the input, calculates the darker color immediately, and displays the result as HEX, RGB, and HSL so you can use the format your workflow requires.

Two ways to darken a color

  • Mix with black: the selected percentage of black is mixed into the base color. At 0%, the result is unchanged; at 100%, it is black. This method also provides a copyable color-mix() expression.
  • Reduce HSL lightness: the selected number of percentage points is removed from HSL lightness while hue and saturation remain intact. This can be helpful when creating a visually related color scale.

Compare, validate, and copy

The darker shade scale lets you compare common adjustments without repeatedly changing the slider. Add a background to the contrast preview to check the result against WCAG AA for normal text, then copy a ready-to-use HEX, RGB, HSL, CSS variable, or color-mix() value. Every step runs locally in your browser.

How to use this Darken Color Online

1

Enter a base color

Paste a HEX, RGB, or HSL value, or use the native color picker.

2

Choose amount and method

Set a percentage, then mix with black or reduce HSL lightness.

3

Copy a usable value

Use the result, shade scale, contrast preview, or CSS snippet.

Example Usage

A 20% black mix creates a darker, CSS-ready Sky blue.

Input
Base: #38BDF8 | Method: Mix with black | Darken: 20%
Output
#2D97C6

Frequently Asked Questions

How can I darken a HEX color online?
Paste a 3- or 6-digit HEX color, choose a darkening percentage, and copy the darker HEX result. The result updates as you change the color, method, or percentage.
How do I darken a color in CSS?
Use the CSS output shown by the tool. With Mix with black selected, you can copy a CSS variable or a color-mix() expression; you can also copy the calculated HEX, RGB, or HSL value.
What does darken by percentage mean?
With the default method, the selected percentage is mixed with black: 0% keeps the original color and 100% produces black. In HSL mode, the same value is subtracted from lightness instead.
What is the difference between mixing with black and reducing HSL lightness?
Mix with black produces a relative darker version of the original color. Reduce HSL lightness keeps the original hue and saturation, which can be useful when you want a consistent hue family.
Can I darken RGB or HSL colors?
Yes. Enter rgb(r, g, b) or hsl(h, s%, l%) as well as HEX values. The tool normalizes the input and gives you copyable HEX, RGB, and HSL results.
Which color formats can I convert and copy?
The input accepts HEX, RGB, and HSL. You can copy the darker color as HEX, RGB, HSL, a CSS custom property, or, for the black-mix method, color-mix() CSS.
How do I create a darker hover color?
Start with your button or link color, then try a 10% to 20% darkening amount. Compare the original and darkened swatches, then copy the value into your :hover rule.
Can I generate a darker color palette or shade scale?
Yes. The darker shade scale creates several progressively darker options from the same base color, so you can choose a hover, active, border, or shadow shade without re-entering the color.
Can this tool help me find a color with WCAG AA contrast?
Enter a preview background to see the current contrast ratio and whether the selected result passes WCAG AA for normal text. The tool also shows the minimum available darkening percentage that reaches AA on that background.
Are my colors uploaded or stored?
No. Color parsing, darkening, shade generation, and contrast checks all run locally in your browser.

Related Tools

Try It

Color Lightener

Lighten any HEX color by a specific percentage. Get lighter shades for UI design.

Try It

AI Color Palette Generator

Generate color palettes from a mood, brand, or theme using AI. Switch between instant random palettes and AI mode, then copy the HEX codes.

Try It

Hue Shifter

Shift the hue of a color or an image on the color wheel. Copy HEX, RGB, or HSL values or download the result.

Try It

Color Blender

Blend two colors together adjustably. Create smooth transitions and intermediate shades.

Try It

Pantone to HEX Converter

Convert Pantone Matching System (PMS) colors to HEX codes.

Try It

HSV Color Map

Pick colors on an interactive HSV color map and convert them to HEX, RGB, HSL, and HSV values instantly.

The Darken Color Online is maintained by CodeItBro. We aim to provide the best free developer tools on the web. If you have feedback or suggestions, please visit our contact page.

As featured on

CodeItBro - Free dev tools + practical guides to help you ship faster | Product HuntCodeItBro - Free Online Developer Tools badgeCodeItBro badge