Handleiding: Kleurenconverter Gebruiken
Doel van deze Converter
Deze tool helpt u bij het omzetten van kleuren tussen het RGB (Rood, Groen, Blauw) model en het Hexadecimale (HEX) model, die veel gebruikt worden in webdesign en grafische software. U ziet direct hoe de geconverteerde kleur eruitziet.
Stap 1: Kleur Invoeren
- Optie 1 (RGB): Voer getallen tussen 0 en 255 in de velden R, G en B.
- Optie 2 (HEX): Voer een 6-cijferige hex-code (bv.
FF0000
) of een 3-cijferige shorthand code (bv.F00
) in het HEX-veld. Het '#'-teken is optioneel.
Stap 2: Automatische Conversie
- Zodra u een geldige waarde in een van de velden (R, G, B of HEX) invoert, worden de andere velden automatisch bijgewerkt met de geconverteerde waarde.
- Er is geen aparte "Converteren" knop nodig.
Stap 3: Resultaat & Preview
- De vierkante kleurenpreview onder de invoervelden toont direct de kleur die overeenkomt met de ingevoerde/geconverteerde waarden.
- Als u ongeldige waarden invoert (bv. R=300 of HEX="GHIJKL"), wordt het veld rood gemarkeerd en verschijnt er een foutmelding onder het veld. De andere velden en de preview worden dan niet bijgewerkt.
Belangrijke Aandachtspunten
- RGB Bereik: Waarden voor R, G en B moeten gehele getallen tussen 0 en 255 zijn.
- HEX Formaat: Gebruik 3 of 6 hexadecimale tekens (0-9, A-F). Hoofdletterongevoelig. Het '#'-teken wordt automatisch toegevoegd/verwijderd waar nodig.
- Live Update: De conversie gebeurt direct tijdens het typen (of bij het verlaten van een veld, afhankelijk van de browser).
Probeer waarden te wijzigen in zowel de RGB-velden als het HEX-veld om te zien hoe ze elkaar beïnvloeden en hoe de kleur verandert!
Converteer Kleuren
Wijzig een waarde in een van de velden (R, G, B of HEX) om de andere automatisch te converteren en de kleurenpreview bij te werken.
Kleurenvoorbeeld:
Voer een geldige RGB- of HEX-waarde in.
Uitleg RGB & HEX Kleuren
Kleurmodellen
RGB en HEX zijn twee manieren om kleuren te definiëren, voornamelijk voor digitale schermen.
RGB (Rood, Groen, Blauw)
Een additief kleurmodel. Kleuren worden gemaakt door verschillende intensiteiten van rood, groen en blauw licht te mengen.
- Elke kleur (R, G, B) heeft een waarde van 0 (geen intensiteit) tot 255 (maximale intensiteit).
rgb(0, 0, 0)
is zwart (geen licht).rgb(255, 255, 255)
is wit (alle kleuren voluit).rgb(255, 0, 0)
is puur rood.
HEX (Hexadecimaal)
Een hexadecimale (basis 16) representatie van de RGB-waarden. Het is compacter en wordt veel gebruikt in HTML en CSS.
- Begint meestal met een '#'.
- Gevolgd door zes tekens: twee voor Rood, twee voor Groen, twee voor Blauw (
#RRGGBB
). - Elk paar hex-tekens komt overeen met de decimale RGB-waarde (0-255).
00
is 0,FF
is 255. - Voorbeeld:
#FF0000
is puur rood (R=FF=255, G=00=0, B=00=0). - Shorthand: Als elk paar identieke tekens heeft (bv.
#FF00CC
), kan het worden afgekort tot drie tekens (#F0C
).
Voorbeelden
Kleur | Voorbeeld | RGB | HEX |
---|---|---|---|
Zwart | rgb(0, 0, 0) | #000000 / #000 | |
Wit | rgb(255, 255, 255) | #FFFFFF / #FFF | |
Rood | rgb(255, 0, 0) | #FF0000 / #F00 | |
Groen | rgb(0, 255, 0) | #00FF00 / #0F0 | |
Blauw | rgb(0, 0, 255) | #0000FF / #00F | |
Geel | rgb(255, 255, 0) | #FFFF00 / #FF0 | |
Cyaan | rgb(0, 255, 255) | #00FFFF / #0FF | |
Magenta | rgb(255, 0, 255) | #FF00FF / #F0F | |
Grijs | rgb(128, 128, 128) | #808080 / #888 (ca.) |