🎨

Kleurconverter (HEX, RGB, HSL) FAQ

Hoe converteer ik HEX naar RGB?

Om een hexadecimale kleurcode naar RGB te converteren, splitst u de zescijferige hex-tekenreeks #RRGGBB in drie paren en converteert u vervolgens elk paar van hexadecimaal (grondtal 16) naar decimaal (grondtal 10).

Voorbeeld: #FF5733

  • FF = 255 (Rood)
  • 57 = 87 (Groen)
  • 33 = 51 (Blauw)
  • Resultaat: rgb(255, 87, 51)

Bij verkorte hex (#F53) vult u eerst elk cijfer aan tot een paar: #F53 wordt #FF5533. De cijfers worden verdubbeld: F wordt FF, 5 wordt 55, 3 wordt 33.

Achtcijferige hex (#RRGGBBAA) werkt op dezelfde manier, maar met een extra paar voor het alfakanaal. #FF573380 voegt 80 (128, oftewel ~50% opaciteit) toe voor het alfakanaal.

Voor directe conversies gebruikt u onze kleurenconverter. Deze verwerkt alle formaten, inclusief korte en lange hex, met en zonder alpha.

Wat is het verschil tussen RGB en RGBA?

RGB definieert een kleur met behulp van rode, groene en blauwe kanalen. RGBA is RGB met een extra alfakanaal dat de opaciteit regelt. De alphawaarde varieert van 0,0 (volledig transparant) tot 1,0 (volledig ondoorzichtig).

rgb(255, 0, 0)         /* Volledig ondoorzichtig rood */
rgba(255, 0, 0, 0.5)  /* Rood met 50% opaciteit */

In moderne CSS (CSS Color Level 4) is het rgba()-alias niet langer nodig. De functie rgb() accepteert nu een optioneel alfakanaal:

rgb(255 0 0 / 0.5)  /* Moderne syntaxis, rood met 50% opaciteit */

Alle moderne browsers ondersteunen deze syntaxis. De verouderde functie rgba() werkt overal en zal niet worden verwijderd, maar het gebruik van rgb() met de schuine-streep-syntaxis is de aanbevolen aanpak voor nieuwe code.

Hoe converteer ik RGB naar HSL?

Het converteren van RGB naar HSL omvat drie stappen:

  1. Normaliseer de RGB-waarden naar het bereik 0-1 (deel door 255)
  2. Zoek de min en max van de drie genormaliseerde waarden — het gemiddelde van min en max is de lichtheid (L)
  3. Bereken tint en verzadiging op basis van welk kanaal de max is en het verschil tussen max en min

De formule varieert afhankelijk van welk kleurkanaal domineert:

  • Als rood het maximum is: tint = (groen - blauw) / (max - min)
  • Als groen het maximum is: tint = 2 + (blauw - rood) / (max - min)
  • Als blauw het maximum is: tint = 4 + (rood - groen) / (max - min)
  • Verzadiging hangt af van de lichtheid: als L > 0,5, dan is verzadiging = (max - min) / (2 - max - min), anders is verzadiging = (max - min) / (max + min)

De wiskunde is niet triviaal en het is gemakkelijk om fouten te maken, dus het gebruik van een kleurenconverter-tool wordt aanbevolen voor directe resultaten.

Waarom zien mijn kleuren er op verschillende schermen anders uit?

De weergave van kleuren varieert tussen schermen om verschillende redenen:

Schermkalibratie — De meeste consumentenschermen zijn niet kleurgekalibreerd. De fabrieksinstellingen verschillen sterk in helderheid, contrast en kleurtemperatuur.

Verschillen in kleurruimte — Verschillende schermen ondersteunen verschillende kleurbereiken. sRGB is de webstandaard, maar veel moderne telefoons en laptops ondersteunen DCI-P3 (25% breder). Een kleur buiten de sRGB-kleurruimte ziet er op een breed-gamut display correct uit, maar wordt op een standaarddisplay afgekapt of verschoven.

Beeldschermtechnologie — OLED-schermen produceren diepere zwarten en meer verzadigde kleuren dan LCD-schermen. IPS-panelen hebben een betere kleurnauwkeurigheid dan TN-panelen.

Kijkhoek — Kleuren verschuiven wanneer u er vanuit een hoek naar kijkt, vooral op goedkopere displays.

Helderheid en omgevingslicht — Een scherm met 50% helderheid in een donkere kamer ziet er anders uit dan hetzelfde scherm met 100% helderheid in direct zonlicht.

Om verschillen te minimaliseren: Werk in de sRGB-kleurruimte, kalibreer uw monitor met een hardwarekalibrator en test uw ontwerpen op meerdere apparaten voordat u ze uitbrengt.

Waar is het HSL-kleurenmodel goed voor?

HSL (Hue, Saturation, Lightness) is ideaal voor programmatische kleurbewerking. Het grote voordeel is dat één kanaal de "kleur"-informatie draagt (tint), terwijl de andere twee het uiterlijk regelen, onafhankelijk van de tintwaarde.

Wat HSL gemakkelijk maakt:

  • Kleurenpaletten — Dezelfde tint aanhouden, lichtheid en verzadiging variëren om een volledige kleurenschaal te creëren
  • Hover- en actieve statussen — Lichtheid met een vast percentage wijzigen: hsl(220, 80%, 50%) -> hsl(220, 80%, 60%)
  • Donkere modus — Lichtheid over alle kleuren verlagen: 30% aftrekken van de lichtheid van elke kleur
  • Thema's — Tintwaarden omwisselen om volledig nieuwe kleurenschema's te genereren op basis van dezelfde verzadigings-/lichtheidstructuur
  • Uitgeschakelde statussen — Verzadiging verlagen om elementen te desatureren: hsl(220, 80%, 50%) -> hsl(220, 30%, 70%)

Waar HSL niet goed voor is:

HSL is niet perceptueel uniform. Twee kleuren met dezelfde lichtheidswaarde (bijv. hsl(60, 100%, 50%) — helder geel en hsl(240, 100%, 50%) — zuiver blauw) hebben een zeer verschillende waargenomen helderheid. Gebruik OKLCH voor perceptueel uniforme kleurbewerking.

Wat betekent de # in hex-kleuren?

Het voorvoegsel # (hekje of nummerteken) vertelt de CSS-parser dat de volgende tekens een hexadecimale kleurwaarde voorstellen. Het is de standaardnotatie in CSS en HTML voor hex-kleurcodes.

Het volledige formaat is #RRGGBB of #RRGGBBAA:

| Component | Betekenis | Voorbeeld (#FF5733) | |-----------|---------|---------------------| | # | Hex-voorvoegsel | Vereiste indicator | | RR | Rood kanaal | FF (255) | | GG | Groen kanaal | 57 (87) | | BB | Blauw kanaal | 33 (51) |

In HTML wordt # ook gebruikt voor ankerlinks (<a href="#section">), maar in een CSS-context of style-attribuut duidt het altijd een hex-kleur aan. HTML ondersteunt ook de verouderde "benoemde kleuren" (140 vooraf gedefinieerde namen zoals red, blue, rebeccapurple) waarvoor de # niet vereist is.

Wat is een kleurruimte en waarom is het belangrijk?

Een kleurruimte is het bereik van kleuren dat een apparaat kan weergeven of dat een kleurruimte kan vertegenwoordigen. Zie het als de "woordenschat" van kleuren die beschikbaar is voor een scherm of bestandsformaat.

Veelvoorkomende kleurruimten, van kleinste tot breedste:

| Kleurruimte | Relatieve grootte | Waar gebruikt | |-------------|--------------|------------| | sRGB | Basisniveau | Webstandaard, de meeste monitoren, alle browsers | | Adobe RGB | ~50% breder | Professionele fotografie, drukwerk | | DCI-P3 | ~25% breder | Moderne telefoons, Macs, veel laptops | | Rec. 2020 | ~75% breder | HDR-televisie, high-end displays |

Waarom het belangrijk is: Een kleur buiten de kleurruimte van een scherm kan niet nauwkeurig worden weergegeven. Het apparaat kapt de kleur af naar de dichtstbijzijnde waarde binnen de kleurruimte of benadert deze. Dit is waarom een levendig dieprood in een ontwerpbestand er op een standaard laptopscherm dof of modderig uit kan zien.

Voor webdesign: Ontwerp altijd in sRGB of controleer dat uw kleuren sRGB-veilig zijn. OKLCH en de kleurruimte display-p3 laten u bredere kleurruimten targeten, maar u moet een sRGB-fallback bieden voor standaardschermen.

Wat is het verschil tussen hex en hex met alpha?

Standaard hex (#FF5733) gebruikt zes cijfers en heeft geen alfakanaal — de kleur is altijd volledig ondoorzichtig. Hex met alpha (#FF573380) gebruikt acht cijfers en voegt aan het einde twee extra hex-cijfers toe voor het alfa- (opaciteit)kanaal.

Alphawaarden in hex:

| Hex-paar | Decimaal | Opaciteit | |----------|---------|---------| | 00 | 0 | Volledig transparant | | 80 | 128 | ~50% opaciteit | | FF | 255 | Volledig ondoorzichtig |

Voorbeelden:

#FF5733     — Effen rood-oranje, geen transparantie
#FF5733FF   — Zelfde kleur, volledig ondoorzichtig (overbodige FF)
#FF573380   — Zelfde kleur, 50% transparant
#FF573300   — Zelfde kleur, volledig onzichtbaar

Er is ook viercijferige verkorte hex met alpha: #F538 wordt uitgebreid naar #FF553388 (50% opaciteit).

Browserondersteuning: Achtcijferige hex wordt ondersteund in alle moderne browsers. Gebruik voor oudere browsers (Internet Explorer) rgba().

Hoe kies ik toegankelijke kleuren voor mijn website?

Volg dit stapsgewijze proces om een toegankelijk kleurensysteem op te bouwen:

1. Begin met een primaire merkkleur. Kies een tint die uw merk vertegenwoordigt en gebruik vervolgens HSL of OKLCH om een volledige schaal te creëren van zeer licht (achtergronden) tot zeer donker (tekst).

2. Stel uw tekst in op bijna-zwart. Hoofdtekst op witte achtergronden moet #1A1A1A tot #333333 zijn. Gebruik nooit puur zwart (#000000) op puur wit — dit veroorzaakt oogvermoeidheid bij sommige lezers. Donkergrijs op wit biedt betere leesbaarheid.

3. Controleer elk voorgrond-achtergrondpaar. Elke combinatie van tekst en achtergrond moet voldoen aan de WCAG-normen:

  • Normale tekst: minimaal 4,5:1 (WCAG AA)
  • Grote tekst: minimaal 3:1 (WCAG AA)
  • Streef naar 7:1 voor hoofdtekst (WCAG AAA)

4. Gebruik kleur nooit als enige onderscheidende factor. Links moeten onderstrepingen hebben (niet alleen een andere kleur). Foutstatussen moeten pictogrammen of tekst bevatten. Diagrammen moeten patronen of labels gebruiken.

5. Test met simulatoren voor kleurenblindheid. Deuteranopie (rood-groen) is de meest voorkomende vorm. Zorg ervoor dat uw ontwerp werkt zonder kleurwaarneming.

6. Controleer in grijstinten. Als uw ontwerp betekenis verliest wanneer het naar grijstinten wordt omgezet, vertrouwt u te veel op kleur om informatie over te brengen.

Gebruik onze kleurenconverter om direct de contrastverhoudingen tussen twee willekeurige kleuren te controleren.

Kleurconverter (HEX, RGB, HSL) FAQ - CoolTool