Einfaches und benutzerfreundliches Farbwahlwerkzeug

Einführung

Das Farbwahlwerkzeug ist eine intuitive, einfach zu bedienende Anwendung, die entwickelt wurde, um Benutzern zu helfen, Farben auszuwählen, zu visualisieren und in mehreren Farbformaten zu konvertieren. Egal, ob Sie ein Webdesigner sind, der ein Farbschema erstellt, ein digitaler Künstler, der den perfekten Farbton sucht, oder ein Entwickler, der eine Benutzeroberfläche implementiert, dieser Farbwahlwerkzeug bietet eine unkomplizierte Möglichkeit, mit Farben in RGB-, Hexadezimal-, CMYK- und HSV-Formaten zu arbeiten. Mit seinem interaktiven Farbspektrum, dem Helligkeitsregler und den präzisen Eingabemöglichkeiten können Sie schnell Farbwerte für Ihre Projekte finden, anpassen und kopieren.

Verständnis der Farbmodelle

Bevor wir uns damit beschäftigen, wie man das Farbwahlwerkzeug benutzt, ist es hilfreich, die verschiedenen Farbmodelle zu verstehen, die es unterstützt:

RGB (Rot, Grün, Blau)

RGB ist ein additives Farbmodell, bei dem rotes, grünes und blaues Licht auf verschiedene Weise kombiniert werden, um eine breite Palette von Farben zu reproduzieren. In digitalen Anwendungen:

Jede Komponente (R, G, B) reicht von 0 bis 255
RGB(255, 0, 0) repräsentiert reines Rot
RGB(0, 255, 0) repräsentiert reines Grün
RGB(0, 0, 255) repräsentiert reines Blau
RGB(255, 255, 255) repräsentiert Weiß
RGB(0, 0, 0) repräsentiert Schwarz

Das RGB-Modell steht in direktem Zusammenhang damit, wie Farben auf Bildschirmen angezeigt werden, und ist daher die primäre Wahl für digitales Design.

Hexadezimal (Hex)

Hexadezimale Farbcode sind eine Möglichkeit, RGB-Farben mithilfe eines Zahlensystems mit Basis 16 darzustellen:

Ein hexadezimaler Farbcode beginnt mit einem Rautezeichen (#), gefolgt von sechs Zeichen
Das erste Paar repräsentiert Rot, das zweite Grün und das dritte Blau
Jedes Paar reicht von 00 bis FF (0-255 im Dezimalsystem)
#FF0000 repräsentiert reines Rot
#00FF00 repräsentiert reines Grün
#0000FF repräsentiert reines Blau
Abgekürzte Notation ist für bestimmte Farben verfügbar (z. B. #F00 für Rot)

Hex-Codes werden häufig in der Webentwicklung (CSS, HTML) und in digitalen Designanwendungen verwendet.

CMYK (Cyan, Magenta, Gelb, Schwarz)

CMYK ist ein subtraktives Farbmodell, das hauptsächlich im Farb-Druck verwendet wird:

Jede Komponente reicht von 0 % bis 100 %
CMYK(0, 100, 100, 0) repräsentiert reines Rot
CMYK(100, 0, 100, 0) repräsentiert reines Grün
CMYK(100, 100, 0, 0) repräsentiert reines Blau
CMYK(0, 0, 0, 100) repräsentiert Schwarz
CMYK(0, 0, 0, 0) repräsentiert Weiß (Papierfarbe)

Obwohl es hauptsächlich für den Druck verwendet wird, kann das Verständnis von CMYK-Werten hilfreich sein, wenn Inhalte entworfen werden, die letztendlich gedruckt werden.

HSV (Farbton, Sättigung, Wert)

HSV stellt Farben in Bezug auf Folgendes dar:

Farbton: Der Farbtyp (Rot, Gelb, Grün usw.), gemessen in Grad (0-360°)
Sättigung: Die Intensität oder Reinheit der Farbe (0-100 %)
Wert: Die Helligkeit der Farbe (0-100 %)

HSV ist besonders nützlich für die Farbauswahl, da es die Farbwahl (Farbton) von ihrer Intensität (Sättigung) und Helligkeit (Wert) trennt, was es intuitiver macht, Farben anzupassen.

Farbkonversionsformeln

Das Farbwahlwerkzeug konvertiert automatisch zwischen verschiedenen Farbmodellen mithilfe dieser mathematischen Formeln:

RGB zu Hex-Konversion

Um RGB in Hexadezimal zu konvertieren:

Konvertieren Sie jede RGB-Komponente (0-255) in eine zweistellige hexadezimale Zahl
Verketten Sie die drei hexadezimalen Werte mit einem # Präfix

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

Wobei toHex() eine Dezimalzahl in ihre hexadezimale Darstellung konvertiert.

RGB zu CMYK-Konversion

Die Konversion von RGB zu CMYK umfasst folgende Schritte:

Normalisieren Sie die RGB-Werte auf den Bereich 0-1
Berechnen Sie die Schwarzkomponente (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-Konversion

Die 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-Konversion
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-Konversion
12function hexToRgb(hex) {
13  // Entfernen Sie #, falls vorhanden
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Behandeln Sie sowohl 3-stellige als auch 6-stellige 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 zu CMYK-Konversion
29function rgbToCmyk(r, g, b) {
30  // Normalisieren Sie RGB-Werte
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Berechnen Sie K (Schwarz)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Behandeln Sie reines Schwarz
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Berechnen Sie 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// 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-Konversion
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Hex zu RGB-Konversion
6def hex_to_rgb(hex_color):
7    # Entfernen Sie #, falls vorhanden
8    hex_color = hex_color.lstrip('#')
9    
10    # Behandeln Sie sowohl 3-stellige als auch 6-stellige 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 zu CMYK-Konversion
21def rgb_to_cmyk(r, g, b):
22    # Normalisieren Sie RGB-Werte
23    r_norm = r / 255.0
24    g_norm = g / 255.0
25    b_norm = b / 255.0
26    
27    # Berechnen Sie K (Schwarz)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Behandeln Sie reines Schwarz
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Berechnen Sie 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# 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-Konversion
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-Konversion
8    public static int[] hexToRgb(String hexColor) {
9        // Entfernen Sie #, falls vorhanden
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Behandeln Sie sowohl 3-stellige als auch 6-stellige 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 zu CMYK-Konversion
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalisieren Sie RGB-Werte
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Berechnen Sie K (Schwarz)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Behandeln Sie reines Schwarz
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Berechnen Sie 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        // 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

Agoston, M. K. (2013). Computer Graphics and Geometric Modeling: Implementation and Algorithms. Springer Science & Business Media.
Adobe Systems. (2000). Adobe RGB (1998) Color Image Encoding. Adobe Systems Incorporated.
Fairchild, M. D. (2013). Color Appearance Models. John Wiley & Sons.
Hunt, R. W. G., & Pointer, M. R. (2011). Measuring Colour. John Wiley & Sons.
Poynton, C. (2012). Digital Video and HD: Algorithms and Interfaces. Elsevier.
W3C. (2018). CSS Color Module Level 4. W3C Working Draft. Abgerufen von https://www.w3.org/TR/css-color-4/
Web Content Accessibility Guidelines (WCAG) 2.1. (2018). Abgerufen von https://www.w3.org/TR/WCAG21/
International Color Consortium. (2004). Specification ICC.1:2004-10 (Profile version 4.2.0.0). Abgerufen von http://www.color.org/specification/ICC1v42_2006-05.pdf

Probieren Sie unser Farbwahlwerkzeug noch heute aus!

Bereit, die perfekte Farbe für Ihr Projekt zu finden? Unser benutzerfreundliches Farbwahlwerkzeug macht es einfach, Farben auszuwählen, anzupassen und zwischen verschiedenen Formaten zu konvertieren. Egal, ob Sie eine Website entwerfen, digitale Kunst erstellen oder Druckmaterialien planen, unser Werkzeug bietet die Präzision und Flexibilität, die Sie benötigen.

Beginnen Sie jetzt mit dem Experimentieren mit Farben und heben Sie Ihre Designs auf die nächste Stufe!

Whiz Tools

Einfacher Farbauswähler: Wählen & Kopieren Sie RGB-, Hex- und CMYK-Farbwerte

Farbauswahl

RGB (0-255)

CMYK (0-100)