Nástroj pro výběr barev - Převod RGB, Hex, CMYK a HSV barevných kódů

Co všechno můžete dělat s tímto výběrem barev

Potřebujete dokonalý odstín pro váš projekt? Tento výběr barev vám umožňuje vybírat, prohlížet a převádět barvy mezi formáty RGB, Hex, CMYK a HSV okamžitě. Ať už programujete webové stránky, navrhujete logo nebo připravujete soubory pro tisk, najdete přesné barevné hodnoty, které potřebujete – bez hádání, bez přepínání mezi nástroji.

Klikněte kamkoli do barevného spektra pro výběr odstínu, upravte jas posuvníkem nebo zadejte přesné hodnoty přímo. Každý formát se aktualizuje v reálném čase a můžete zkopírovat jakýkoli barevný kód jediným kliknutím.

Porozumění barevným modelům

Různé projekty potřebují různé barevné formáty. Zde je popis toho, co každý z nich dělá a kdy ho použít:

RGB (Red, Green, Blue)

RGB funguje smícháním červeného, zeleného a modrého světla - stejným způsobem, jakým vaše obrazovka zobrazuje barvy právě teď. Každá složka se pohybuje od 0 do 255:

• RGB(255, 0, 0) = čistě červená
• RGB(0, 255, 0) = čistě zelená
• RGB(0, 0, 255) = čistě modrá
• RGB(255, 255, 255) = bílá
• RGB(0, 0, 0) = černá

Kdy použít RGB: Jakákoli digitální práce - webové stránky, mobilní aplikace, úprava videa nebo grafika pro obrazovky. Je to rodný jazyk displejů, proto nástroje jako CSS přímo podporují funkce rgb() a rgba(). Podle specifikace W3C CSS Color Module je RGB základním barevným modelem pro webové standardy.

Hexadecimální (Hex)

Hex kódy jsou jen RGB hodnoty zapsané v šestnáctkové soustavě místo desítkové. Hex barva vypadá jako #FF5733, kde:

• Symbol # označuje, že se jedná o hex kód
• První dva znaky = červená (00-FF)
• Prostřední dva = zelená (00-FF)
• Poslední dva = modrá (00-FF)
• #FF0000 = červená, #00FF00 = zelená, #0000FF = modrá

Někdy uvidíte tříznakou zkratku jako #F00 místo #FF0000 - funguje, když se každý barevný kanál opakuje stejnou číslicí.

Kdy použít Hex: Primárně ve vývoji webu. CSS vždy podporovalo hex notaci a většina vývojářů ji považuje za rychlejší než rgb(). Běžná past: zapomenutí symbolu # tiše rozbije vaše styly, protože prohlížeče ho nerozpoznají jako platnou barvu.

CMYK (Cyan, Magenta, Yellow, Key/Black)

CMYK je barevný model používaný tiskárnami. Na rozdíl od RGB (které přidává světlo) CMYK ho odečítá - míchá inkousty na bílém papíře, aby vytvořil barvy:

• Každá složka se pohybuje od 0% do 100%
• CMYK(0, 100, 100, 0) = červená
• CMYK(100, 0, 100, 0) = zelená
• CMYK(0, 0, 0, 100) = čistě černý inkoust
• CMYK(0, 0, 0, 0) = žádný inkoust (prosvítá bílý papír)

Kdy použít CMYK: Návrhy pro tisk - vizitky, brožury, magazíny, obaly. Zde je realita: mnoho zářivých barev RGB nelze reprodukovat pomocí CMYK inkoustů. Ta jasně elektrická modrá, kterou vidíte na obrazovce? Při tisku bude vypadat mdleji. Profesionální designéři vždy před odesláním souborů do tisku kontrolují CMYK konverze, aby předešli překvapením.

HSV (Hue, Saturation, Value)

HSV rozkládá barvu na tři intuitivní složky:

• Hue: Která barevná rodina (0-360°) - 0° je červená, 120° je zelená, 240° je modrá
• Saturace: Jak sytá nebo šedá (0-100%) - 0% je stupně šedi, 100% je plně sytá
• Hodnota: Jak světlá nebo tmavá (0-100%) - 0% je černá, 100% je plná světlost

Proč HSV záleží: Odpovídá tomu, jak lidé přirozeně přemýšlejí o barvách. Chcete tmavší modrou? Snižte hodnotu. Chcete méně intenzivní modrou? Snižte saturaci. To dělá HSV ideálním pro interaktivní výběry barev, kde vyberete odstín na spektru a posuvníkem upravíte jas.

Vzorce pro konverzi barev

Výběr barev automaticky převádí mezi různými barevnými modely pomocí těchto matematických vzorců:

Konverze RGB na Hex

Pro převod RGB na hexadecimální:

1. Převeďte každou RGB komponentu (0-255) na dvouciferné hexadecimální číslo
2. Zřetězte tři hexadecimální hodnoty s prefixem #

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

Kde toHex() převádí decimální číslo na jeho hexadecimální reprezentaci.

Konverze RGB na CMYK

Převod z RGB na CMYK zahrnuje tyto kroky:

1. Normalizujte RGB hodnoty do rozsahu 0-1
2. Vypočítejte černou klíčovou komponentu (K)
3. Vypočítejte C, M a Y na základě 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\%$

Konverze RGB na HSV

Převod RGB na 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}$

Pro Hue (H):

undefined

1// Konverze RGB na Hex
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// Konverze Hex na RGB
12function hexToRgb(hex) {
13  // Odstraní # pokud je přítomen
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Zpracuje 3-místné i 6-místné 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// Konverze RGB na CMYK
29function rgbToCmyk(r, g, b) {
30  // Normalizace RGB hodnot
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Výpočet K (černé)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Zpracování čisté černé
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Výpočet 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// Příklad použití
57const rgb = { r: 255, g: 0, b: 0 }; // Čistá červená
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# Konverze RGB na Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Konverze Hex na RGB
6def hex_to_rgb(hex_color):
7    # Odstraní # pokud je přítomen
8    hex_color = hex_color.lstrip('#')
9    
10    # Zpracuje 3-místné i 6-místné 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# Konverze RGB na CMYK
21def rgb_to_cmyk(r, g, b):
22    # Normalizace RGB hodnot
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # Výpočet K (černé)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Zpracování čisté černé
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Výpočet 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# Příklad použití
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Modrá oblohy
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    // Konverze RGB na Hex
3    public static String rgbToHex(int r, int g, int b) {
4        return String.format("#%02x%02x%02x", r, g, b);
5    }
6    
7    // Konverze Hex na RGB
8    public static int[] hexToRgb(String hexColor) {
9        // Odstraní # pokud je přítomen
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Zpracuje 3-místné i 6-místné 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    // Konverze RGB na CMYK
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalizace RGB hodnot
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Výpočet K (černé)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Zpracování čisté černé
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Výpočet 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        // Příklad použití
60        int r = 75, g = 0, b = 130;  // Fialová
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

Reference a další zdroje

• W3C CSS Color Module Level 4 - Oficiální specifikace webových barev
• WCAG 2.1 Směrnice pro kontrast - Standardy přístupnosti pro barevný kontrast
• WebAIM Kontrola kontrastu - Test poměru barevného kontrastu
• ICC Standardy barevných profilů - Technická specifikace pro barevné konverze
• MDN Web Docs: Hodnoty barev CSS - Komplexní průvodce formáty webových barev