Color Palette from Hex — Turning One Brand Color into a Full Scale

Most projects don't start with a palette — they start with one color. A brand hex from the logo, a hue the client approved, a value inherited from the old site. The real task is turning that single hex into the ten-or-so coordinated values an interface actually needs. The Color Palette Generator from Hex does exactly that: enter one base color and get a graduated scale of tints and shades around it.

The math behind a palette from one hex

A tint is your color interpolated toward white; a shade is your color interpolated toward black. The generator computes both directions symmetrically: choose a step count and it returns that many tints, your original hex in the middle, and that many shades. Because every output derives mathematically from your input, the scale stays on-brand by construction — it is your color at every lightness, not a neighboring hue that drifted in.

That derivation is what separates a palette-from-hex tool from a random palette generator. Random palettes answer "what colors could work together?"; a hex-derived scale answers "what does my color look like as a system?"

Mapping the scale to real frameworks

Modern UI color systems — Tailwind, Material, Chakra — all use the same convention: a single hue expressed as a numbered lightness scale, typically 50 through 950. Set the generator to 5 steps and you get exactly eleven outputs: five tints, your base, five shades. Map them in order onto Tailwind's 50–950 slots, with your brand color sitting at 500, and your custom color behaves like a first-class framework citizen:

• tints 50–400 → backgrounds, hover fills, subtle borders
• base 500 → primary buttons, links, brand moments
• shades 600–950 → text on light backgrounds, pressed states, dark-mode surfaces

For design tokens, paste the scale into CSS custom properties (--brand-100 … --brand-900) or a tokens JSON file. When the brand color changes, regenerate from the new hex and the token structure survives intact — one click, same slots, updated values.

The pitfalls of linear blending

Linear tint/shade math has two known behaviors worth designing around. Blending toward white desaturates — light steps can turn chalky, especially from an already-muted base. Blending toward black darkens fast — the deepest shades of saturated colors can read as near-black mud. Two practical responses: start from a slightly more saturated base than you think you need and let the tints do the softening; and treat the generated scale as the draft, hand-nudging only the two or three stops your UI actually leans on. And whatever the scale looks like, verify text-on-background pairs with a contrast checker — derivation from one hue does not guarantee WCAG ratios between arbitrary stops.

Frequently asked questions

How do I make a color palette from a hex code?

Paste the hex into the base color field, set the step count, and generate. You get the full tint-base-shade scale in one click, with every value in copy-ready #RRGGBB format.

What's the difference between a tint, a shade, and a tone?

Tint = mixed with white, shade = mixed with black, tone = mixed with grey. This generator produces tints and shades; tones are rarer in UI work because grey-mixing dulls interactive elements.

How many steps should I use?

Five steps (eleven outputs) maps directly onto Tailwind/Material-style 50–950 scales. Three steps suits a compact component palette; ten gives fine-grained control for data-heavy interfaces.

Why does my light end look washed out?

Linear blending toward white desaturates — it's inherent to the math, and most visible on muted bases. Start from a more saturated base, or hand-adjust the lightest stops you actually use.

Related color tools

The Color Palette Generator handles the "I don't have a color yet" case, the Monochromatic Palette Generator explores a single hue more loosely, and the 5-Color Palette Generator produces compact multi-hue sets to pair against your derived scale.

Open the Color Palette Generator from Hex, paste your brand color, and generate — free, instant, no signup. One hex in, a working color system out. More tools live in the colors category.