Herramienta de Selector de Color Simple y Amigable

Introducción

La Herramienta de Selector de Color es una aplicación intuitiva y fácil de usar diseñada para ayudar a los usuarios a seleccionar, visualizar y convertir colores en múltiples formatos de color. Ya seas un diseñador web creando un esquema de color, un artista digital buscando el tono perfecto, o un desarrollador implementando una interfaz de usuario, este selector de color proporciona una forma sencilla de trabajar con colores en formatos RGB, Hexadecimal, CMYK y HSV. Con su espectro de color interactivo, control deslizante de brillo y opciones de entrada precisas, puedes encontrar, ajustar y copiar rápidamente los valores de color para tus proyectos.

Entendiendo los Modelos de Color

Antes de sumergirse en cómo usar el selector de color, es útil entender los diferentes modelos de color que soporta:

RGB (Rojo, Verde, Azul)

RGB es un modelo de color aditivo donde la luz roja, verde y azul se combinan de varias maneras para reproducir una amplia gama de colores. En aplicaciones digitales:

• Cada componente (R, G, B) varía de 0 a 255
• RGB(255, 0, 0) representa rojo puro
• RGB(0, 255, 0) representa verde puro
• RGB(0, 0, 255) representa azul puro
• RGB(255, 255, 255) representa blanco
• RGB(0, 0, 0) representa negro

El modelo RGB está directamente relacionado con cómo se muestran los colores en las pantallas, lo que lo convierte en la opción principal para el diseño digital.

Hexadecimal (Hex)

Los códigos de color hexadecimal son una forma de representar colores RGB utilizando un sistema de numeración base-16:

• Un color hex comienza con un signo de número (#) seguido de seis caracteres
• El primer par representa rojo, el segundo verde y el tercero azul
• Cada par varía de 00 a FF (0-255 en decimal)
• #FF0000 representa rojo puro
• #00FF00 representa verde puro
• #0000FF representa azul puro
• La notación abreviada está disponible para ciertos colores (por ejemplo, #F00 para rojo)

Los códigos hex son ampliamente utilizados en el desarrollo web (CSS, HTML) y aplicaciones de diseño digital.

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

CMYK es un modelo de color sustractivo utilizado principalmente en la impresión a color:

• Cada componente varía del 0% al 100%
• CMYK(0, 100, 100, 0) representa rojo puro
• CMYK(100, 0, 100, 0) representa verde puro
• CMYK(100, 100, 0, 0) representa azul puro
• CMYK(0, 0, 0, 100) representa negro
• CMYK(0, 0, 0, 0) representa blanco (color del papel)

Aunque se utiliza principalmente para impresión, entender los valores CMYK puede ser útil al diseñar contenido que eventualmente se imprimirá.

HSV (Tono, Saturación, Valor)

HSV representa colores en términos de:

• Tono: El tipo de color (rojo, amarillo, verde, etc.), medido en grados (0-360°)
• Saturación: La intensidad o pureza del color (0-100%)
• Valor: El brillo del color (0-100%)

HSV es particularmente útil para la selección de colores, ya que separa la elección del color (tono) de su intensidad (saturación) y brillo (valor), lo que facilita más intuitivamente ajustar colores.

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. Convierte cada componente RGB (0-255) a un número hexadecimal de dos dígitos
2. Concatena 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. Normaliza los valores RGB al rango 0-1
2. Calcula el componente clave (K)
3. Calcula C, M y Y en función 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\%$

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 el 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// Ejemplo de uso
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# Ejemplo de uso
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        // Ejemplo de uso
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

1. Agoston, M. K. (2013). Gráficos por Computadora y Modelado Geométrico: Implementación y Algoritmos. Springer Science & Business Media.

2. Adobe Systems. (2000). Codificación de Imagen de Color Adobe RGB (1998). Adobe Systems Incorporated.

3. Fairchild, M. D. (2013). Modelos de Apariencia del Color. John Wiley & Sons.

4. Hunt, R. W. G., & Pointer, M. R. (2011). Midiendo Color. John Wiley & Sons.

5. Poynton, C. (2012). Video Digital y HD: Algoritmos e Interfaces. Elsevier.

6. W3C. (2018). Módulo de Color CSS Nivel 4. Borrador de Trabajo del W3C. Recuperado de https://www.w3.org/TR/css-color-4/

7. Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1. (2018). Recuperado de https://www.w3.org/TR/WCAG21/

8. Consorcio Internacional del Color. (2004). Especificación ICC.1:2004-10 (Versión del Perfil 4.2.0.0). Recuperado de http://www.color.org/specification/ICC1v42_2006-05.pdf

¡Prueba Nuestra Herramienta de Selector de Color Hoy!

¿Listo para encontrar el color perfecto para tu proyecto? Nuestra herramienta de selector de color fácil de usar facilita la selección, ajuste y conversión de colores entre diferentes formatos. Ya sea que estés diseñando un sitio web, creando arte digital o planificando materiales impresos, nuestra herramienta proporciona la precisión y flexibilidad que necesitas.

¡Comienza a experimentar con colores ahora y lleva tus diseños al siguiente nivel!