By Team Edtoolkits · Design & branding
Turn a brand colour into an even 50 to 950 scale of tints and shades for design systems. Check text contrast on each step and copy CSS variables, Tailwind, SCSS or JSON.
Use the guide alongside the working tool.
Open Color Shade Generator →Get started
Pick your brand colour and name the scale.
Adjust and explore
Check each step and its text contrast.
Save and share
Copy the CSS, Tailwind, SCSS or JSON code.
Privacy and limits
The scale follows a smooth lightness curve, not a hand-tuned set, so adjust steps by eye for important brand work. Contrast notes use WCAG 2.x. Your colours stay on your device.
Ready to apply this workflow?
Try Color Shade Generator →Explore a related workflow
- CSS Gradient Generator: A Practical Guide
Design linear, radial and conic gradients with editable stops, then export CSS, PNG or supported SVG.
- CSS Shadow Generator: A Practical Guide
Create layered box or text shadows with live preview, precise controls and ready-to-copy CSS.
- Product Mockup Maker guide
Place artwork in phone, laptop, book, poster, shirt and mug mockups.
- Seamless Pattern Maker: design and export guide
Design seamless repeats with straight, brick, half-drop and mirrored layouts. Export the repeat tile or a finished pattern.
Keep your original files and review the result. Found unclear instructions? Contact Team Edtoolkits.