Kies online een kleur met deze gratis color picker en kopieer direct de hex-, RGB-, HSL- of CMYK-code. Inclusief tinten, kleurcombinaties en pipet.
Met deze kleurenkiezer (in het Engels: color picker) kies je visueel een kleur en krijg je direct de bijbehorende kleurcode in vier notaties: hex, RGB, HSL en CMYK. Sleep in het grote kleurvlak, schuif de kleurtoon en de doorzichtigheid naar wens en kopieer daarna de code met één klik. Handig voor websites, presentaties, posters, schoolopdrachten en elk ander project waarin kleur een rol speelt. Alles wordt lokaal in je browser berekend.
JaHandig
#3b82f6. Je plakt hem zo in CSS, Word, Canva of Photoshoprgb(59, 130, 246)hsl(217, 91%, 60%)Klik of sleep in het kleurvlak om de verzadiging (links-rechts) en de helderheid (omhoog-omlaag) te kiezen. Met de schuif eronder verander je de kleurtoon, van rood via groen en blauw weer terug naar rood. De alpha-schuif maakt de kleur doorzichtig; zet je die op minder dan 100%, dan krijg je automatisch een rgba- of hsla-code en een hexcode met 8 tekens. Heb je al een code? Plak hem in het invoerveld en de kiezer springt er meteen naartoe. In browsers zoals Chrome en Edge zie je bovendien een pipetknop waarmee je een kleur van je scherm kunt oppakken. Onder het voorbeeld staan tinten van je kleur (van licht naar donker) en passende kleurcombinaties; klik op een blokje om die kleur over te nemen.
Een beeldscherm maakt elke kleur door rood, groen en blauw licht te mengen. Elke kleur op je scherm is daarom vast te leggen met drie getallen van 0 tot en met 255: de RGB-waarde. Alle andere notaties zijn daar een omrekening van.
Een hexcode is dezelfde RGB-waarde, maar dan geschreven in het zestientallig stelsel (hexadecimaal). Elk van de drie getallen wordt twee tekens, van 00 (0) tot ff (255), en die plak je achter elkaar met een hekje ervoor:
Voorbeeld: rgb(59, 130, 246). In hexadecimaal is 59 gelijk aan 3b, 130 aan 82 en 246 aan f6. Achter elkaar wordt dat #3b82f6.
HSL beschrijft een kleur zoals mensen erover praten: welke kleurtoon is het (hue), hoe fel is hij (saturation) en hoe licht is hij (lightness)? De kleurtoon is een hoek op de kleurencirkel: rood staat op 0°, geel op 60°, groen op 120°, cyaan op 180°, blauw op 240° en magenta op 300°. Voor de lichtheid deel je eerst de R-, G- en B-waarde door 255, zodat ze tussen 0 en 1 liggen. Daarna geldt:
Voorbeeld: bij rgb(59, 130, 246) is na deling door 255 de hoogste waarde 0,96 (blauw) en de laagste 0,23 (rood). De lichtheid is dan (0,96 + 0,23) / 2 = 0,60, oftewel 60%.
De verzadiging geeft aan hoe ver de kleur van grijs af ligt: 0% is een grijstint, 100% is zo fel mogelijk. Zijn de drie RGB-waarden gelijk aan elkaar, dan is er geen kleurtoon en heb je grijs, wit of zwart.
Drukwerk mengt geen licht maar inkt: cyaan, magenta, geel en zwart (de K staat voor "key"). Hoe meer inkt, hoe donkerder het resultaat, precies andersom dus. Voor de omrekening deel je R, G en B eerst door 255. De hoeveelheid zwart volgt uit de hoogste van die drie waarden, daarna reken je de drie kleuren uit:
Magenta en geel bereken je op dezelfde manier, maar dan met de G-waarde en de B-waarde in de teller. Voorbeeld: bij rgb(59, 130, 246) is de hoogste waarde 0,96, dus K = 1 − 0,96 = 0,04 (4% zwart). Voor cyaan: (1 − 0,23 − 0,04) / (1 − 0,04) = 0,76, dus 76% cyaan. Zo kom je uit op cmyk(76%, 47%, 0%, 4%).
Er is geen verschil in de kleur zelf, alleen in de schrijfwijze. Een hexcode is dezelfde combinatie van rood, groen en blauw, maar dan genoteerd in het zestientallig stelsel. Zo is #3b82f6 exact dezelfde kleur als rgb(59, 130, 246). In CSS en de meeste programma's kun je beide gebruiken.
H staat voor hue (kleurtoon): een hoek van 0 tot 360 graden op de kleurencirkel. S staat voor saturation (verzadiging): 0% is grijs, 100% is zo fel mogelijk. L staat voor lightness (lichtheid): 0% is zwart, 100% is wit en rond de 50% is de kleur op zijn krachtigst. HSL is handig om kleuren aan te passen: wil je dezelfde kleur iets donkerder, dan verlaag je alleen de L.
Een scherm mengt licht en kan daardoor fellere kleuren tonen dan inkt op papier ooit kan. De CMYK-waarde uit deze tool is een rekenkundige omrekening en een goed startpunt, maar het eindresultaat hangt ook af van de drukker, de inkt en het papier. Laat je iets professioneel drukken, vraag dan om een proefdruk of gebruik het kleurprofiel van de drukker.
De eerste 6 tekens zijn de gewone kleur, de laatste 2 geven de doorzichtigheid (alpha) aan: ff is volledig dekkend en 00 volledig doorzichtig. Zo is #3b82f680 dezelfde blauwe kleur op halve dekking. Zet je in deze tool de alpha-schuif op minder dan 100%, dan krijg je automatisch zo'n 8-cijferige code. Alle moderne browsers ondersteunen dit in CSS.
Klik op de knop "Pipet: kies van scherm" en klik daarna op een willekeurige plek op je beeldscherm, ook buiten de browser. De kleur van die pixel wordt meteen overgenomen. Deze pipet werkt in browsers die de EyeDropper-functie ondersteunen, zoals Chrome en Edge; in bijvoorbeeld Firefox en Safari is de knop niet zichtbaar.