Was ist der Unterschied zwischen RGB und CMYK?

RGB ist für Bildschirme, CMYK für den Druck. Bildschirme erzeugen Farben, indem sie rotes, grünes und blaues Licht ausstrahlen (additive Mischung), während Drucker Farben durch Übereinanderlegen von Cyan-, Magenta-, Gelb- und Schwarztinten auf Papier erzeugen (subtraktive Mischung). RGB kann hellere, lebendigere Farben erzeugen als CMYK, da Licht eine breitere Farbpalette hat als Tinte. Deshalb sehen Bildschirmfarben beim Druck oft matter aus.

Warum sehen meine Farben beim Druck anders aus?

Bildschirme strahlen Licht aus, Papier reflektiert es - grundlegend unterschiedliche Prozesse. Außerdem kann RGB Millionen von Farben darstellen, die CMYK-Tinten einfach nicht reproduzieren können. Bildschirmkalibrierung, Papierqualität und Tintenunterschiede erhöhen die Variabilität zusätzlich. Überprüfen Sie immer die CMYK-Werte vor dem Druck und fordern Sie physische Proofs für kritische Farbabstimmungsarbeiten an.

Wie erhalte ich Hex-Codes von Farben, die ich online sehe?

Verwenden Sie die Entwicklertools Ihres Browsers. In Chrome oder Firefox klicken Sie mit der rechten Maustaste auf ein Element, wählen "Untersuchen" und klicken dann auf das kleine Farbquadrat im Stilbereich. Dies öffnet einen Farbwähler, der den Hex-Code anzeigt. Browser-Erweiterungen wie ColorZilla machen dies noch schneller - sie ermöglichen es Ihnen, überall auf einer Seite zu klicken, um den Farbwert zu erfassen.

Was bedeutet das #-Symbol in Hex-Codes?

Es ist nur ein Präfix, das dem Browser signalisiert: "Dies ist ein hexadezimaler Farbcode." Der Standard stammt aus frühen HTML- und CSS-Spezifikationen. Die sechs Zeichen nach dem # repräsentieren RGB-Werte in Basis-16: zwei Ziffern für Rot, zwei für Grün, zwei für Blau. Ohne das # erkennen Browser es nicht als Farbe.

Warum funktionieren 3-stellige Hex-Codes?

Sie sind eine Kurzform für Fälle, in denen jeder Farbkanal wiederholt wird. #F00 erweitert sich zu #FF0000 (Rot), #C9C wird zu #CC99CC (Hellviolett). Diese Kurzschreibweise wurde in den 1990er Jahren entwickelt, um Dateigrößen zu reduzieren, als Bandbreite teuer war. Sie ist heute noch praktisch für einfache Farben.

Sind die Farbumwandlungen genau?

RGB-zu-Hex-Umwandlungen sind mathematisch exakt - es sind dieselben Werte in verschiedenen Zahlensystemen. RGB-zu-CMYK-Umwandlungen sind Annäherungen, da Sie zwischen grundlegend verschiedenen Farbräumen (Licht vs. Tinte) konvertieren. Das Tool verwendet ICC-Farbprofilstandards für diese Umwandlungen, den gleichen Ansatz, den professionelle Designsoftware verwendet.

Wie erstelle ich barrierefreie Farbkombinationen?

Verwenden Sie einen Kontrastprüfer wie WebAIM's Tool nach der Auswahl Ihrer Farben. Sie benötigen ein Verhältnis von 4,5:1 für normalen Text, 3:1 für großen Text. Vermeiden Sie Rot-Grün-Kombinationen (am schwierigsten für Farbenblinde). Im Zweifelsfall dunkler Text auf hellem Hintergrund oder umgekehrt - eine ausreichende Helligkeitsdifferenz ist das Wichtigste.

Kann ich Farben aus Bildern auswählen?

Nicht direkt in diesem Tool. Verwenden Sie eine Browser-Erweiterung wie ColorZilla oder machen Sie einen Screenshot und nutzen Sie den Farbwähler Ihres Betriebssystems (Digital Color Meter auf macOS, PowerToys Color Picker auf Windows). Sobald Sie den Farbwert haben, geben Sie ihn hier ein, um zwischen Formaten zu konvertieren.

Warum konvertieren einige RGB-Farben nicht gut zu CMYK?

CMYK hat eine engere "Gamut" (Bereich reproduzierbarer Farben) als RGB. Helle Blautöne, lebendige Grüntöne und elektrische Orangetöne fallen oft außerhalb dessen, was CMYK-Tinten physisch erzeugen können. Wenn dies passiert, substituiert der Drucker die nächstmögliche Übereinstimmung, die normalerweise weniger gesättigt aussieht. Professionelle Druckdesigner beginnen oft mit CMYK-sicheren Farben, um dieses Problem zu vermeiden.

Farbauswahl-Tool - Konvertierung von RGB, Hex, CMYK & HSV Farbcodes

Was Sie mit diesem Farbwähler machen können

Benötigen Sie die perfekte Nuance für Ihr Projekt? Dieser Farbwähler ermöglicht es Ihnen, Farben zwischen RGB, Hex, CMYK und HSV-Formaten sofort auszuwählen, zu previsualisieren und zu konvertieren. Egal ob Sie eine Website programmieren, ein Logo entwerfen oder Dateien für den Druck vorbereiten - Sie finden genau die Farbwerte, die Sie benötigen - ohne Raten, ohne zwischen verschiedenen Tools zu wechseln.

Klicken Sie einfach irgendwo im Farbspektrum, um eine Nuance auszuwählen, passen Sie die Helligkeit mit einem Schieberegler an oder geben Sie präzise Werte direkt ein. Jedes Format wird in Echtzeit aktualisiert, und Sie können jeden Farbcode mit einem Klick kopieren.

Farbmodelle verstehen

Verschiedene Projekte benötigen unterschiedliche Farbformate. Hier ist, was jedes Modell macht und wann es verwendet wird:

RGB (Rot, Grün, Blau)

RGB funktioniert durch das Mischen von rotem, grünem und blauem Licht - genau so, wie Ihr Bildschirm Farben anzeigt. Jede Komponente reicht von 0 bis 255:

RGB(255, 0, 0) = reines Rot
RGB(0, 255, 0) = reines Grün
RGB(0, 0, 255) = reines Blau
RGB(255, 255, 255) = weiß
RGB(0, 0, 0) = schwarz

Wann RGB verwenden: Bei jeglicher digitaler Arbeit - Websites, mobile Apps, Videobearbeitung oder bildschirmbasierte Grafiken. Es ist die Muttersprache von Displays, weshalb Tools wie CSS rgb() und rgba() Funktionen direkt unterstützen. Laut der W3C CSS Color Module Spezifikation ist RGB das grundlegende Farbmodell für Webstandards.

Hexadezimal (Hex)

Hex-Codes sind einfach RGB-Werte, die in Basis-16 statt Basis-10 geschrieben werden. Eine Hex-Farbe sieht wie #FF5733 aus, wobei:

Das #-Symbol es als Hex-Code kennzeichnet
Erste zwei Zeichen = Rot (00-FF)
Mittlere zwei = Grün (00-FF)
Letzte zwei = Blau (00-FF)
#FF0000 = Rot, #00FF00 = Grün, #0000FF = Blau

Manchmal sieht man eine 3-stellige Kurzform wie #F00 statt #FF0000 - dies funktioniert, wenn jeder Farbkanal die gleiche Ziffer wiederholt.

Wann Hex verwenden: Webentwicklung ist der Hauptanwendungsfall. CSS hat Hex-Notation immer unterstützt, und die meisten Entwickler finden es schneller zu tippen als rgb(). Eine häufige Falle: Das Vergessen des #-Symbols wird Ihre Stile still unterbrechen, da Browser es nicht als gültige Farbe erkennen.

CMYK (Cyan, Magenta, Gelb, Key/Schwarz)

CMYK ist das Farbmodell, das von Druckern verwendet wird. Anders als RGB (das Licht hinzufügt), subtrahiert CMYK es - Tinten werden auf weißem Papier gemischt, um Farben zu erzeugen:

Jede Komponente reicht von 0% bis 100%
CMYK(0, 100, 100, 0) = Rot
CMYK(100, 0, 100, 0) = Grün
CMYK(0, 0, 0, 100) = reines Schwarzpigment
CMYK(0, 0, 0, 0) = keine Tinte (weißes Papier scheint durch)

Wann CMYK verwenden: Für Druckdesign - Visitenkarten, Broschüren, Magazine, Verpackungen. Hier die Realität: Viele leuchtende RGB-Farben können mit CMYK-Tinten einfach nicht reproduziert werden. Dieses helle elektrische Blau, das Sie auf dem Bildschirm sehen? Es wird beim Druck matter aussehen. Professionelle Designer überprüfen CMYK-Konvertierungen immer, bevor sie Dateien an den Drucker senden, um Überraschungen zu vermeiden.

HSV (Farbton, Sättigung, Hellwert)

HSV zerlegt Farbe in drei intuitive Komponenten:

Farbton: Welche Farbfamilie (0-360°) - 0° ist Rot, 120° ist Grün, 240° ist Blau
Sättigung: Wie intensiv oder grau (0-100%) - 0% ist Graustufe, 100% ist vollständig gesättigt
Hellwert: Wie hell oder dunkel (0-100%) - 0% ist Schwarz, 100% ist volle Helligkeit

Warum HSV wichtig ist: Es entspricht der Art und Weise, wie Menschen natürlich über Farbe denken. Möchten Sie ein dunkleres Blau? Senken Sie den Hellwert. Möchten Sie ein weniger intensives Blau? Senken Sie die Sättigung. Dies macht HSV ideal für interaktive Farbwähler wie diesen, bei denen Sie einen Farbton auf dem Spektrum auswählen und die Helligkeit mit einem Schieberegler anpassen.

Farbumwandlungsformeln

Der Farbwähler konvertiert automatisch zwischen verschiedenen Farbmodellen mithilfe dieser mathematischen Formeln:

RGB zu Hex-Umwandlung

Um RGB in Hexadezimal umzuwandeln:

Konvertieren Sie jede RGB-Komponente (0-255) in eine zweistellige Hexadezimalzahl
Verketten Sie die drei Hexadezimalwerte mit einem #-Präfix

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

Wobei toHex() eine Dezimalzahl in ihre Hexadezimaldarstellung konvertiert.

RGB zu CMYK-Umwandlung

Die Umwandlung von RGB zu CMYK umfasst folgende Schritte:

Normalisieren Sie RGB-Werte auf den Bereich 0-1
Berechnen Sie die schwarze Schlüsselkomponente (K)
Berechnen Sie C, M und Y basierend auf 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 zu HSV-Umwandlung

Umwandlung von RGB zu 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}$

Für Farbton (H):

1// RGB zu Hex-Umwandlung
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 zu RGB-Umwandlung
12function hexToRgb(hex) {
13  // # entfernen, falls vorhanden
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Behandlung von 3-stelligen und 6-stelligen Hex-Werten
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 zu CMYK-Umwandlung
29function rgbToCmyk(r, g, b) {
30  // RGB-Werte normalisieren
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // K (Schwarz) berechnen
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Reines Schwarz behandeln
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // C, M, Y berechnen
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// Beispielverwendung
57const rgb = { r: 255, g: 0, b: 0 }; // Reines Rot
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# RGB zu Hex-Umwandlung
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Hex zu RGB-Umwandlung
6def hex_to_rgb(hex_color):
7    # # entfernen, falls vorhanden
8    hex_color = hex_color.lstrip('#')
9    
10    # Behandlung von 3-stelligen und 6-stelligen Hex-Werten
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 zu CMYK-Umwandlung
21def rgb_to_cmyk(r, g, b):
22    # RGB-Werte normalisieren
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # K (Schwarz) berechnen
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Reines Schwarz behandeln
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # C, M, Y berechnen
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# Beispielverwendung
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Himmelblau
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 zu Hex-Umwandlung
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 zu RGB-Umwandlung
8    public static int[] hexToRgb(String hexColor) {
9        // # entfernen, falls vorhanden
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Behandlung von 3-stelligen und 6-stelligen Hex-Werten
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 zu CMYK-Umwandlung
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // RGB-Werte normalisieren
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // K (Schwarz) berechnen
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Reines Schwarz behandeln
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // C, M, Y berechnen
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        // Beispielverwendung
60        int r = 75, g = 0, b = 130;  // Lila
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

Referenzen und weiterführende Literatur

W3C CSS-Farbmodul Level 4 - Offizielle Web-Farbspezifikation
WCAG 2.1 Kontrastrichtlinien - Barrierefreiheitsstandards für Farbkontrast
WebAIM Kontrastprüfer - Testen von Farbkontrastwerten
ICC-Farbprofilstandards - Technische Spezifikation für Farbumwandlungen
MDN Web Docs: CSS-Farbwerte - Umfassender Leitfaden zu Web-Farbformaten

Farbauswahl-Tool - Konvertierung von RGB, Hex, CMYK & HSV Farbcodes

Farbwähler

RGB (0-255)

CMYK (0-100)

Farbwähler

Dokumentation

Was Sie mit diesem Farbwähler machen können

Farbmodelle verstehen

RGB (Rot, Grün, Blau)

Hexadezimal (Hex)

CMYK (Cyan, Magenta, Gelb, Key/Schwarz)

HSV (Farbton, Sättigung, Hellwert)

Farbumwandlungsformeln

RGB zu Hex-Umwandlung

RGB zu CMYK-Umwandlung

RGB zu HSV-Umwandlung

Referenzen und weiterführende Literatur

Farbpaletten-Generator - Erstellen Sie harmonische Farbschemata

CSS-Eigenschaftengenerator - Farbverläufe, Schatten & Rahmen

Kostenloser QR-Code-Generator - Erstellen Sie sofort scannbare QR-Codes

Zahlensystem-Konverter: Binär, Hexadezimal, Dezimal & Oktal

Kaninchenfarben-Prediktor – Berechnen Sie Babykaninchen-Fellfarben

Binär zu Dezimal Konverter | Kostenfreies Online-Tool

PX zu REM zu EM Umrechner – Kostenloser CSS-Einheiten-Rechner

Base64 Bild-Decoder | Bilder Online Dekodieren & Vorschau

Bleichmittel-Verdünnungsrechner: Genaue Verhältnisse für sicheres Reinigen

Pixel zu Zoll Konverter - Kostenloser DPI-Rechner (2025)

Bit- und Byte-Längenrechner - Kostenfreies Dateigrößen-Tool

Kostenloser Code-Formatierer: Verschönern Sie JavaScript, Python, HTML und mehr