How to find lighter and darker shades of a color

A practical guide from the makers of Color Picker from photos

One color is never enough. A button needs a darker pressed state; a brand color needs a pale background version; an illustration needs depth. Designers call lighter variations tints and darker ones shades, and generating them badly — by nudging RGB values at random — is how palettes drift into mud. Here's the reliable way.

Why naive lightening goes wrong

Adding white (or equal amounts to each RGB channel) desaturates a color as it lightens, so your confident teal becomes chalky. Good tint/shade generation keeps the hue stable while moving lightness — which is exactly what working in HSL terms does, and what you'd otherwise have to compute by hand.

Using Shade Explorer

1. Open Color Picker from photos and extract a palette from any image — or from a screenshot of the color you already have.
2. Tap the color you want to expand. In the detail view, open Shade Explorer.
3. Drag the slider toward lighter or darker. The HEX and RGB codes update live as you move.
4. Tap preset swatches to jump between useful stops, and copy any code with one tap.

A practical shade set for UI work

For most interface colors, four stops cover everything:

• Base: the extracted color itself.
• Dark (pressed/hover): noticeably darker, same hue.
• Light (subtle background): much lighter — think of it as the base color at a whisper.
• Deep (text on light): dark enough to read comfortably on the light stop.

Grab each from the slider, copy the codes, and you have a coherent mini-system instead of one lonely color.

Where the starting color comes from

Anything you can photograph or screenshot: a brand logo, a competitor's site, a fabric, a wall. Extract it, open Shade Explorer, and the whole tonal range of that color is a slider away.