Eina de Selecció de Color - Converteix Codis de Color RGB, Hex, CMYK i HSV

Què Pots Fer amb aquest Selector de Colors

Necessites el to perfecte per al teu projecte? Aquest selector de colors et permet seleccionar, previsualitzar i convertir colors entre formats RGB, Hex, CMYK i HSV instantàniament. Tant si estàs programant un lloc web, dissenyant un logotip o preparant arxius per imprimir, trobaràs els valors de color exactes que necessites, sense endevinar ni canviar entre eines.

Fes clic a qualsevol punt de l'espectre de colors per triar un to, ajusta la brillantor amb un control lliscant o introdueix valors precisos directament. Cada format s'actualitza en temps real, i pots copiar qualsevol codi de color amb un sol clic.

Entenent els Models de Color

Diferents projectes necessiten formats de color diferents. Aquí hi ha el que fa cadascun i quan fer-lo servir:

RGB (Vermell, Verd, Blau)

RGB funciona barrejant llum vermella, verda i blava, de la mateixa manera que la seva pantalla mostra colors ara mateix. Cada component va de 0 a 255:

• RGB(255, 0, 0) = vermell pur
• RGB(0, 255, 0) = verd pur
• RGB(0, 0, 255) = blau pur
• RGB(255, 255, 255) = blanc
• RGB(0, 0, 0) = negre

Quan fer servir RGB: Qualsevol treball digital: llocs web, aplicacions mòbils, edició de vídeo o gràfics de pantalla. És el llenguatge natiu de les pantalles, per això eines com CSS suporten funcions rgb() i rgba() directament. Segons l'especificació W3C CSS Color Module, RGB és el model de color fonamental per als estàndards web.

Hexadecimal (Hex)

Els codis Hex són simplement valors RGB escrits en base-16 en lloc de base-10. Un color hex es veu com #FF5733, on:

• El símbol # el marca com a codi hex
• Els primers dos caràcters = vermell (00-FF)
• Els dos del mig = verd (00-FF)
• Els dos últims = blau (00-FF)
• #FF0000 = vermell, #00FF00 = verd, #0000FF = blau

A vegades es veu un format abreujat de 3 caràcters com #F00 en lloc de #FF0000—funciona quan cada canal de color repeteix el mateix dígit.

Quan fer servir Hex: El cas d'ús principal és el desenvolupament web. CSS sempre ha suportat la notació hex, i la majoria de desenvolupadors la troben més ràpida d'escriure que rgb(). Un error comú: oblidar el símbol # trencarà els seus estils silenciosament, ja que els navegadors no el reconeixeran com un color vàlid.

CMYK (Cian, Magenta, Groc, Clau/Negre)

CMYK és el model de color usat per les impressores. A diferència de RGB (que afegeix llum), CMYK la resta: barrejant tintes en paper blanc per crear colors:

• Cada component va del 0% al 100%
• CMYK(0, 100, 100, 0) = vermell
• CMYK(100, 0, 100, 0) = verd
• CMYK(0, 0, 0, 100) = tinta negra pura
• CMYK(0, 0, 0, 0) = sense tinta (es veu el paper blanc)

Quan fer servir CMYK: Disseny per a impressió: targetes de visita, fullets, revistes, packaging. Aquí hi ha la realitat: molts colors RGB brillants simplement no es poden reproduir amb tintes CMYK. Aquell blau elèctric que veus a la pantalla? Es veurà més apagat quan s'imprimeixi. Els dissenyadors professionals sempre prèviament els colors CMYK abans d'enviar arxius a la impressora per evitar sorpreses.

HSV (To, Saturació, Valor)

HSV descompon el color en tres components intuïtius:

• To: Quina família de color (0-360°)—0° és vermell, 120° és verd, 240° és blau
• Saturació: Quant de viu o gris (0-100%)—0% és escala de grisos, 100% és totalment saturat
• Valor: Quant de brillant o fosc (0-100%)—0% és negre, 100% és brillantor total

Per què importa HSV: Coincideix amb la manera com els humans pensen naturalment sobre el color. Vols un blau més fosc? Baixa el valor. Vols un blau menys intens? Baixa la saturació. Això fa que HSV sigui ideal per a selectors de color interactius com aquest, on selecciones un to a l'espectre i ajustes la brillantor amb un control lliscant.

Fórmules de Conversió de Color

El selector de color converteix automàticament entre diferents models de color mitjançant aquestes fórmules matemàtiques:

Conversió de RGB a Hexadecimal

Per convertir RGB a hexadecimal:

1. Convertir cada component RGB (0-255) a un número hexadecimal de dos dígits
2. Concatenar els tres valors hexadecimals amb un prefix #

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

On toHex() converteix un número decimal a la seva representació hexadecimal.

Conversió de RGB a CMYK

La conversió de RGB a CMYK implica aquests passos:

1. Normalitzar els valors RGB a l'interval 0-1
2. Calcular el component de clau negra (K)
3. Calcular C, M i Y basats en 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\%$

Conversió de RGB a HSV

Convertint RGB a 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}$

Per a Matís (H):

undefined

1// Conversió de RGB a 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// Conversió de Hex a RGB
12function hexToRgb(hex) {
13  // Eliminar # si és present
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Gestionar hex de 3 i 6 dígits
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// Conversió de RGB a CMYK
29function rgbToCmyk(r, g, b) {
30  // Normalitzar valors RGB
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Calcular K (negre)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Gestionar negre pur
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Calcular 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// Exemple d'ús
57const rgb = { r: 255, g: 0, b: 0 }; // Vermell pur
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# Conversió de RGB a Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Conversió de Hex a RGB
6def hex_to_rgb(hex_color):
7    # Eliminar # si és present
8    hex_color = hex_color.lstrip('#')
9    
10    # Gestionar hex de 3 i 6 dígits
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# Conversió de RGB a CMYK
21def rgb_to_cmyk(r, g, b):
22    # Normalitzar valors RGB
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # Calcular K (negre)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Gestionar negre pur
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Calcular 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# Exemple d'ús
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Blau cel
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    // Conversió de RGB a 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    // Conversió de Hex a RGB
8    public static int[] hexToRgb(String hexColor) {
9        // Eliminar # si és present
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Gestionar hex de 3 i 6 dígits
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    // Conversió de RGB a CMYK
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalitzar valors RGB
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Calcular K (negre)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Gestionar negre pur
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Calcular 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        // Exemple d'ús
60        int r = 75, g = 0, b = 130;  // Porpra
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

Referències i Lectures Addicionals

• Mòdul de Color CSS del W3C Nivell 4 - Especificació oficial de colors web
• Directrius de Contrast WCAG 2.1 - Estàndards d'accessibilitat per al contrast de colors
• Comprovador de Contrast de WebAIM - Prova de proporcions de contrast de colors
• Estàndards de Perfil de Color ICC - Especificació tècnica per a conversions de colors
• Documentació Web de MDN: Valors de Color CSS - Guia completa de formats de colors web