Color Shades Generator

Build a full range from one colour

A single brand colour is rarely enough on its own; a real design needs lighter tints for backgrounds and subtle fills, and darker shades for text, borders and depth. This generator produces a full palette of both tints and shades from any base colour you give it, so you have the entire usable range that one hue can provide, all consistent with each other. It turns one starting colour into a complete, coherent set you can build an interface around.

Tints, shades and why they help

A tint mixes the base colour gradually toward white to give lighter versions, while a shade mixes it toward black to give darker ones, and having a consistent set of both lets you construct an interface from a single hue: a pale tint sitting behind a card, the base colour itself as an accent, and a deep shade for readable text on top. Because every one of them derives from the same original colour, the whole palette stays visually coherent, which is precisely what makes a design look intentional rather than assembled from unrelated colours.

Copy the values

It runs entirely in your browser, so nothing you enter is uploaded and the generated code is yours to paste straight into a project. Because it works client-side, you can iterate freely, regenerating as often as you like without a round trip to any server.

Related tools

• Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
• Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
• Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
• Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.