Brand Kit
Turn one brand colour into a palette, shade scale, contrast checks, font pairing and a brand sheet PDF with CSS and tokens
#2563EB
White text: 5.1:1 AA
#EBAD25
White text: 1.9:1 Fail
#25C6EB
White text: 2:1 Fail
#4A25EB
White text: 7.6:1 AAA
#EB2563
White text: 4.2:1 Fail
#63EB25
White text: 1.5:1 Fail
About Brand Kit
Turns one brand colour into a full starter kit: a matching palette, a ten-step shade scale, contrast checks against white and black, a font pairing, and a brand sheet PDF with CSS variables, JSON design tokens and an SVG of the colours, all in one ZIP.
Type your brand name, pick your main colour and a font mood, and check the swatches and contrast results. Download the kit.
Check the AA/AAA marks before choosing text and button colours. A colour that looks fine to you can be hard to read for many people; 4.5:1 is the usual minimum for normal text.
- What does AA or AAA mean?
- They are levels from the web accessibility guidelines. AA needs a contrast ratio of 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 and 4.5:1.
- Are the fonts free to use?
- The suggested families are open-licence fonts from Google Fonts. Check the licence on the font's page if you need to be sure for your use.
- What is in the ZIP?
- A brand sheet PDF, a CSS file of colour and font variables, a JSON file of design tokens, and an SVG showing every colour.
- Can I use any colour?
- Yes, any six-digit code such as #2563EB. Short codes like #26E also work.
- Is my brand stored anywhere?
- No. It is built in your browser and erased when you close the tab. Use Back up to keep it on your device.
How to use Brand Kit
Type your brand name, choose your main colour and a font mood, then check the swatches and the contrast results. Download the ZIP: a brand sheet PDF, CSS variables, JSON design tokens and an SVG of all the colours.
When to use it
Use it when you are starting a small brand, a shop or a side project and want a consistent set of colours and fonts quickly, or when you need to check that your brand colour has enough contrast for readable text.
When not to use it
It does not design a logo, choose a colour for you, or replace a designer's judgement. It does not check colour-blind safety, print colour matching (CMYK) or trademark clashes.
Tips for best results
Pick a main colour with enough contrast for white text, so buttons work. Use the darker steps for text and the lighter steps for backgrounds. Keep to two fonts at most.
Limitations
The palette is calculated from your colour using standard colour maths, so related colours are a starting point, not a finished scheme. Contrast follows the WCAG 2 formula for text on plain white or black. Fonts are suggestions from free open-licence families that you load yourself. The shade scale keeps your hue, so the 500 step is close to, but not always exactly, your colour.
Privacy
Everything is worked out in your browser. Nothing is uploaded or stored by us, and your entries are erased when you close the tab; use Back up to keep a copy on your own device.
More from Design & Color: