Kleurenkiezer - Converteer RGB, Hex, CMYK & HSV Kleurcodes

Wat Je Kunt Doen Met Deze Kleurenkiezer

Op zoek naar de perfecte tint voor je project? Deze kleurenkiezer stelt je in staat om kleuren te selecteren, te bekijken en te converteren tussen RGB, Hex, CMYK en HSV-formaten in een oogwenk. Of je nu een website aan het coderen bent, een logo aan het ontwerpen bent of bestanden aan het voorbereiden bent voor afdrukken, je vindt precies de kleurwaarden die je nodig hebt—zonder gissen, zonder tussen verschillende tools te hoeven schakelen.

Klik ergens op het kleurenspectrum om een tint te kiezen, pas de helderheid aan met een schuifregelaar, of voer nauwkeurige waarden direct in. Elk formaat wordt in realtime bijgewerkt, en je kunt elke kleurcode met één klik kopiëren.

Kleurmodellen begrijpen

Verschillende projecten hebben verschillende kleurformaten nodig. Hier is wat elk model doet en wanneer je het gebruikt:

RGB (Rood, Groen, Blauw)

RGB werkt door rood, groen en blauw licht te mengen—op dezelfde manier waarop je scherm nu kleuren weergeeft. Elke component varieert van 0 tot 255:

• RGB(255, 0, 0) = zuiver rood
• RGB(0, 255, 0) = zuiver groen
• RGB(0, 0, 255) = zuiver blauw
• RGB(255, 255, 255) = wit
• RGB(0, 0, 0) = zwart

Wanneer RGB gebruiken: Elk digitaal werk—websites, mobiele apps, video-editing of schermgebaseerde graphics. Het is de native taal van displays, vandaar dat tools zoals CSS rgb() en rgba() functies direct ondersteunen. Volgens de W3C CSS Color Module specificatie is RGB het fundamentele kleurmodel voor webstandaarden.

Hexadecimaal (Hex)

Hex-codes zijn gewoon RGB-waarden geschreven in base-16 in plaats van base-10. Een hex-kleur ziet eruit als #FF5733, waarbij:

• Het # symbool het als een hex-code markeert
• Eerste twee tekens = rood (00-FF)
• Middelste twee = groen (00-FF)
• Laatste twee = blauw (00-FF)
• #FF0000 = rood, #00FF00 = groen, #0000FF = blauw

Soms zie je 3-teken verkorte notatie zoals #F00 in plaats van #FF0000—dit werkt wanneer elk kleurkanaal dezelfde digit herhaalt.

Wanneer Hex gebruiken: Webontwikkeling is de primaire use case. CSS heeft altijd hex-notatie ondersteund, en de meeste ontwikkelaars vinden het sneller typen dan rgb(). Een veelgemaakte fout: het vergeten van het # symbool zal je stijlen stilletjes breken, omdat browsers het niet als een geldige kleur herkennen.

CMYK (Cyaan, Magenta, Geel, Key/Zwart)

CMYK is de kleurmodel die door printers wordt gebruikt. In tegenstelling tot RGB (dat licht toevoegt), trekt CMYK het af—door inkten op wit papier te mengen om kleuren te creëren:

• Elke component varieert van 0% tot 100%
• CMYK(0, 100, 100, 0) = rood
• CMYK(100, 0, 100, 0) = groen
• CMYK(0, 0, 0, 100) = zuivere zwarte inkt
• CMYK(0, 0, 0, 0) = geen inkt (wit papier komt doorheen)

Wanneer CMYK gebruiken: Ontwerpen voor print—visitekaartjes, brochures, tijdschriften, verpakkingen. Hier is de realiteitscheck: veel levendige RGB-kleuren kunnen eenvoudigweg niet worden gereproduceerd met CMYK-inkten. Die heldere elektrische blauw die je op het scherm ziet? Hij zal matter zijn wanneer hij wordt gedrukt. Professionele ontwerpers bekijken altijd CMYK-conversies voordat ze bestanden naar de drukker sturen om verrassingen te voorkomen.

HSV (Tint, Verzadiging, Waarde)

HSV breekt kleur op in drie intuïtieve componenten:

• Tint: Welke kleurenfamilie (0-360°)—0° is rood, 120° is groen, 240° is blauw
• Verzadiging: Hoe levendig of grijs (0-100%)—0% is grijstinten, 100% is volledig verzadigd
• Waarde: Hoe licht of donker (0-100%)—0% is zwart, 100% is volle helderheid

Waarom HSV belangrijk is: Het komt overeen met hoe mensen van nature over kleur denken. Wil je een donkerder blauw? Verlaag de waarde. Wil je een minder intense blauw? Verlaag de verzadiging. Dit maakt HSV ideaal voor interactieve kleurenkiezers zoals deze, waar je een tint op het spectrum selecteert en helderheid met een schuifregelaar aanpast.

Kleurconversie Formules

De kleurkiezer converteert automatisch tussen verschillende kleurmodellen met behulp van deze wiskundige formules:

RGB naar Hex Conversie

Om RGB naar hexadecimaal te converteren:

1. Converteer elk RGB-component (0-255) naar een tweecijferig hexadecimaal getal
2. Voeg de drie hexadecimale waarden samen met een # voorvoegsel

$\text{Hex} = \text{\#} + \text{naarHex}(R) + \text{naarHex}(G) + \text{naarHex}(B)$

Waarbij naarHex() een decimaal getal converteert naar zijn hexadecimale representatie.

RGB naar CMYK Conversie

De conversie van RGB naar CMYK omvat deze stappen:

1. Normaliseer RGB-waarden naar het bereik 0-1
2. Bereken het zwarte sleutelcomponent (K)
3. Bereken C, M en Y op basis van K

$R' = R/255, G' = G/255, B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{(1-R'-K)}{(1-K)} \times 100\%$ $M = \frac{(1-G'-K)}{(1-K)} \times 100\%$ $Y = \frac{(1-B'-K)}{(1-K)} \times 100\%$

RGB naar HSV Conversie

Converteren van RGB naar HSV:

$R' = R/255, G' = G/255, B' = B/255$ $C_{max} = \max(R', G', B')$ $C_{min} = \min(R', G', B')$ $\Delta = C_{max} - C_{min}$

Voor Tint (H):

undefined

1// RGB naar Hex conversie
2function rgbToHex(r, g, b) {
3  const toHex = (c) => {
4    const hex = Math.round(c).toString(16);
5    return hex.length === 1 ? '0' + hex : hex;
6  };
7  
8  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
9}
10
11// Hex naar RGB conversie
12function hexToRgb(hex) {
13  // Verwijder # indien aanwezig
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Behandel zowel 3-cijferige als 6-cijferige hex
17  const expandedHex = cleanHex.length === 3 
18    ? cleanHex.split('').map(char => char + char).join('')
19    : cleanHex;
20    
21  const r = parseInt(expandedHex.substring(0, 2), 16);
22  const g = parseInt(expandedHex.substring(2, 4), 16);
23  const b = parseInt(expandedHex.substring(4, 6), 16);
24  
25  return { r, g, b };
26}
27
28// RGB naar CMYK conversie
29function rgbToCmyk(r, g, b) {
30  // Normaliseer RGB-waarden
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Bereken K (zwart)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Behandel pure zwart
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Bereken C, M, Y
44  const c = ((1 - normalizedR - k) / (1 - k)) * 100;
45  const m = ((1 - normalizedG - k) / (1 - k)) * 100;
46  const y = ((1 - normalizedB - k) / (1 - k)) * 100;
47  
48  return {
49    c: Math.round(c),
50    m: Math.round(m),
51    y: Math.round(y),
52    k: Math.round(k * 100)
53  };
54}
55
56// Voorbeeldgebruik
57const rgb = { r: 255, g: 0, b: 0 }; // Pure rood
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# RGB naar Hex conversie
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Hex naar RGB conversie
6def hex_to_rgb(hex_color):
7    # Verwijder # indien aanwezig
8    hex_color = hex_color.lstrip('#')
9    
10    # Behandel zowel 3-cijferige als 6-cijferige hex
11    if len(hex_color) == 3:
12        hex_color = ''.join([c*2 for c in hex_color])
13    
14    return {
15        'r': int(hex_color[0:2], 16),
16        'g': int(hex_color[2:4], 16),
17        'b': int(hex_color[4:6], 16)
18    }
19
20# RGB naar CMYK conversie
21def rgb_to_cmyk(r, g, b):
22    # Normaliseer RGB-waarden
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # Bereken K (zwart)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Behandel pure zwart
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Bereken C, M, Y
35    c = ((1 - r_norm - k) / (1 - k)) * 100
36    m = ((1 - g_norm - k) / (1 - k)) * 100
37    y = ((1 - b_norm - k) / (1 - k)) * 100
38    
39    return {
40        'c': round(c),
41        'm': round(m),
42        'y': round(y),
43        'k': round(k * 100)
44    }
45
46# Voorbeeldgebruik
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Luchtblauw
48hex_color = rgb_to_hex(rgb['r'], rgb['g'], rgb['b'])
49cmyk = rgb_to_cmyk(rgb['r'], rgb['g'], rgb['b'])
50
51print(f"Hex: {hex_color}")
52print(f"CMYK: C={cmyk['c']}%, M={cmyk['m']}%, Y={cmyk['y']}%, K={cmyk['k']}%")
53

1public class ColorConverter {
2    // RGB naar Hex conversie
3    public static String rgbToHex(int r, int g, int b) {
4        return String.format("#%02x%02x%02x", r, g, b);
5    }
6    
7    // Hex naar RGB conversie
8    public static int[] hexToRgb(String hexColor) {
9        // Verwijder # indien aanwezig
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Behandel zowel 3-cijferige als 6-cijferige hex
15        if (hexColor.length() == 3) {
16            String expandedHex = "";
17            for (char c : hexColor.toCharArray()) {
18                expandedHex += c + String.valueOf(c);
19            }
20            hexColor = expandedHex;
21        }
22        
23        int r = Integer.parseInt(hexColor.substring(0, 2), 16);
24        int g = Integer.parseInt(hexColor.substring(2, 4), 16);
25        int b = Integer.parseInt(hexColor.substring(4, 6), 16);
26        
27        return new int[]{r, g, b};
28    }
29    
30    // RGB naar CMYK conversie
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normaliseer RGB-waarden
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Bereken K (zwart)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Behandel pure zwart
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Bereken C, M, Y
46        double c = ((1 - normalizedR - k) / (1 - k)) * 100;
47        double m = ((1 - normalizedG - k) / (1 - k)) * 100;
48        double y = ((1 - normalizedB - k) / (1 - k)) * 100;
49        
50        return new double[]{
51            Math.round(c),
52            Math.round(m),
53            Math.round(y),
54            Math.round(k * 100)
55        };
56    }
57    
58    public static void main(String[] args) {
59        // Voorbeeldgebruik
60        int r = 75, g = 0, b = 130;  // Paars
61        String hexColor = rgbToHex(r, g, b);
62        double[] cmyk = rgbToCmyk(r, g, b);
63        
64        System.out.println("Hex: " + hexColor);
65        System.out.printf("CMYK: C=%.0f%%, M=%.0f%%, Y=%.0f%%, K=%.0f%%\n", 
66                          cmyk[0], cmyk[1], cmyk[2], cmyk[3]);
67    }
68}
69

Referenties en Verdere Bronnen

• W3C CSS Kleur Module Niveau 4 - Officiële web kleurspecificatie
• WCAG 2.1 Contrast Richtlijnen - Toegankelijkheidsnormen voor kleurcontrast
• WebAIM Contrast Checker - Test kleurcontrast verhoudingen
• ICC Kleurprofiel Standaarden - Technische specificatie voor kleurconversies
• MDN Web Docs: CSS Kleurwaarden - Uitgebreide gids voor web kleurformaten