Build the kit.Ship the code.
21 free tools for designers and developers: colour, type, shadows, components and accessibility checks. They share one design system, and everything exports to code.
New here? Start with one of these
Make a colour palette
Start from one colour, or shuffle until something clicks.
Open Palette
Aa10.6:1
AAA
AAA
Check text is readable
Test any text and background against WCAG.
Open Contrast checker
--color-1: #1B3A4B;
--color-2: #3D8B7D;
--color-3: #F2C14E;
--color-4: #F07F5A;
Turn it into code
CSS, Tailwind, JSON, Swift, Flutter or Android.
Open Export tokens
Your palette: Harbour study
Every preview on this page is drawn in these colours. Change them in any tool and the others follow.