Skip to content

Icon Color Generator

DesignTypography and Icons

Six- or three-digit hex, with or without #.

Icon sits on
Contrast against background —
WCAG check
—
Base hex
—
Background
—
Contrast on white
—
Contrast on black
—

Enter a base hex colour and pick the surface the icon sits on. The tool derives hover (15% darker), pressed (30% darker) and disabled (60% toward the background) shades and gives each a WCAG contrast ratio. Grey #767676 on white, for example, scores 4.54:1, which clears the 3:1 minimum WCAG 1.4.11 sets for meaningful icons.

About this tool

Interface designers and front-end developers usually pick one brand colour for icons and then improvise the interaction states. This generator does that step consistently: from a single hex value it builds a four-state set for a toolbar, nav bar or button icon, and checks every shade against the background with the W3C relative-luminance formula. On a light surface the hover and pressed shades are mixed toward black; in dark mode they are mixed toward white, so they stay visible instead of sinking into the surface. The table shows each hex code beside its ratio, and the stats give the base colour's contrast on pure white and pure black for quick comparison. One limit: the mixing is a straight RGB blend, so a heavily saturated hue can drift slightly in perceived tone; check strong brand colours by eye before shipping.

How to use it

  1. Type the base hex

    Enter a six-digit code like #1E88E5 or shorthand like #3AF; the # is optional.

  2. Choose the surface

    Pick White background or Dark (#121212) to match where the icon is drawn.

  3. Read the state table

    Copy the hex for Default, Hover, Pressed and Disabled, and note each contrast ratio and check.

  4. Fix a failing base

    If the warning appears, darken the base on white or lighten it on dark until it reaches 3:1.

Examples

Grey #767676 icons on white

Base icon colour
#767676
Icon sits on
White background

Result Contrast against background: 4.54:1
WCAG check: Passes 3:1 and 4.5:1
Base hex: #767676
Background: #FFFFFF
Contrast on white: 4.54
Contrast on black: 4.62

  1. Relative luminance of #767676 = 0.1812; of background #FFFFFF = 1
  2. Contrast = (lighter + 0.05) ÷ (darker + 0.05) = 4.54:1
  3. Hover and pressed mix the base 15% and 30% toward black; disabled mixes it 60% toward the background

The classic lightest-passing grey sits at 4.54:1 on white, so it clears both the 3:1 icon threshold and the 4.5:1 text threshold.

Shorthand #00F on white

Base icon colour
00f
Icon sits on
White background

Result Contrast against background: 8.59:1
WCAG check: Passes 3:1 and 4.5:1
Base hex: #0000FF
Background: #FFFFFF
Contrast on white: 8.59
Contrast on black: 2.44

  1. Relative luminance of #0000FF = 0.0722; of background #FFFFFF = 1
  2. Contrast = (lighter + 0.05) ÷ (darker + 0.05) = 8.59:1
  3. Hover and pressed mix the base 15% and 30% toward black; disabled mixes it 60% toward the background

Three-digit shorthand expands to #0000FF; its hover and pressed shades get darker and keep passing.

White icons in dark mode

Base icon colour
#FFFFFF
Icon sits on
Dark (#121212)

Result Contrast against background: 18.73:1
WCAG check: Passes 3:1 and 4.5:1
Base hex: #FFFFFF
Background: #121212
Contrast on white: 1
Contrast on black: 21

  1. Relative luminance of #FFFFFF = 1; of background #121212 = 0.006
  2. Contrast = (lighter + 0.05) ÷ (darker + 0.05) = 18.73:1
  3. Hover and pressed mix the base 15% and 30% toward white; disabled mixes it 60% toward the background

On the #121212 dark surface white reaches 18.73:1; the disabled state is mixed toward the background and is exempt from the contrast rule.

How it is calculated

L = 0.2126·R + 0.7152·G + 0.0722·B (linearised channels); contrast = (L1 + 0.05) ÷ (L2 + 0.05); shade = base + (target − base) × t

R, G, B
sRGB channels divided by 255 and linearised: c ÷ 12.92 up to 0.04045, else ((c + 0.055) ÷ 1.055)^2.4
L1, L2
relative luminance of the lighter and darker colour
t
mix amount: 0.15 hover, 0.30 pressed, 0.60 disabled

Contrast follows the WCAG 2.x definition. Shades are a linear RGB blend: hover and pressed blend toward black on white surfaces and toward white on dark ones, while disabled blends toward the background itself so it reads as inactive. WCAG exempts inactive components from contrast, so the disabled row is labelled exempt rather than graded.

When not to use it

  • Icons that carry text inside them need the 4.5:1 text rule checked separately.
  • Gradients or photographic backgrounds cannot be judged against one flat colour.
  • Multi-colour illustrated icons need each meaningful part checked on its own.

Common mistakes

  • Darkening the hover shade in dark mode, which lowers contrast instead of raising it.
  • Treating a decorative icon as exempt when it is the only label on a button.
  • Checking contrast against the page background when the icon sits on a tinted card.

Frequently asked questions

What contrast do icons need under WCAG?

Success criterion 1.4.11 Non-text Contrast asks for at least 3:1 between a meaningful graphic and the colours next to it. Purely decorative icons and disabled controls are exempt. If the icon is the only thing conveying a control's purpose, treat it as meaningful.

Why does dark mode lighten the hover shade?

On a #121212 surface, mixing toward black pushes the icon closer to the background and cuts its contrast. Mixing toward white makes the hover and pressed states stand out more, which matches how Material-style dark themes signal interaction.

Why is #121212 used for the dark surface?

It is the dark-theme surface colour Material Design recommends instead of pure black, because it reduces smearing on OLED screens and leaves room for elevation tints. Pure black results are shown separately in the Contrast on black stat.

Does the shorthand #3AF work?

Yes. Three-digit codes are expanded by doubling each digit, so #3AF becomes #33AAFF before any maths runs. Named colours like blue are not accepted; type the hex value instead.

Is the disabled shade accessible?

It is deliberately low contrast so it reads as inactive, and WCAG does not require inactive components to meet 3:1. Pair it with a cursor change or removed focus so the state is not conveyed by colour alone.

Why is the headline ratio cut rather than rounded up?

A colour at 2.996:1 would display as 3.00:1 if rounded and appear to pass. The headline figure is truncated to two decimals so a borderline colour never looks compliant when it is not.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 28). Icon Color Generator. Tools Directory. Retrieved October 28, 2026, from https://tools.milunir.com/design/typography-and-icons/icon-color-generator/

MLA

Tools Directory Editorial Team. “Icon Color Generator.” Tools Directory, 28 Oct. 2026, https://tools.milunir.com/design/typography-and-icons/icon-color-generator/. Accessed 28 Oct. 2026.

Chicago

Tools Directory Editorial Team. “Icon Color Generator.” Tools Directory. Last modified October 28, 2026. Accessed October 28, 2026. https://tools.milunir.com/design/typography-and-icons/icon-color-generator/.

Link<a href="https://tools.milunir.com/design/typography-and-icons/icon-color-generator/">Icon Color Generator – Tools Directory</a>