Color → design system
Enter one color and auto-generate a palette, a gradient, and an AA/AAA contrast check.
Color → design system — A wired color pipeline: one HEX flows into a palette generator, whose base and complementary colors feed a contrast checker (AA/AAA) and a CSS gradient builder at the same time. Pick one color, get a whole design system.
Included tools
Color Converter
Convert colors between HEX, RGB and HSL with a live preview.
Color Palette Generator
Generate shades, tints and harmonious colors from one base HEX color, each with a copyable HEX value.
Color Contrast Checker
Check the WCAG contrast ratio between a foreground and background HEX color and see whether it passes AA and AAA for both normal and large text.
CSS Gradient Generator
Build a linear, radial or conic CSS gradient with custom color stops and an angle, preview the result live, and copy the ready-to-paste background rule.