Jednoduchý a užívateľsky prívetivý nástroj na výber farieb

Úvod

Nástroj na výber farieb je intuitívna, ľahko použiteľná aplikácia navrhnutá na pomoc používateľom pri výbere, vizualizácii a konverzii farieb v rôznych farebných formátoch. Či už ste webový dizajnér, ktorý vytvára farebnú schému, digitálny umelec, ktorý hľadá dokonalý odtieň, alebo vývojár, ktorý implementuje užívateľské rozhranie, tento výber farieb poskytuje jednoduchý spôsob, ako pracovať s farbami v formátoch RGB, hexadecimálnom, CMYK a HSV. So svojou interaktívnou farebnou škálou, posúvačom jasu a presnými vstupnými možnosťami môžete rýchlo nájsť, upraviť a skopírovať hodnoty farieb pre vaše projekty.

Pochopenie farebných modelov

Predtým, ako sa pustíme do používania nástroja na výber farieb, je užitočné pochopiť rôzne farebné modely, ktoré podporuje:

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

RGB je aditívny farebný model, v ktorom sa červené, zelené a modré svetlo kombinujú rôznymi spôsobmi na reprodukciu širokej škály farieb. V digitálnych aplikáciách:

• Každá zložka (R, G, B) sa pohybuje od 0 do 255
• RGB(255, 0, 0) predstavuje čistú červenú
• RGB(0, 255, 0) predstavuje čistú zelenú
• RGB(0, 0, 255) predstavuje čistú modrú
• RGB(255, 255, 255) predstavuje bielu
• RGB(0, 0, 0) predstavuje čiernu

Model RGB je priamo spojený s tým, ako sa farby zobrazujú na obrazovkách, čo z neho robí primárnu voľbu pre digitálny dizajn.

Hexadecimálny (Hex)

Hexadecimálne farebné kódy sú spôsob, ako reprezentovať RGB farby pomocou číselného systému s základom 16:

• Hex farba začína znakom # nasledovaným šiestimi znakmi
• Prvý pár predstavuje červenú, druhý zelenú a tretí modrú
• Každý pár sa pohybuje od 00 do FF (0-255 v desiatkovej sústave)
• #FF0000 predstavuje čistú červenú
• #00FF00 predstavuje čistú zelenú
• #0000FF predstavuje čistú modrú
• Skrátená notácia je k dispozícii pre určité farby (napr. #F00 pre červenú)

Hex kódy sú široko používané vo webovom vývoji (CSS, HTML) a aplikáciách digitálneho dizajnu.

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

CMYK je substraktívny farebný model, ktorý sa primárne používa v farebnej tlači:

• Každá zložka sa pohybuje od 0% do 100%
• CMYK(0, 100, 100, 0) predstavuje čistú červenú
• CMYK(100, 0, 100, 0) predstavuje čistú zelenú
• CMYK(100, 100, 0, 0) predstavuje čistú modrú
• CMYK(0, 0, 0, 100) predstavuje čiernu
• CMYK(0, 0, 0, 0) predstavuje bielu (farba papiera)

Aj keď sa primárne používa na tlač, pochopenie hodnôt CMYK môže byť užitočné pri navrhovaní obsahu, ktorý bude nakoniec vytlačený.

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

HSV predstavuje farby z hľadiska:

• Odtieň: Typ farby (červená, žltá, zelená atď.), merané v stupňoch (0-360°)
• Sýtosť: Intenzita alebo čistota farby (0-100%)
• Hodnota: Jas farby (0-100%)

HSV je obzvlášť užitočné pri výbere farieb, pretože oddeluje výber farby (odtieň) od jej intenzity (sýtosť) a jasu (hodnota), čo uľahčuje úpravu farieb.

Formuly na konverziu farieb

Nástroj na výber farieb automaticky konvertuje medzi rôznymi farebnými modelmi pomocou týchto matematických formulí:

Konverzia RGB na Hex

Na konverziu RGB na hexadecimálny:

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

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

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

Konverzia RGB na CMYK

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

1. Normalizujte hodnoty RGB do rozsahu 0-1
2. Vypočítajte čiernu (K) zložku
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

Konverzia 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  // Riešiť 3-ciferné aj 6-ciferné 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  // Normalizovať hodnoty RGB
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Vypočítať K (čierna)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Riešiť čistú čiernu
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Vypočítať 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# RGB na Hex konverzia
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Hex na RGB konverzia
6def hex_to_rgb(hex_color):
7    # Odstrániť # ak je prítomný
8    hex_color = hex_color.lstrip('#')
9    
10    # Riešiť 3-ciferné aj 6-ciferné 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 na CMYK konverzia
21def rgb_to_cmyk(r, g, b):
22    # Normalizovať hodnoty RGB
23    r_norm = r / 255.0
24    g_norm = g / 255.0
25    b_norm = b / 255.0
26    
27    # Vypočítať K (čierna)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Riešiť čistú čiernu
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Vypočítať 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}  # Nebeská modrá
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 na Hex konverzia
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 na RGB konverzia
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        // Riešiť 3-ciferné aj 6-ciferné 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 na CMYK konverzia
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalizovať hodnoty RGB
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Vypočítať K (čierna)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Riešiť čistú čiernu
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Vypočítať 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

Odkazy

1. Agoston, M. K. (2013). Počítačová grafika a geometrické modelovanie: Implementácia a algoritmy. Springer Science & Business Media.

2. Adobe Systems. (2000). Adobe RGB (1998) Farebný obrazový kód. Adobe Systems Incorporated.

3. Fairchild, M. D. (2013). Modely farebného vzhľadu. John Wiley & Sons.

4. Hunt, R. W. G., & Pointer, M. R. (2011). Meranie farby. John Wiley & Sons.

5. Poynton, C. (2012). Digitálne video a HD: Algoritmy a rozhrania. Elsevier.

6. W3C. (2018). Modul farieb CSS Level 4. W3C Pracovný návrh. Dostupné z https://www.w3.org/TR/css-color-4/

7. Pokyny pre prístupnosť webového obsahu (WCAG) 2.1. (2018). Dostupné z https://www.w3.org/TR/WCAG21/

8. Medzinárodný farebný výbor. (2004). Špecifikácia ICC.1:2004-10 (Verzia profilu 4.2.0.0). Dostupné z http://www.color.org/specification/ICC1v42_2006-05.pdf

Vyskúšajte náš nástroj na výber farieb dnes!

Ste pripravení nájsť dokonalú farbu pre váš projekt? Náš užívateľsky prívetivý nástroj na výber farieb uľahčuje výber, úpravu a konverziu farieb medzi rôznymi formátmi. Či už navrhujete webovú stránku, vytvárate digitálne umenie alebo plánujete tlačové materiály, náš nástroj poskytuje presnosť a flexibilitu, ktorú potrebujete.

Začnite experimentovať s farbami teraz a posuňte svoje dizajny na ďalšiu úroveň!