Je hebt de perfecte kleur gevonden in HEX-formaat, maar het ontwerpprogramma dat je gebruikt vereist RGB. Of een klant heeft een kleur in RGB gestuurd en je hebt de HSL-waarde nodig voor je CSS. Kleurformaatconversie is een dagelijkse taak voor ontwerpers en ontwikkelaars. Onze Kleurenconverter maakt het direct.
Wat je nodig hebt
- Een kleurwaarde in elk formaat (HEX, RGB, HSL of andere)
- Een webbrowser (Chrome, Firefox, Safari of Edge)
- Geen account of installatie vereist
Stapsgewijze handleiding
Voer je kleurwaarde in
Open de Kleurenconverter. Typ of plak je kleurwaarde in een willekeurig ondersteund formaat. Voer bijvoorbeeld #3B82F6 in als HEX-waarde, rgb(59, 130, 246) als RGB, of hsl(217, 91%, 60%) als HSL. De tool herkent het formaat automatisch.
Bekijk alle formaatconversies
De tool toont direct je kleur in elk ondersteund formaat: HEX, RGB, HSL en meer. Je ziet een live voorbeeld van de kleur naast alle equivalente waarden. Als je de kleur wilt aanpassen, gebruik dan de kleurenkiezer om deze visueel te verfijnen.
Kopieer het gewenste formaat
Klik op de kopieerknop naast een formaat om de waarde naar je klembord te kopiëren. Plak het direct in je CSS-bestand, ontwerpprogramma of waar je het ook nodig hebt. Geen handmatig overtypen nodig.
Goed om te weten De Kleurenconverter draait volledig in je browser. Het werkt offline zodra het is geladen en vereist geen account of installatie.
Kleurformaten begrijpen
Verschillende tools en contexten gebruiken verschillende kleurformaten. Hier is wanneer je elk formaat gebruikt:
HEX
Het meest gebruikte formaat op het web. Een HEX-kleur begint met # gevolgd door zes tekens (letters en cijfers), zoals #FF5733.
- Gebruikt in: CSS, HTML, ontwerpprogramma's (Figma, Sketch, Photoshop)
- Formaat:
#RRGGBBwaarbij elk paar een hexadecimale waarde is van 00 tot FF - Voorbeeld:
#3B82F6(een middenblauw)
RGB
Beschrijft een kleur aan de hand van de Rode, Groene en Blauwe componenten, elk variërend van 0 tot 255.
- Gebruikt in: CSS (
rgb()-functie), programmeertalen, LED-verlichting - Formaat:
rgb(rood, groen, blauw) - Voorbeeld:
rgb(59, 130, 246)
HSL
Beschrijft een kleur aan de hand van Tint (0-360 graden op het kleurenwiel), Verzadiging (0-100%) en Helderheid (0-100%).
- Gebruikt in: CSS (
hsl()-functie), kleurtheorie, ontwerpsystemen - Formaat:
hsl(tint, verzadiging%, helderheid%) - Voorbeeld:
hsl(217, 91%, 60%)
Tip HSL is het meest intuïtieve formaat om kleuren aan te passen. Wil je een lichtere tint? Verhoog de helderheidswaarde. Wil je een gedemptere toon? Verlaag de verzadiging. Dit maakt HSL ideaal voor het opbouwen van kleursystemen en het creëren van variaties op een basiskleur.
Wanneer welk formaat gebruiken
| Situatie | Aanbevolen formaat |
|---|---|
| CSS met de hand schrijven | HEX (kort en vertrouwd) of HSL (makkelijk aan te passen) |
| Specificaties voor ontwerpprogramma's | HEX (industriestandaard) |
| Dynamische kleurmanipulatie in code | HSL (het gemakkelijkst programmatisch aan te passen) |
| Kleuren communiceren naar klanten | HEX (meest universeel herkend) |
| Printontwerp | CMYK (apart van schermformaten) |
Verder dan enkele kleuren
Zodra je je kleur hebt geconverteerd, kun je gerelateerde tools verkennen:
- Verloopgenerator: Maak vloeiende CSS-verlopen met je kleuren. Voer twee of meer kleuren in en krijg de verloopcode klaar om in je stylesheet te plakken.
- Kleurpaletgenerator: Genereer harmonieuze kleurpaletten op basis van je startkleur. Krijg automatisch complementaire, analoge, triadische en andere kleurenschema's.
Deze tools werken nauw samen met de Kleurenconverter om je te helpen een compleet kleursysteem voor je project op te bouwen.
Belangrijk Kleuren kunnen er anders uitzien op verschillende schermen door schermkalibratie, kleurprofielen en helderheidsinstellingen. Wanneer kleurnauwkeurigheid cruciaal is (branding, printontwerp), verifieer je kleuren dan altijd op het doelmedium, niet alleen op je scherm.
Veelgestelde vragen
Wat is het verschil tussen HEX en RGB?
Ze vertegenwoordigen dezelfde informatie in verschillende notaties. HEX gebruikt hexadecimaal (basis-16) en RGB gebruikt decimaal (basis-10). #FF0000 en rgb(255, 0, 0) zijn beide puur rood.
Kan ik converteren naar CMYK voor print? Schermkleurformaten (HEX, RGB, HSL) en printformaten (CMYK) zijn fundamenteel verschillende kleurmodellen. Er bestaat een wiskundige conversie, maar voor nauwkeurige printkleuren gebruik je het best een professioneel kleurbeheer-tool.
Hoe zit het met transparantie (alfa)?
HEX ondersteunt alfa met twee extra tekens (#3B82F680). RGB en HSL ondersteunen het als rgba()- en hsla()-functies. De Kleurenconverter verwerkt deze formaten ook.
Volgende stappen
Met je kleuren geconverteerd kun je de Verloopgenerator proberen om mooie CSS-verlopen te maken, of de Kleurpaletgenerator gebruiken om een compleet kleurenschema rond je gekozen kleur op te bouwen.