Color Palette Generator

This tool generates a full palette of tints and shades from a single base colour, giving you a coordinated set of lighter and darker variations to use in a design. Picking one colour is easy; building a harmonious range around it is the part that trips people up. Good design rarely uses a single flat colour: it needs lighter tints for backgrounds, highlights and hover states, and darker shades for text, borders and depth, all derived from the same base so they sit together naturally. Creating these by hand means fiddling with colour values until they look right, which is slow and inconsistent. This generator does it instantly and systematically. You choose a base colour, and the calculator produces a series of tints, made by blending the colour toward white in even steps, and a series of shades, made by blending it toward black, each shown as a swatch with its hex code ready to copy. The palette updates as you change the base colour, so you can explore options quickly. Use it to build a colour scheme for a website, app, brand or document, to find accessible lighter and darker versions of a brand colour, or simply to generate a set of matching colours from one you like. Tints and shades derived this way always coordinate, because they share the same underlying hue, which is the secret to a palette that looks deliberate rather than thrown together. The hex codes can be dropped straight into CSS, design software or a style guide. For text contrast, pair a light tint background with a dark shade for the text, and check the contrast meets accessibility guidelines.

Tints blend the colour toward white; shades blend toward black. Hex codes are ready for CSS. Check text contrast against backgrounds for accessibility.