Design and colour
Kleurstaal“kleurstaal”, Dutch for colour swatch
Check colour contrast, pull a palette from a photo, make gradients, shadows and meta tags.
Online14 tools
All tools of Kleurstaal (14)
Every tool has its own page on Kleurstaal, in your language. Click and you can start right away.
- Colour contrast checkerCheck whether your text colour is readable on its background under WCAG, with a nearby colour that passes.
- Palette from an imageTake the main colours from a photo or logo, ready to copy as HEX, CSS or Tailwind.
- Colour converterConvert a colour code to HEX, RGB, HSL, OKLCH, CMYK and more, with the nearest CSS name.
- Colour scaleTurn one brand colour into a full scale from 50 to 950, with the contrast of each step.
- Gradient generatorMake a linear, radial or conic gradient without a grey stripe in the middle, as CSS to copy.
- Shadow generatorMake soft, layered shadows that look real, with a preview on light and dark.
- Font pairingPick from twelve font pairs for headings and body text and try them with your own text.
- Optimize an SVGMake an SVG smaller by removing unnecessary code, with before and after side by side.
- Meta tag generatorWrite the title, description, Open Graph and hreflang tags for your page, with a search result preview.
- Colour-blindness simulatorSee an image or colour palette the way someone with colour blindness sees it.
- Contrast matrixPut every colour of your palette on every other and see which pairs reach AA or AAA.
- Colour from an imagePoint at a colour in a photo or screenshot and copy its code.
- Colour harmonyFind complementary, analogous or triadic colours for one colour, on the OKLCH wheel.
- Fluid type scaleMake font sizes that grow from phone to wide screen, as CSS with clamp().
What Kleurstaal does
Kleurstaal is Handig’s drawing table, for anyone making a poster, a house style or a website. Is that text readable on that colour? Which colours are in my logo? How does someone with colour blindness see this? All in your browser.
Where the work happens
On your device
Everything happens in your browser. Nothing is sent.
The page of each tool says it again, exactly for that tool.