Tints and Shades Generator

Every brand guideline document has the same page. One logo, a row of rectangles marching from near-black to near-white, and a caption like 'primary color and permitted variations.' Nobody reads the caption twice. But every designer who receives that PDF eventually needs those rectangles as actual values — a button hover that is one step lighter, a chart series that needs five distinguishable blues, a dark mode that asks what the brand's color even means when everything around it inverts.

Building that page by hand is a rite of passage nobody enjoys. You open a color picker, drag the lightness slider, squint, drag again, write down a hex, wonder whether step 4 and step 5 are actually distinguishable, and repeat until the rectangles look evenly spaced to your eye — which is to say, until you stop noticing the unevenness. It works. It is also twenty minutes of imprecise labor that a formula does better in one.

This generator builds the ladder from any color you give it: ten tints toward white, ten shades toward black, every step computed with exact per-channel math and copyable as CSS variables. Type a hex code, get the page from the brand PDF — and, more usefully, get the reasoning behind each step, because knowing why step 40 works on step 90 backgrounds is what separates a color scale from a color decoration.

1. 1

   Enter your base color

   Type a hex code, paste one from a brand guideline, or pull it from a photo with the Image Color Extractor first. The ladder regenerates the instant the value changes.

2. 2

   Set the step count and size

   Ten steps at 10% each is the default. Fewer, larger steps read cleaner for small projects; more steps give a design system room to breathe. The preview updates live.

3. 3

   Read the ladder both directions

   Tints run toward white, shades toward black, tones toward gray — three tabs over the same base color. Watch which direction the hue drifts as you go; blues are the usual offenders.

4. 4

   Check contrast as you go

   The tool shows the contrast ratio of white and black text against each step. If your text color fails on your chosen background step, the fix is usually one step away rather than a new base color.

5. 5

   Export in your format

   Copy the whole ladder as CSS custom properties --scale-50 through --scale-900, as a plain hex list for design tools, or as JSON for design tokens. One click each.

The math is per-channel linear interpolation, and it is worth knowing cold because it explains everything the ladder does. A tint at strength t moves each channel toward white's 255: new value = current + (255 − current) × t. A shade at strength s moves each channel toward black's 0: new value = current × (1 − s). A tone mixes toward gray, usually #808080, with the same interpolation pattern.

Notice what these formulas imply. Because blue channels in saturated colors already sit near 255, tints barely change them — blue climbs from 246 to 248 at a 20% tint — while red, far from its ceiling, leaps from 59 to 98. The channel with the most headroom moves the most. That asymmetry is not a flaw; it is simply what mixing in sRGB does, and it is why tinted colors keep their hue identity while lightening. It is also why the hue drifts a little, since the three channels never move in lockstep.

The alternative school mixes in HSL instead: keep hue and saturation fixed, walk lightness toward 100%. The results are similar in spirit and different in the digits — a 20% sRGB tint of our example blue is #629BF8, while raising HSL lightness from 60% to 70% gives #6DA2F8. Same color family, visibly different swatches side by side. Neither is wrong. The sRGB route is what mix() in CSS does, what this generator does by default, and what most brand guidelines quietly assume; the HSL route keeps saturation at full blast, which can read as artificially vivid at the light end.

The modern option is CSS color-mix(), which interpolates in whatever color space you name — srgb, oklab, oklch, and friends. color-mix(in srgb, #3B82F6 80%, white) reproduces the 20% tint exactly. The perceptual spaces trade a little punch for steadier hue across the ladder. If your team argues about which is correct, the honest answer is that sRGB mixing matches four decades of brand-guideline practice, and OKLCH mixing matches human perception better — pick one per project and stay consistent.

Here is the complete ladder for #3B82F6 — RGB (59, 130, 246) — at 20% steps, every value computed with the formulas above and rounded to whole channels. This is the exact output the generator produces for this input.

Walk one cell by hand to see the machine at work. The 40% tint of green: 130 + (255 − 130) × 0.4 = 180, which is B4 in hexadecimal. Red: 59 + 196 × 0.4 = 137.4, which rounds to 137, hex 89. Blue: 246 + 9 × 0.4 = 249.6, rounds to 250, hex FA. The rounding matters at the light end of dark channels — a blue channel at 246 has only 9 units of headroom, so tint steps of 1.8 units each are at the edge of what whole channels can express.

/* The exported ladder, as the generator writes it */
:root {
  --brand-50:  #D8E6FD;
  --brand-100: #B1CDFB;
  --brand-200: #89B4FA;
  --brand-300: #629BF8;
  --brand-400: #3B82F6; /* base */
  --brand-500: #2F68C5;
  --brand-600: #234E94;
  --brand-700: #183462;
  --brand-800: #0C1A31;
}

WCAG contrast is symmetric — the ratio between #3B82F6 and white is the same number whether the blue is the background with white text on it or the text color on a white background. That symmetry means one table answers both questions for the whole ladder: how each step scores as a background under white text, and how it scores as text on a white background. Every value below is computed with the WCAG relative-luminance formula, rounded to two decimals.

The ledger exposes the pattern worth memorizing: every step of the ladder has exactly one compliant text color, except the narrow band where the base and its first shade sit. That band is where interface colors live — buttons, links, badges — and it is exactly where the base's 3.68 ratio strands white text below normal-text AA while black text squeaks by at 5.71. Move the fill one shade darker to #2F68C5 and white text jumps to 5.37 and passes; move the fill one tint lighter and black becomes the only option. Ladder-based design systems encode this as a rule: text sits at least two steps away from its background, in either direction.

Read as text colors on a white page, the same numbers flip roles. The base blue at 3.68 fails for body copy; shade 20% at 5.37 passes with margin; shade 40% at 8.11 and shade 60% at 12.31 are heading-grade darkness. A useful sanity check before any audit: compute the ratio of your brand anchor against white once, and you immediately know whether the brand color can be a text color at all or must remain a surface and accent color forever.

The formula is deterministic, which means its failure modes are deterministic too. These are the ones that bite in production:

• Blue-to-purple drift. Mixing toward white in sRGB shifts saturated blues toward violet, because the blue channel saturates while red keeps climbing. If the drift offends, regenerate with OKLCH-style mixing or hand-correct the two lightest steps.
• Indistinguishable light steps. Near white, 10% tint steps differ by two or three RGB units — invisible on most screens. At the light end, use bigger steps or accept that steps 90 and 100 are decorative twins.
• Muddy dark tints. Colors with low saturation produce shades that all converge to the same gray-black. A beige's shade ladder is a study in brown; consider a tone ladder or a second hue for dark-mode accents.
• Contrast cliffs. White text that passes on the base can fail on one lighter tint — 3.7 to 1 drops below 3 to 1 after a single 20% tint step. Check the ratio at every step you plan to put text on, not just the ones you plan to look at.
• Dark mode is not an inverted ladder. The shade end of a light-theme scale becomes the background tier in dark mode, but brand colors usually need their own dark-mode anchor — often one or two tints lighter than the light-theme base — rather than a reuse of the same ladder in reverse.
• Step-count mismatch with neighboring scales. If your blue ladder has 11 steps and your red ladder has 10, any UI that pairs them by index will be subtly off. Keep the count and the spacing identical across every color in the system.

Take the pattern from theory to a shipped feature. A checkout flow needs a destructive-action color, the designer hands over one anchor — #E11D48, RGB (225, 29, 72) — and every state below comes off the ladder at 20% steps, each contrast value computed with the WCAG formula:

The row that teaches the most is the hover. The instinct is to lighten a filled button on hover, but lightening to the 20% tint drops white text from 4.70:1 to 3.75:1 — below the 4.5:1 bar for normal-size labels. Darkening to the 20% shade moves the same interaction to 6.72:1, so the hover gets both a visible state change and a compliance cushion. The tint end is not wasted either: the 80% tint with the 60% shade as text is a 10.14:1 banner that stays unmistakably in the anchor's hue family.

Dark mode is where a one-directional palette dies and a ladder pays rent. Inverting the light theme fails because the shade end of the ladder was built for text, not for surfaces — but the same generated values recombine into a dark theme with almost no new colors. Here is the full split for the #3B82F6 ladder, with the ratios verified against the WCAG formula.

Two construction details carry the scheme. The elevated surface is a 20% tint of the background shade rather than a neutral gray, so cards stay in the brand's hue family instead of reading as pasted-on concrete — the difference between a dark theme and a merely darkened one. And the interactive color moves two tints up from the base, because #3B82F6 against #0C1A31 lands at 4.73:1, which technically passes normal text but reads muddy next to true white body copy; #89B4FA at 8.26:1 keeps links visibly bluish and comfortably compliant.

The mapping also explains a naming convention: export the ladder once as --brand-50 through --brand-800, and the dark theme consumes the same variables with different role assignments — light mode spends the dark steps on text, dark mode spends the light steps on text. One ladder, two themes, zero colors invented under deadline pressure.

Color ladders are infrastructure, and infrastructure has a maintenance staff:

• Design system engineers — turning one brand color into a scale of tokens with names like blue-500 and blue-700
• Brand managers — producing the 'permitted variations' page of the guideline PDF in a minute instead of an afternoon
• Front-end developers — filling in missing hover, focus, active, and disabled states with principled values instead of eyeballed ones
• Data visualization designers — building distinguishable series colors from a single brand anchor when the brand allows only one hue
• Accessibility auditors — finding the nearest passing step for a text-on-background combination without abandoning the palette
• Freelancers — delivering a professional-looking color system alongside a logo they were handed last Tuesday

The pattern uniting them: one authoritative color, many required variants, zero appetite for inventing each variant by taste. The ladder is how a single brand decision scales into dozens of interface states without drifting into fifty shades of consensus-by-committee.

Three directions from the same anchor, and a real reason to care which one you are walking:

The underused member of the family is the tone. Teams reach for tints and shades automatically and then wonder why their dashboards scream — five tints of brand blue all at full saturation will out-shout every number on the screen. Tones are the volume knob. A 60% tone of most brand colors sits comfortably behind data and still reads unmistakably as the brand, which is why mature visualization palettes lean on them.

One hidden constant in the tone column deserves daylight: the gray it mixes toward is #808080 — RGB (128, 128, 128), the exact midpoint of each channel, not a luminance-matched gray. The 20% tone of the example blue proves it: green sits at 130, two units above gray, and 130 + (128 − 130) × 0.2 = 129.6, which rounds back to 130 — the green channel barely moves because it is already gray. Red travels 59 → 73, blue falls 246 → 222, and the result, #4982DE, keeps roughly the lightness of the anchor while surrendering its saturation. That is the tone's job description: same seat at the table, lower voice.

And the comparison that matters at export time: mixing in sRGB versus mixing in HSL versus mixing in a perceptual space. The generator's default matches sRGB channel mixing — the same values color-mix(in srgb, ...) produces and the same values most brand guidelines were built on by hand. HSL lightness produces punchier light steps; OKLCH produces the steadiest hue. All three are one click apart here, and the ability to compare them on the same base color is the fastest education in color math we know of.

This tool does not even need your images. It operates on six hexadecimal digits you type — the ladder is arithmetic on three numbers, performed in the page and rendered as swatches. There is no file to process, no pixel data to read, and consequently no privacy surface at all.

The color you type never leaves the tab in any form we could read, because the computation is local JavaScript and the output is DOM elements on your screen. If you arrived from the Color Picker from Image with a hex code you pulled from a client photo, the trail ends here: photo processed locally, code typed locally, ladder generated locally. For something that touches brand systems worth real money, that closed loop is quiet, boring, and exactly right.

The ladder sits in the middle of a small color workflow:

• Image Color Extractor — upstream: pull the anchor color from a photograph or logo when no brand value exists
• Color Picker from Image — upstream alternative: grab one exact pixel's hex when you know the spot
• Duotone Image Maker — downstream: put two ladder values to work as a two-color treatment on real imagery

The loop closes nicely: extract, ladder, apply, and when the photography changes next season, the whole chain regenerates from a single new anchor color. That is the difference between a palette that is maintained and a palette that is survived.