Handig · design and colour
Colour and design, drawn to measure
Check the contrast of your colours, take a palette from a photo, make a colour scale or a soft shadow. Kleurstaal works everything out in your own browser: whatever you paste or drop goes nowhere.
- Stays on your device
- No account
- Free and unlimited
- On white
- 9.52:1 · AAA
- On black
- 2.20:1 · –
Drag across the fan or use the arrow keys. This colour in the contrast tool
Start here
Your own colour or picture
A colour in any notation, a photo, logo or SVG. Kleurstaal suggests the tools that fit. Everything stays on your device.
The toolbox
14 tools for colour and design
Colour
Contrast, palettes, pipette, colour codes, harmonies, scales and colour blindness.
- Colour contrast checkerIs your text readable on that background? WCAG AA and AAA, with a colour that does pass.
- Contrast matrixEvery colour of your palette on every other: which pairs reach AA or AAA?
- Palette from an imageThe main colours of a photo or logo, as HEX, CSS or Tailwind. The photo stays on your device.
- Colour from an imagePoint at a colour in a photo or screenshot and copy its code.
- Colour converterFrom HEX to RGB, HSL, HWB, OKLCH, OKLab and CMYK, with the nearest CSS name.
- Colour harmonyComplementary, analogous, triadic and more, from one colour on the OKLCH wheel.
- Colour scaleOne colour into a scale from 50 to 950, with the contrast of every step. For CSS and Tailwind.
- Colour-blindness simulatorSee your design or palette as someone with protanopia, deuteranopia, tritanopia or no colour vision sees it.
Form
Gradients, shadows, font pairings and a fluid type scale.
- Gradient generatorLinear, radial or conic, with as many colours as you like and no grey stripe in the middle. CSS ready.
- Shadow generatorSoft, layered shadows instead of borders, with a preview in light and dark.
- Font pairingHand-picked font pairs for headings and body text, with a preview in four languages.
- Fluid type scaleFont sizes that grow from phone to wide screen, with clamp().
Web
Clean up SVGs and write meta tags for your page.
Everything in your browser
Kleurstaal works on your own computer or phone. Whatever you paste or open goes to no server at all, not even for a moment.
No account
No email address, no password, no sign-up. Open it and start right away.
One exception, to be honest
Only the font pairing preview fetches fonts from Google Fonts, and only when you ask. The code you take with you hosts them yourself.
No ads, no tracking
No cookies to follow you, no adverts. Kleurstaal is a free tool from nealvdv.
Part of Handig
More free tools
Kleurstaal is part of Handig: free tools for everyday file jobs, all in your browser and without an account.
Made to measure
Your own house style on your website?
nealvdv builds websites and admin systems for businesses and clubs, with colours that stay readable and tools like this built in where they help.
Go to nealvdv.be (opens in a new tab)