Generate tints and shades on Mac from a hex color

To generate tints and shades on Mac from a hex color, start with the base value, confirm the UI role, generate lighter tints and darker shades, copy one candidate, then check it in the real foreground/background pair.

This is useful when a color is close but wrong: a dark mode label is too quiet, a focus ring disappears on a dark panel, a hover state feels too bright, or a border needs more separation without becoming a new brand color.

Disclosure: I build teenytool. This guide uses TeenyTool's local Tint & Shade Generator because the source shows a clear, predictable workflow: paste or pick a hex color, generate 10 tints and 10 shades, and copy the candidate hex value locally.

Quick answer

01Start from a real UI color

A tint and shade pass should begin with a known color, not with a guess. Copy the value from the design token, the codebase, or a local screen sample. Write down the role before generating variants.

TeenyTool's color utilities accept hex values and use shared color math to parse 3-digit or 6-digit hex strings. The output is uppercase hex with a # prefix, which keeps candidates easy to paste into design notes, CSS, Swift, or issue comments.

If the value came from a rendered screen or screenshot, sample it first with TeenyColor. The related TeenyColor guide explains how to check dark mode colors from screenshots before you generate replacement candidates.

02Know what the generator is doing

A tint moves the base color toward white. A shade moves it toward black. In TeenyTool's Tint & Shade Generator, the source generates 10 steps in each direction, then lets you copy any generated hex value from the grid.

That is intentionally simple. It gives you a set of nearby candidates without pretending to design the whole system. You still decide which candidate makes sense for the state.

Use the generated values as a short list. Do not paste all 20 into the handoff and ask someone else to guess which one you meant.

03Pick a candidate for one state

Do not solve every color problem at once. Pick one state: disabled label on dark card, hover background, selected row, warning icon, focus ring, subtle border, secondary button text.

Choose the tint or shade that solves that state with the smallest reasonable change. If a color only needs a little more separation, a nearby step is usually easier to defend than a dramatic jump.

For dark mode, this is especially important. A bright tint can pass contrast and still feel harsh in a dense interface. A deep shade can look polished and still fail to communicate state. Test the candidate in context.

04Check contrast before you call it fixed

Tints and shades are visual candidates. They are not accessibility evidence by themselves. If the candidate touches text, icons, borders, focus indicators, controls, or meaningful chart marks, check the actual foreground/background pair.

TeenyTool includes a local Contrast Checker for that next step. WCAG 2.2 sets Level AA text contrast at 4.5:1 for normal text and 3:1 for large text. Non-text UI components and graphical objects need their own check.

The companion guide on WCAG contrast ratios on Mac covers the thresholds. Use this tint and shade workflow to find candidates, then use the contrast workflow to reject weak ones.

05Send the reason with the value

A bare hex value is easy to misunderstand. Send the role, state, original value, candidate value, and reason for the change. That context keeps the review from turning into a palette debate.

A useful note looks like this: dark mode focus ring on settings card, original #33506B, candidate #5E82A8, chosen because the original disappears against #17202B. Contrast still needs approval in the final component.

The TeenyApps hub for this cluster is the Mac dark mode color QA checklist. Use it when the tint or shade is part of a handoff, not just a color exercise.

Mac tint and shade checklist

1. Start from a known hex color from the source, design file, or rendered screen.
2. Name the UI role and state before generating variants.
3. Generate lighter tints and darker shades locally.
4. Choose one candidate for one specific UI state.
5. Copy the candidate hex value.
6. Check contrast against the real foreground or background pair.
7. Send the role, state, original value, candidate value, and reason for the change.
8. Let the design system or codebase own the final token.

Where tints and shades help

Sources checked

• TeenyTool claims were checked against the TeenyTool homepage and local Swift source for TintShadeView.swift, ColorMath.swift, ContrastCheckerView.swift, and the color tool inventory.
• Apple Human Interface Guidelines: Color.
• Apple Human Interface Guidelines: Dark Mode.
• W3C WCAG 2.2 Success Criterion 1.4.3 Contrast (Minimum).
• W3C WCAG 2.2 Success Criterion 1.4.11 Non-text Contrast.
• TeenyApps Mac dark mode color QA checklist for the connected handoff workflow.
• TeenyColor dark mode screenshot color guide for collecting the sampled base color first.

FAQ

How do you generate tints and shades from a hex color on Mac?

Use a local tint and shade generator, paste the base hex value, review lighter tints and darker shades, copy one candidate, then check it against the actual UI background before handoff.

What is the difference between a tint and a shade?

A tint moves a base color toward white. A shade moves a base color toward black. In UI work, both are candidates until they are tested in the real state.

Can a tint or shade fix a dark mode contrast problem?

Sometimes. A tint or shade can produce a better candidate, but the candidate still needs to be checked against the actual foreground or background pair and reviewed in context.