Jednoduchý a uživatelsky přívětivý nástroj pro výběr barev

Úvod

Nástroj pro výběr barev je intuitivní, snadno použitelná aplikace navržená tak, aby pomohla uživatelům vybírat, vizualizovat a převádět barvy napříč různými barevnými formáty. Ať už jste webový designér, který vytváří barevné schéma, digitální umělec, který hledá dokonalý odstín, nebo vývojář implementující uživatelské rozhraní, tento výběr barev poskytuje jednoduchý způsob, jak pracovat s barvami v RGB, hexadecimálním, CMYK a HSV formátu. Díky interaktivnímu barevnému spektru, posuvníku jasu a přesným možnostem vstupu můžete rychle najít, upravit a zkopírovat hodnoty barev pro vaše projekty.

Porozumění barevným modelům

Než se ponoříme do používání výběru barev, je užitečné pochopit různé barevné modely, které podporuje:

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

RGB je aditivní barevný model, kde jsou červené, zelené a modré světlo kombinovány různými způsoby, aby reprodukovaly širokou škálu barev. V digitálních aplikacích:

• Každá složka (R, G, B) se pohybuje od 0 do 255
• RGB(255, 0, 0) představuje čistou červenou
• RGB(0, 255, 0) představuje čistou zelenou
• RGB(0, 0, 255) představuje čistou modrou
• RGB(255, 255, 255) představuje bílou
• RGB(0, 0, 0) představuje černou

Model RGB je přímo spojen s tím, jak jsou barvy zobrazeny na obrazovkách, což z něj činí primární volbu pro digitální design.

Hexadecimální (Hex)

Hexadecimální barevné kódy jsou způsob, jak reprezentovat RGB barvy pomocí číselného systému se základem 16:

• Hex barva začíná znakem hashtag (#), následovaným šesti znaky
• První dvojice představuje červenou, druhá zelenou a třetí modrou
• Každá dvojice se pohybuje od 00 do FF (0-255 v desítkové soustavě)
• #FF0000 představuje čistou červenou
• #00FF00 představuje čistou zelenou
• #0000FF představuje čistou modrou
• Zkrácená notace je k dispozici pro určité barvy (např. #F00 pro červenou)

Hex kódy jsou široce používány ve webovém vývoji (CSS, HTML) a digitálních designových aplikacích.

CMYK (Cyan, Magenta, Žlutá, Klíč/Černá)

CMYK je subtraktivní barevný model, který se primárně používá v barevném tisku:

• Každá složka se pohybuje od 0 % do 100 %
• CMYK(0, 100, 100, 0) představuje čistou červenou
• CMYK(100, 0, 100, 0) představuje čistou zelenou
• CMYK(100, 100, 0, 0) představuje čistou modrou
• CMYK(0, 0, 0, 100) představuje černou
• CMYK(0, 0, 0, 0) představuje bílou (barvu papíru)

I když se primárně používá pro tisk, pochopení hodnot CMYK může být užitečné při navrhování obsahu, který bude nakonec vytištěn.

HSV (Odtín, Sytost, Hodnota)

HSV představuje barvy z pohledu:

• Odtín: Typ barvy (červená, žlutá, zelená, atd.), měřeno ve stupních (0-360°)
• Sytost: Intenzita nebo čistota barvy (0-100 %)
• Hodnota: Jasnost barvy (0-100 %)

HSV je obzvlášť užitečné pro výběr barev, protože odděluje volbu barvy (odtín) od její intenzity (sytost) a jasnosti (hodnota), což usnadňuje úpravu barev.

Formule pro převod barev

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

Převod RGB na Hex

Pro převod RGB na hexadecimální:

1. Převést každou složku RGB (0-255) na dvouciferné hexadecimální číslo
2. Spojit tři hexadecimální hodnoty s prefixem #

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

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

Převod RGB na CMYK

Převod z RGB na CMYK zahrnuje tyto kroky:

1. Normalizovat hodnoty RGB na rozsah 0-1
2. Vypočítat černou klíčovou složku (K)
3. Vypočítat 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\%$

Převod 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 Odtín (H):

undefined

1// Převod 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// Převod Hex na RGB
12function hexToRgb(hex) {
13  // Odstranit # pokud je přítomno
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Zpracovat jak 3-ciferné, tak 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// Převod RGB na CMYK
29function rgbToCmyk(r, g, b) {
30  // Normalizovat hodnoty RGB
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Vypočítat K (černá)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Zpracovat čistou černou
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Vypočítat 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# Převod RGB na Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Převod Hex na RGB
6def hex_to_rgb(hex_color):
7    # Odstranit # pokud je přítomno
8    hex_color = hex_color.lstrip('#')
9    
10    # Zpracovat jak 3-ciferné, tak 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# Převod RGB na CMYK
21def rgb_to_cmyk(r, g, b):
22    # Normalizovat hodnoty RGB
23    r_norm = r / 255.0
24    g_norm = g / 255.0
25    b_norm = b / 255.0
26    
27    # Vypočítat K (černá)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Zpracovat čistou černou
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Vypočítat 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}  # 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    // Převod 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    // Převod Hex na RGB
8    public static int[] hexToRgb(String hexColor) {
9        // Odstranit # pokud je přítomno
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Zpracovat jak 3-ciferné, tak 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    // Převod RGB na CMYK
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalizovat hodnoty RGB
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Vypočítat K (černá)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Zpracovat čistou černou
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Vypočítat 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

Odkazy

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

2. Adobe Systems. (2000). Adobe RGB (1998) Color Image Encoding. Adobe Systems Incorporated.

3. Fairchild, M. D. (2013). Modely barevného vzhledu. John Wiley & Sons.

4. Hunt, R. W. G., & Pointer, M. R. (2011). Měření barev. John Wiley & Sons.

5. Poynton, C. (2012). Digitální video a HD: Algoritmy a rozhraní. Elsevier.

6. W3C. (2018). CSS Color Module Level 4. W3C Working Draft. Dostupné z https://www.w3.org/TR/css-color-4/

7. Pokyny pro přístupnost webového obsahu (WCAG) 2.1. (2018). Dostupné z https://www.w3.org/TR/WCAG21/

8. Mezinárodní barevný konsorcium. (2004). Specifikace ICC.1:2004-10 (Verze profilu 4.2.0.0). Dostupné z http://www.color.org/specification/ICC1v42_2006-05.pdf

Vyzkoušejte náš nástroj pro výběr barev ještě dnes!

Jste připraveni najít dokonalou barvu pro váš projekt? Náš uživatelsky přívětivý nástroj pro výběr barev usnadňuje výběr, úpravu a převod barev mezi různými formáty. Ať už navrhujete web, vytváříte digitální umění nebo plánujete tiskové materiály, náš nástroj poskytuje přesnost a flexibilitu, kterou potřebujete.

Začněte experimentovat s barvami nyní a posuňte své návrhy na další úroveň!