Kleuren Omzetten Tussen HEX, RGB en HSL
Snel antwoord
Om een kleur te converteren: open de Color Converter, voer een kleur in in elk formaat (HEX, RGB, HSL) en de tool toont direct de equivalenten in alle andere formaten. Alle conversie gebeurt lokaal in je browser —geen data geüpload.
Invoering
Kleuren kunnen in meerdere formaten worden weergegeven: HEX (#ff6600), RGB (rgb(255, 102, 0)), HSL (hsl(24, 100%, 50%)) en andere. Verschillende tools en contexten gebruiken verschillende formaten —CSS gebruikt vaak HEX of RGB, design-tools HSL, en API's willekeurig. Converteren tussen formaten laat je een kleur in het ene systeem gebruiken in een context die een ander vereist.
Stap voor stap
-
Open het gereedschap Kleurconversie
Ga naar de pagina Kleurconverter. De tool ondersteunt de formaten HEX, RGB, HSL, HSV en CMYK.
-
Voer uw kleur in
Typ of plak een kleurwaarde in een ondersteunde indeling. Voorbeelden: '#ff6600', 'rgb(255, 102, 0)', 'hsl(24, 100%, 50%)'. De tool detecteert automatisch het invoerformaat.
-
Bekijk alle formaatequivalenten
De tool geeft de kleur tegelijkertijd in alle formaten weer: HEX, RGB, HSL, HSV en CMYK. Het toont ook een kleurvoorbeeld, zodat u kunt controleren of de conversie correct is.
-
Kopieer het formaat dat u nodig heeft
Klik op de knop Kopiëren naast een willekeurig formaat om die waarde naar uw klembord te kopiëren. Gebruik het in uw CSS, ontwerptool of applicatie.
-
Pas de kleur aan (optioneel)
Met sommige tools kunt u de kleur aanpassen met schuifregelaars (voor HSL: tint, verzadiging, helderheid) en alle formaten in realtime zien bijwerken. Dit is handig voor het vinden van verwante kleuren of tinten.
Voorbeelden
HEX tot RGB en HSL
Invoer: #ff6600
Uitvoer: __HOUDEN_34__: rgb(255, 102, 0)
HSL: hsl(24, 100%, 50%)
RGB tot HEX
Invoer: rgb(0, 128, 255)
Uitvoer: __BEHOUD_35__: #0080ff
HSL: hsl(210, 100%, 50%)
HSL tot HEX
Invoer: hsl(120, 100%, 50%)
Uitvoer: __BEHOUD_35__: #00ff00
__HOUDEN_34__: rgb(0, 255, 0)
Veelvoorkomende problemen
- HEX met versus zonder # —sommige tools vereisen het voorvoegsel #, andere niet. Onze converter accepteert beide.
- 3-cijferig versus 6-cijferig HEX —#f60 is een afkorting voor #ff6600. Beide zijn geldig; de converter normaliseert naar 6 cijfers.
- HSL tintbereik —tint is 0-360 graden (een cirkel). 0 en 360 zijn beide rood. Waarden boven 360 wikkelen zich rond.
- Verschillen in kleurruimte —HEX, RGB en HSL zijn allemaal sRGB. CMYK is een andere kleurruimte (print) en de conversie is bij benadering.
Tips
- Gebruik HSL voor het maken van kleurvariaties. Het aanpassen van de tint, verzadiging of helderheid is intuïtiever dan RGB.
- Gebruik HEX voor CSS: dit is het meest compacte en breed ondersteunde formaat in stylesheets.
- Gebruik RGB als u alfatransparantie —rgb(255, 102, 0, 0,5) moet instellen voor een dekking van 50% (of gebruik 8-cijferige HEX: #ff660080).
- Gebruik onze Color Converter voor directe, privéconversie tussen alle kleurformaten.