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.