Kleurcode-omzetter

Plak een kleur als hex (#ff6600 of #f60), rgb(255, 102, 0), door komma’s gescheiden 255, 102, 0 of hsl(24, 100%, 50%), en de converter geeft hem meteen terug in de andere twee formaten, met een live staalvoorbeeld en kopiëren met één klik per formaat.

Hoe kleurcodeconversie werkt

  1. 1

    Voer een kleur in een ondersteund formaat in

    Hex (#abc, #abcdef), rgb(r, g, b), door komma's gescheiden r, g, b of hsl(h, s%, l%).

  2. 2

    Geparseerd naar een interne representatie

    De tool converteert de waarde intern naar RGB en leidt daar de hex- en HSL-equivalenten uit af.

  3. 3

    Alle formaten weergegeven

    De bijbehorende hex-, RGB- en HSL-tekenreeksen worden zij aan zij getoond.

  4. 4

    Live voorbeeldstaal

    Toont de resulterende kleur in één oogopslag, zodat u de conversie kunt bevestigen voordat u kopieert.

Ondersteunde formaten

Formaat Voorbeeld Gebruik
Hex 3 #F66 Steno; alleen voor kleuren met herhaalde cijfers
Hex 6 #FF6B6B Standaard voor CSS en grafisch ontwerp
RGB rgb(255, 107, 107) CSS, JS, ontwerpsoftware
Door komma’s gescheiden 255, 107, 107 Zelfde als RGB zonder de functiesyntaxis
HSL hsl(0, 100%, 71%) Gemakkelijker te redeneren over tint/verzadiging/lichtheid

Wanneer gebruik je welke?

  • Hex voor statische CSS, ontwerpoverdracht.
  • RGB wanneer u de kanalen doorgeeft aan JavaScript of ontwerpsoftware.
  • HSL bij het aanpassen van helderheid of verzadiging, het mentale model is duidelijker dan RGB.

Andere formaten zoals HSV, CMYK, LAB, LCH en OKLCH bestaan in ontwerptools. Ze beschrijven dezelfde kleur op verschillende manieren, maar deze converter richt zich op de drie kernformaten hierboven.

Nauwkeurigheid

  • Conversies tussen hex, RGB en HSL zijn exact: hex en RGB zijn hetzelfde kleurmodel, en HSL wordt met een standaardformule uit RGB afgeleid.
  • HSL-waarden worden afgerond op hele getallen, dus een heen-en-weerconversie kan de laatste digit verschuiven. De zichtbare kleur is identiek; gebruik hex voor bitnauwkeurige rondreizen.

Veelgestelde vragen

Hex of rgb() voor brede compatibiliteit. hsl() wanneer u leesbaarheid wilt. Moderne browsers ondersteunen ook oklch() en andere formaten, maar hex blijft de veiligste standaard.

Nee, de converter accepteert alleen dekkende kleuren: hex van 3 of 6 cijfers, rgb() en hsl() zonder alfakanaal. Gebruik rgba() of 8-cijferige hex rechtstreeks in uw CSS.

Nee, de converter accepteert alleen de drie numerieke formaten. Gebruik een kleurkiezer of een online zoekopdracht om de benoemde kleur eerst naar hex om te zetten.

HSL wordt weergegeven met gehele tint-, verzadigings- en lichtheidswaarden, dus een rondreis kan een waarde met één punt verschuiven. De zichtbare kleur is identiek; gebruik hex wanneer u een exacte kopie nodig heeft.

Gerelateerde tools