Un instrument simplu și prietenos pentru alegerea culorilor

Introducere

Instrumentul de alegere a culorilor este o aplicație intuitivă, ușor de utilizat, concepută pentru a ajuta utilizatorii să selecteze, vizualizeze și convertească culorile în mai multe formate de culoare. Fie că ești un designer web care creează o schemă de culori, un artist digital în căutarea nuanței perfecte sau un dezvoltator care implementează o interfață de utilizator, acest instrument de alegere a culorilor oferă o modalitate simplă de a lucra cu culorile în formatele RGB, Hexazecimal, CMYK și HSV. Cu spectrul de culori interactiv, slider-ul de luminozitate și opțiunile precise de introducere, poți găsi, ajusta și copia rapid valorile culorilor pentru proiectele tale.

Înțelegerea modelelor de culoare

Înainte de a explora cum să folosești instrumentul de alegere a culorilor, este util să înțelegi diferitele modele de culoare pe care le suportă:

RGB (Roșu, Verde, Albastru)

RGB este un model de culoare aditiv în care lumina roșie, verde și albastră sunt combinate în diverse moduri pentru a reproduce o gamă largă de culori. În aplicațiile digitale:

• Fiecare componentă (R, G, B) variază de la 0 la 255
• RGB(255, 0, 0) reprezintă roșu pur
• RGB(0, 255, 0) reprezintă verde pur
• RGB(0, 0, 255) reprezintă albastru pur
• RGB(255, 255, 255) reprezintă alb
• RGB(0, 0, 0) reprezintă negru

Modelul RGB este direct legat de modul în care culorile sunt afișate pe ecrane, făcându-l alegerea principală pentru designul digital.

Hexazecimal (Hex)

Codurile de culoare hexazecimale sunt o modalitate de a reprezenta culorile RGB folosind un sistem de numerotare în baza 16:

• O culoare hex începe cu un semn de numărare (#) urmat de șase caractere
• Prima pereche reprezintă roșu, a doua verde și a treia albastru
• Fiecare pereche variază de la 00 la FF (0-255 în zecimal)
• #FF0000 reprezintă roșu pur
• #00FF00 reprezintă verde pur
• #0000FF reprezintă albastru pur
• Notarea abreviată este disponibilă pentru anumite culori (de exemplu, #F00 pentru roșu)

Codurile hex sunt utilizate pe scară largă în dezvoltarea web (CSS, HTML) și aplicațiile de design digital.

CMYK (Cian, Magenta, Galben, Negru)

CMYK este un model de culoare subtractiv utilizat în principal în imprimarea color:

• Fiecare componentă variază de la 0% la 100%
• CMYK(0, 100, 100, 0) reprezintă roșu pur
• CMYK(100, 0, 100, 0) reprezintă verde pur
• CMYK(100, 100, 0, 0) reprezintă albastru pur
• CMYK(0, 0, 0, 100) reprezintă negru
• CMYK(0, 0, 0, 0) reprezintă alb (culoarea hârtiei)

Deși utilizat în principal pentru imprimare, înțelegerea valorilor CMYK poate fi utilă atunci când proiectezi conținut care va fi în cele din urmă tipărit.

HSV (Nuantă, Saturare, Valoare)

HSV reprezintă culorile în termeni de:

• Nuantă: Tipul de culoare (roșu, galben, verde etc.), măsurată în grade (0-360°)
• Saturare: Intensitatea sau puritatea culorii (0-100%)
• Valoare: Luminozitatea culorii (0-100%)

HSV este deosebit de util pentru selecția culorilor, deoarece separă alegerea culorii (nuanța) de intensitatea acesteia (saturarea) și luminozitatea (valoarea), făcându-l mai intuitiv pentru ajustarea culorilor.

Formulele de conversie a culorilor

Instrumentul de alegere a culorilor convertește automat între diferitele modele de culoare folosind aceste formule matematice:

Conversia RGB în Hex

Pentru a converti RGB în hexazecimal:

1. Convertește fiecare componentă RGB (0-255) într-un număr hexazecimal format din două cifre
2. Concatenează cele trei valori hexazecimale cu un prefix #

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

Unde toHex() convertește un număr zecimal în reprezentarea sa hexazecimală.

Conversia RGB în CMYK

Conversia din RGB în CMYK implică acești pași:

1. Normalizează valorile RGB la intervalul 0-1
2. Calculează componenta neagră (K)
3. Calculează C, M și Y pe baza lui 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\%$

Conversia RGB în HSV

Conversia RGB în 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}$

Pentru Nuantă (H):

undefined

1// Conversia RGB în 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// Conversia Hex în RGB
12function hexToRgb(hex) {
13  // Elimină # dacă este prezent
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Gestionează atât hex de 3 cifre cât și de 6 cifre
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// Conversia RGB în CMYK
29function rgbToCmyk(r, g, b) {
30  // Normalizează valorile RGB
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Calculează K (negru)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Gestionează negrul pur
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Calculează 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// Exemplu de utilizare
57const rgb = { r: 255, g: 0, b: 0 }; // Roșu pur
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# Conversia RGB în Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Conversia Hex în RGB
6def hex_to_rgb(hex_color):
7    # Elimină # dacă este prezent
8    hex_color = hex_color.lstrip('#')
9    
10    # Gestionează atât hex de 3 cifre cât și de 6 cifre
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# Conversia RGB în CMYK
21def rgb_to_cmyk(r, g, b):
22    # Normalizează valorile RGB
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # Calculează K (negru)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Gestionează negrul pur
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Calculează 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# Exemplu de utilizare
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Albastru cer
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    // Conversia RGB în 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    // Conversia Hex în RGB
8    public static int[] hexToRgb(String hexColor) {
9        // Elimină # dacă este prezent
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Gestionează atât hex de 3 cifre cât și de 6 cifre
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    // Conversia RGB în CMYK
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalizează valorile RGB
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Calculează K (negru)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Gestionează negrul pur
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Calculează 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        // Exemplu de utilizare
60        int r = 75, g = 0, b = 130;  // Purpuriu
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

Referințe

1. Agoston, M. K. (2013). Grafică pe computer și modelare geometrică: Implementare și algoritmi. Springer Science & Business Media.

2. Adobe Systems. (2000). Codificarea imaginii de culoare Adobe RGB (1998). Adobe Systems Incorporated.

3. Fairchild, M. D. (2013). Modele de apariție a culorilor. John Wiley & Sons.

4. Hunt, R. W. G., & Pointer, M. R. (2011). Măsurarea culorii. John Wiley & Sons.

5. Poynton, C. (2012). Video digital și HD: Algoritmi și interfețe. Elsevier.

6. W3C. (2018). Modul CSS Color Nivelul 4. W3C Working Draft. Recuperat de la https://www.w3.org/TR/css-color-4/

7. Liniile directoare de accesibilitate a conținutului web (WCAG) 2.1. (2018). Recuperat de la https://www.w3.org/TR/WCAG21/

8. Consorțiul Internațional de Culori. (2004). Specificația ICC.1:2004-10 (Versiunea profilului 4.2.0.0). Recuperat de la http://www.color.org/specification/ICC1v42_2006-05.pdf

Încearcă instrumentul nostru de alegere a culorilor astăzi!

Ești gata să găsești culoarea perfectă pentru proiectul tău? Instrumentul nostru prietenos de alegere a culorilor face ușor să selectezi, să ajustezi și să convertești culorile între diferite formate. Fie că proiectezi un site web, creezi artă digitală sau planifici materiale tipărite, instrumentul nostru oferă precizia și flexibilitatea de care ai nevoie.

Începe să experimentezi cu culorile acum și du-ți designurile la următorul nivel!