Labs · Palette
One colour. A whole palette.
Pick your brand colour and get a complete scale from light to dark, matching colour combinations and a check that your text is readable.
Your colour scale
Click a colour to copy its code.
Colours that go with it
Complementary
Analogous
Triadic
Is your text readable?
Tested against the WCAG accessibility guidelines.
- AaWhite text on your colour8.42 : 1AAA
- AaBlack text on your colour2.49 : 1Not readable
- AaYour colour as text on white8.42 : 1AAA
- AaYour colour as text on dark2.35 : 1Not readable
Use it in your code
:root {
--brand-50: #f8f5fe;
--brand-100: #ece5ff;
--brand-200: #dacbfd;
--brand-300: #c1a6f9;
--brand-400: #a982f0;
--brand-500: #8f63d9;
--brand-600: #7547bb;
--brand-700: #6231a4;
--brand-800: #461f79;
--brand-900: #33105d;
--brand-950: #1e013e;
}Need a complete brand identity?
Colour is one part. We build the whole brand: logo, typography and everything that comes with it.