Instrument de Selectare Culori - Convertire Coduri Culori RGB, Hex, CMYK și HSV

Ce Poți Face cu Acest Selector de Culori

Ai nevoie de nuanța perfectă pentru proiectul tău? Acest selector de culori îți permite să selectezi, previzualizezi și să convertești culorile între formatele RGB, Hex, CMYK și HSV instant. Fie că programezi un site web, proiectezi un logo sau pregătești fișiere pentru imprimare, vei găsi valorile exacte de culoare de care ai nevoie—fără ghicire, fără a schimba între unelte.

Apasă oriunde în spectrul de culori pentru a selecta o nuanță, ajustează luminozitatea cu un cursor sau introdu valori precise direct. Fiecare format se actualizează în timp real, și poți copia orice cod de culoare cu un singur clic.

Înțelegerea Modelelor de Culoare

Diferite proiecte au nevoie de diferite formate de culoare. Iată ce face fiecare și când să le utilizezi:

RGB (Roșu, Verde, Albastru)

RGB funcționează prin amestecarea luminii roșii, verzi și albastre - la fel cum ecranul afișează culorile chiar acum. Fiecare componentă variază de la 0 la 255:

• RGB(255, 0, 0) = roșu pur
• RGB(0, 255, 0) = verde pur
• RGB(0, 0, 255) = albastru pur
• RGB(255, 255, 255) = alb
• RGB(0, 0, 0) = negru

Când să folosești RGB: Orice lucrare digitală - site-uri web, aplicații mobile, editare video sau grafică pentru ecran. Este limbajul nativ al afișajelor, de aceea instrumente precum CSS suportă direct funcțiile rgb() și rgba(). Conform specificației W3C CSS Color Module, RGB este modelul de culoare fundamental pentru standardele web.

Hexazecimal (Hex)

Codurile Hex sunt doar valori RGB scrise în baza 16 în loc de baza 10. Un cod de culoare hex arată ca #FF5733, unde:

• Simbolul # îl marchează ca un cod hex
• Primele două caractere = roșu (00-FF)
• Două caractere din mijloc = verde (00-FF)
• Ultimele două = albastru (00-FF)
• #FF0000 = roșu, #00FF00 = verde, #0000FF = albastru

Uneori vei vedea o prescurtare pe 3 caractere precum #F00 în loc de #FF0000 - aceasta funcționează atunci când fiecare canal de culoare repetă aceeași cifră.

Când să folosești Hex: Dezvoltarea web este cazul principal de utilizare. CSS a acceptat întotdeauna notația hex, iar cei mai mulți developeri o găsesc mai rapidă de scris decât rgb(). O capcană obișnuită: uitarea simbolului # va întrerupe stilurile în mod silent, deoarece browserele nu îl vor recunoaște ca o culoare validă.

CMYK (Cyan, Magenta, Galben, Cheie/Negru)

CMYK este modelul de culoare utilizat de imprimante. Spre deosebire de RGB (care adaugă lumină), CMYK o subtrage - amestecând cerneluri pe hârtie albă pentru a crea culori:

• Fiecare componentă variază de la 0% la 100%
• CMYK(0, 100, 100, 0) = roșu
• CMYK(100, 0, 100, 0) = verde
• CMYK(0, 0, 0, 100) = cerneală neagră pură
• CMYK(0, 0, 0, 0) = fără cerneală (hârtia albă se vede prin)

Când să folosești CMYK: Proiectare pentru tipărit - cărți de vizită, broșuri, reviste, ambalaje. Iată realitatea: multe culori RGB vibrante pur și simplu nu pot fi reproduse cu cerneluri CMYK. Acel albastru electric strălucitor pe care îl vezi pe ecran? Va arăta mai șters când este tipărit. Designerii profesioniști previzualizează întotdeauna conversiile CMYK înainte de a trimite fișierele la imprimantă pentru a evita surprizele.

HSV (Nuanță, Saturație, Valoare)

HSV descompune culoarea în trei componente intuitive:

• Nuanță: Care familie de culoare (0-360°) - 0° este roșu, 120° este verde, 240° este albastru
• Saturație: Cât de vie sau gri (0-100%) - 0% este în tonuri de gri, 100% este complet saturată
• Valoare: Cât de luminoasă sau întunecată (0-100%) - 0% este negru, 100% este luminozitate maximă

De ce contează HSV: Se potrivește modului în care oamenii gândesc natural culorile. Vrei un albastru mai întunecat? Scade valoarea. Vrei un albastru mai puțin intens? Scade saturația. Acest lucru face ca HSV să fie ideal pentru selectoarele de culoare interactive, unde selectezi o nuanță pe spectru și ajustezi luminozitatea cu un cursor.

Formule de Conversie a Culorilor

Selectorul de culori convertește automat între diferite modele de culori folosind aceste formule matematice:

Conversie RGB la Hex

Pentru a converti RGB la hexazecimal:

1. Convertiți fiecare componentă RGB (0-255) la un număr hexazecimal pe două cifre
2. Concatenați 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 la reprezentarea sa hexazecimală.

Conversie RGB la CMYK

Conversia de la RGB la CMYK implică acești pași:

1. Normalizați valorile RGB la intervalul 0-1
2. Calculați componenta cheie neagră (K)
3. Calculați C, M și Y în funcție de 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\%$

Conversie RGB la HSV

Convertirea RGB la 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 Nuanță (H):

undefined

1// Conversie RGB la 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// Conversie Hex la RGB
12function hexToRgb(hex) {
13  // Elimină # dacă este prezent
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Tratează atât hex cu 3 cifre, cât și cu 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// Conversie RGB la 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  // Tratează 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# Conversie RGB la Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Conversie Hex la RGB
6def hex_to_rgb(hex_color):
7    # Elimină # dacă este prezent
8    hex_color = hex_color.lstrip('#')
9    
10    # Tratează atât hex cu 3 cifre, cât și cu 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# Conversie RGB la 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    # Tratează 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    // Conversie RGB la 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    // Conversie Hex la 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        // Tratează atât hex cu 3 cifre, cât și cu 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    // Conversie RGB la 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        // Tratează 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;  // Mov
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 și Lectură Suplimentară

• Modulul de Culoare CSS W3C Nivel 4 - Specificație oficială pentru culorile web
• Ghiduri WCAG 2.1 privind Contrastul - Standarde de accesibilitate pentru contrast de culoare
• Verificator de Contrast WebAIM - Testează rapoartele de contrast între culori
• Standarde Profil de Culoare ICC - Specificație tehnică pentru conversii de culori
• Documentație MDN Web: Valori de Culoare CSS - Ghid cuprinzător pentru formatele de culoare web