Selector de Color - Convertir Códigos de Color RGB, Hex, CMYK y HSV

Lo que puedes hacer con este Selector de Color

¿Necesitas el tono perfecto para tu proyecto? Este selector de color te permite seleccionar, previsualizar y convertir colores entre formatos RGB, Hex, CMYK y HSV al instante. Ya sea que estés programando un sitio web, diseñando un logotipo o preparando archivos para imprimir, encontrarás los valores de color exactos que necesitas, sin conjeturas y sin cambiar entre herramientas.

Haz clic en cualquier parte del espectro de color para seleccionar un tono, ajusta el brillo con un control deslizante o ingresa valores precisos directamente. Cada formato se actualiza en tiempo real, y puedes copiar cualquier código de color con un solo clic.

Comprendiendo los Modelos de Color

Diferentes proyectos necesitan diferentes formatos de color. Aquí está lo que hace cada uno y cuándo usarlo:

RGB (Rojo, Verde, Azul)

RGB funciona mezclando luz roja, verde y azul—de la misma manera que su pantalla muestra colores en este momento. Cada componente varía de 0 a 255:

• RGB(255, 0, 0) = rojo puro
• RGB(0, 255, 0) = verde puro
• RGB(0, 0, 255) = azul puro
• RGB(255, 255, 255) = blanco
• RGB(0, 0, 0) = negro

Cuándo usar RGB: Cualquier trabajo digital—sitios web, aplicaciones móviles, edición de video o gráficos basados en pantalla. Es el lenguaje nativo de las pantallas, por lo que herramientas como CSS admiten directamente las funciones rgb() y rgba(). Según la especificación del Módulo de Color CSS de W3C, RGB es el modelo de color fundamental para los estándares web.

Hexadecimal (Hex)

Los códigos Hex son simplemente valores RGB escritos en base-16 en lugar de base-10. Un color hex se ve como #FF5733, donde:

• El símbolo # lo marca como un código hex
• Primeros dos caracteres = rojo (00-FF)
• Dos del medio = verde (00-FF)
• Últimos dos = azul (00-FF)
• #FF0000 = rojo, #00FF00 = verde, #0000FF = azul

A veces verás un atajo de 3 caracteres como #F00 en lugar de #FF0000—esto funciona cuando cada canal de color repite el mismo dígito.

Cuándo usar Hex: Desarrollo web es el caso de uso principal. CSS siempre ha admitido la notación hex, y la mayoría de los desarrolladores la encuentran más rápida de escribir que rgb(). Una trampa común: olvidar el símbolo # romperá tus estilos silenciosamente, ya que los navegadores no lo reconocerán como un color válido.

CMYK (Cian, Magenta, Amarillo, Key/Negro)

CMYK es el modelo de color utilizado por impresoras. A diferencia de RGB (que añade luz), CMYK la sustrae—mezclando tintas en papel blanco para crear colores:

• Cada componente varía de 0% a 100%
• CMYK(0, 100, 100, 0) = rojo
• CMYK(100, 0, 100, 0) = verde
• CMYK(0, 0, 0, 100) = tinta negra pura
• CMYK(0, 0, 0, 0) = sin tinta (papel blanco se ve a través)

Cuándo usar CMYK: Diseñando para impresión—tarjetas de visita, folletos, revistas, empaques. Aquí está la realidad: muchos colores RGB vibrantes simplemente no pueden reproducirse con tintas CMYK. Ese azul eléctrico brillante que ves en pantalla se verá más apagado al imprimirse. Los diseñadores profesionales siempre previsual las conversiones CMYK antes de enviar archivos a la imprenta para evitar sorpresas.

HSV (Matiz, Saturación, Valor)

HSV descompone el color en tres componentes intuitivos:

• Matiz: Qué familia de color (0-360°)—0° es rojo, 120° es verde, 240° es azul
• Saturación: Qué tan vívido o gris (0-100%)—0% es escala de grises, 100% está completamente saturado
• Valor: Qué tan brillante u oscuro (0-100%)—0% es negro, 100% es brillo total

Por qué importa HSV: Coincide con cómo los humanos piensan naturalmente sobre el color. ¿Quieres un azul más oscuro? Baja el valor. ¿Quieres un azul menos intenso? Baja la saturación. Esto hace que HSV sea ideal para selectores de color interactivos como este, donde seleccionas un matiz en el espectro y ajustas el brillo con un control deslizante.

Fórmulas de Conversión de Color

El selector de color convierte automáticamente entre diferentes modelos de color utilizando estas fórmulas matemáticas:

Conversión de RGB a Hex

Para convertir RGB a hexadecimal:

1. Convertir cada componente RGB (0-255) a un número hexadecimal de dos dígitos
2. Concatenar los tres valores hexadecimales con un prefijo #

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

Donde toHex() convierte un número decimal a su representación hexadecimal.

Conversión de RGB a CMYK

La conversión de RGB a CMYK implica estos pasos:

1. Normalizar valores RGB al rango 0-1
2. Calcular el componente de clave negra (K)
3. Calcular C, M e Y basado 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ón de RGB a HSV

Convertir 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}$

Para Tono (H):

undefined

1// Conversión 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ón de Hex a RGB
12function hexToRgb(hex) {
13  // Eliminar # si está presente
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Manejar hex de 3 y 6 dígitos
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ón de RGB a CMYK
29function rgbToCmyk(r, g, b) {
30  // Normalizar valores RGB
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Calcular K (negro)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Manejar negro puro
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// Uso de ejemplo
57const rgb = { r: 255, g: 0, b: 0 }; // Rojo puro
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# Conversión de RGB a Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Conversión de Hex a RGB
6def hex_to_rgb(hex_color):
7    # Eliminar # si está presente
8    hex_color = hex_color.lstrip('#')
9    
10    # Manejar hex de 3 y 6 dígitos
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ón de RGB a CMYK
21def rgb_to_cmyk(r, g, b):
22    # Normalizar valores RGB
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # Calcular K (negro)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Manejar negro puro
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# Uso de ejemplo
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Azul cielo
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ón 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ón de Hex a RGB
8    public static int[] hexToRgb(String hexColor) {
9        // Eliminar # si está presente
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Manejar hex de 3 y 6 dígitos
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ón de RGB a CMYK
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalizar valores RGB
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Calcular K (negro)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Manejar negro puro
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        // Uso de ejemplo
60        int r = 75, g = 0, b = 130;  // Púrpura
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

Referencias y Lecturas Adicionales

• Módulo de Color CSS del W3C Nivel 4 - Especificación oficial de colores web
• Directrices de Contraste WCAG 2.1 - Estándares de accesibilidad para contraste de color
• Verificador de Contraste WebAIM - Probar razones de contraste de color
• Estándares de Perfil de Color ICC - Especificación técnica para conversiones de color
• Documentos Web de MDN: Valores de Color CSS - Guía completa de formatos de colores web