Brand Kit Generator
Start from a colour or your logo. Get even palettes, a second colour that suits it, light and dark themes, a font pairing, your colours on a website, card and post, and a one-page brand sheet. Every contrast is measured, not guessed.
Why the steps look right
The usual way to build a ramp is to hold the hue and walk lightness in HSL. It's also why so many generated palettes have muddy middles: HSL's lightness isn't perceptual. Pure yellow and pure blue both sit at 50%, and one of them is blinding.
Asked in HSL
Same ten targets. The worst step lands 0.086 away from the lightness it was given, which is why the middle of an HSL ramp goes muddy while the numbers still look tidy.
Asked in OKLCh
The same ten targets, off by at most 0.001. This is the ramp the tool builds.
The figure under each swatch is its perceptual lightness, measured back out of the colour above it. Both rows were built from the same ten targets and the same starting colour: #6467f2.
This builds the ramp in OKLCh instead, a space designed so equal steps in lightness look like equal steps. When a step would be too saturated for a screen to show, the saturation comes down rather than the channels being clipped. Clipping is what shifts the hue and gives you a ramp that drifts from orange to brown.
The contrast figures are measured, not estimated. The lightness targets and the line-height suggestions are opinions, and the tool says which is which rather than presenting all of it as fact.
If you need the whole system (logo, type, the rules for using them) that's brand & design systems work, and it starts with a conversation rather than a hex code.
Common questions
Two things. The ramp is built in a perceptual colour space, so the steps look evenly spaced instead of merely being evenly spaced in numbers. The usual approach produces muddy middles and ends that bunch up. And every step tells you whether black or white text actually passes contrast on it, which is the question you'll hit the moment you try to use the colour.
They're the WCAG 2.1 formula computed on the exact hex shown, so yes. Worth being precise about what they cover: contrast between a text colour and a solid background. They say nothing about text over a photo, over a gradient, or at a weight so light it's hard to read at any ratio.
Yes. Choose your logo under "Or read it off your logo" and the main colours appear as chips; tap one to build the kit from it. The image is read in your browser and never uploaded. It works best on a logo with a few flat colours; a photo gives you its strongest few.
Showing them would mean this page fetching fonts from Google, and the site makes no requests to anyone else. Each font name links to its Google Fonts page, where you can see and download it for free. The preview uses a similar system font so you can judge the layout.
No. It's a starting palette and a type scale: the mechanical part. A brand is what you sound like and what you're for, and no tool derives that from a hex code. This gets you a coherent set of colours to build with instead of picking shades one at a time until they clash.
Because it's a mid-tone. Colours in the middle of the lightness range are too dark for black text and too light for white, and no amount of wanting changes that. Use it for a shape, a border, or a chart fill, and put words on the steps that pass.
Beyond the palette
The hard half is a set of rules everyone actually follows, so the site, the invoice and the van all look like the same company.
Fixed price agreed before work starts. No hourly billing, no surprises.
