Nástroj na výber farieb - Konverzia RGB, Hex, CMYK a HSV farebných kódov

Čo všetko môžete urobiť s týmto výberom farieb

Potrebujete dokonalý odtieň pre váš projekt? Tento výber farieb vám umožňuje vybrať, zobraziť a previesť farby medzi formátmi RGB, Hex, CMYK a HSV okamžite. Či už programujete webovú stránku, navrhujete logo, alebo pripravujete súbory na tlač, nájdete presné farebné hodnoty, ktoré potrebujete - bez hádania, bez prepínania medzi nástrojmi.

Kliknite kdekoľvek na farebnom spektre a vyberte odtieň, nastavte jas posuvníkom alebo zadajte presné hodnoty priamo. Každý formát sa aktualizuje v reálnom čase a môžete skopírovať akýkoľvek farebný kód jediným kliknutím.

Pochopenie farebných modelov

Rôzne projekty potrebujú rôzne farebné formáty. Tu je prehľad toho, čo každý z nich robí a kedy ho použiť:

RGB (Červená, Zelená, Modrá)

RGB funguje zmiešavaním červeného, zeleného a modrého svetla - rovnako ako váš displej zobrazuje farby práve teraz. Každá zložka sa 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) = biela
• RGB(0, 0, 0) = čierna

Kedy použiť RGB: Akákoľvek digitálna práca - webové stránky, mobilné aplikácie, úprava videa alebo grafika pre obrazovky. Je to natívny jazyk displejov, preto nástroje ako CSS priamo podporujú funkcie rgb() a rgba(). Podľa špecifikácie W3C CSS Color Module je RGB základným farebným modelom pre webové štandardy.

Hexadecimálny (Hex)

Hex kódy sú len RGB hodnoty zapísané v sústave 16 namiesto desiatkovej. Hex farba vyzerá ako #FF5733, kde:

• Symbol # označuje hex kód
• Prvé dva znaky = červená (00-FF)
• Stredné dva = zelená (00-FF)
• Posledné dva = modrá (00-FF)
• #FF0000 = červená, #00FF00 = zelená, #0000FF = modrá

Niekedy uvidíte 3-miestnu skratku ako #F00 namiesto #FF0000 - funguje, keď sa každý farebný kanál opakuje tým istým číslom.

Kedy použiť Hex: Primárne vo webovom vývoji. CSS vždy podporovalo hex zápis a väčšina vývojárov ho považuje za rýchlejšie písanie ako rgb(). Bežná chyba: zabudnutie symbolu # ticho pokazí vaše štýly, pretože prehliadače ho nerozpoznajú ako platnú farbu.

CMYK (Cyan, Magenta, Žltá, Kľúč/Čierna)

CMYK je farebný model používaný tlačiarňami. Na rozdiel od RGB (ktoré pridáva svetlo), CMYK ho odčítava - zmiešavaním atramentov na bielom papieri:

• Každá zložka sa pohybuje od 0% do 100%
• CMYK(0, 100, 100, 0) = červená
• CMYK(100, 0, 100, 0) = zelená
• CMYK(0, 0, 0, 100) = čistý čierny atrament
• CMYK(0, 0, 0, 0) = žiadny atrament (vidno biely papier)

Kedy použiť CMYK: Dizajnovanie pre tlač - vizitky, brožúry, magazíny, obaly. Tu je realita: mnohé žiarivé RGB farby jednoducho nemožno reprodukovať pomocou CMYK atramentov. Tá jasná elektrická modrá, ktorú vidíte na obrazovke? Pri tlači bude menej sýta. Profesionálni dizajnéri vždy prezerajú CMYK konverzie pred odoslaním súborov do tlačiarne, aby predišli prekvapeniam.

HSV (Odtieň, Sýtosť, Hodnota)

HSV rozdeľuje farbu na tri intuitívne zložky:

• Odtieň: Ktorá farebná rodina (0-360°) - 0° je červená, 120° je zelená, 240° je modrá
• Sýtosť: Ako živá alebo šedá (0-100%) - 0% je stupnica šedej, 100% je plne sýtená
• Hodnota: Ako svetlá alebo tmavá (0-100%) - 0% je čierna, 100% je plná svetlosť

Prečo HSV záleží: Zodpovedá tomu, ako ľudia prirodzene uvažujú o farbe. Chcete tmavšiu modrú? Znížte hodnotu. Chcete menej intenzívnu modrú? Znížte sýtosť. To robí HSV ideálnym pre interaktívne výbery farieb, kde vyberiete odtieň na spektre a upravíte jas posuvníkom.

Vzorce konverzie farieb

Výber farby automaticky prevádza medzi rôznymi farebnými modelmi pomocou týchto matematických vzorcov:

Konverzia RGB na Hex

Na prevod RGB na hexadecimálnu hodnotu:

1. Preveďte každú RGB zložku (0-255) na dvojciferné hexadecimálne číslo
2. Spájte tri hexadecimálne hodnoty s prefixom #

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

Kde toHex() prevádza desatinné číslo na jeho hexadecimálnu reprezentáciu.

Konverzia RGB na CMYK

Konverzia z RGB na CMYK zahŕňa tieto kroky:

1. Normalizujte RGB hodnoty do rozsahu 0-1
2. Vypočítajte čiernu kľúčovú zložku (K)
3. Vypočítajte C, M a Y na základe 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\%$

Konverzia RGB na HSV

Prevod 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}$

Pre Odtieň (H):

undefined

1// Konverzia 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// Konverzia Hex na RGB
12function hexToRgb(hex) {
13  // Odstráni # ak je prítomný
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Spracuje 3-miestne a 6-miestne 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// Konverzia RGB na CMYK
29function rgbToCmyk(r, g, b) {
30  // Normalizácia RGB hodnôt
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Výpočet K (čierna)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Spracovanie úplne čiernej
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// Príklad použitia
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# Konverzia RGB na Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Konverzia Hex na RGB
6def hex_to_rgb(hex_color):
7    # Odstráni # ak je prítomný
8    hex_color = hex_color.lstrip('#')
9    
10    # Spracuje 3-miestne a 6-miestne 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# Konverzia RGB na CMYK
21def rgb_to_cmyk(r, g, b):
22    # Normalizácia RGB hodnôt
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # Výpočet K (čierna)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Spracovanie úplne čiernej
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# Príklad použitia
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    // Konverzia 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    // Konverzia Hex na RGB
8    public static int[] hexToRgb(String hexColor) {
9        // Odstráni # ak je prítomný
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Spracuje 3-miestne a 6-miestne 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    // Konverzia RGB na CMYK
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalizácia RGB hodnôt
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Výpočet K (čierna)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Spracovanie úplne čiernej
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        // Príklad použitia
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

Referencie a ďalšie zdroje

• W3C CSS Color Module Level 4 - Oficiálna špecifikácia webových farieb
• WCAG 2.1 Smernice pre kontrast - Štandardy prístupnosti pre farebný kontrast
• WebAIM Kontrola kontrastu - Test kontrastných pomerov farieb
• ICC Štandardy farebných profilov - Technická špecifikácia pre konverziu farieb
• MDN Web Docs: Hodnoty farieb CSS - Komplexný sprievodca formátmi webových farieb