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

¿Qué es un selector de color?

Un selector de color es una herramienta para elegir un color y consultar su valor en distintos formatos de color. Este muestra simultáneamente un color en RGB (rojo, verde, azul), hexadecimal, CMYK (cian, magenta, amarillo, negro) y HSV (tono, saturación, valor). Al cambiar cualquier formato, los demás se actualizan al instante.

Cómo usar el selector de color

Hay tres formas de elegir un color.

Haz clic en cualquier punto del cuadro del espectro para seleccionar un tono y una saturación. La posición horizontal establece el tono (la familia de colores, como rojo o azul). La posición vertical establece la saturación (lo intenso o apagado que se ve el color). Un control deslizante debajo del espectro controla el brillo, desde el negro a la izquierda hasta el brillo máximo a la derecha.

También se pueden escribir valores exactos. El campo hexadecimal acepta códigos como #2ECC71, con # o sin él. Cada campo RGB acepta un número entero de 0 a 255. Cada campo CMYK acepta un número entero de 0 a 100. Un valor escrito por encima del intervalo permitido queda limitado al máximo.

Cada formato de color tiene un botón de copia al lado. Al hacer clic en él, ese valor se copia al portapapeles y aparece brevemente el mensaje «¡Copiado!».

Explicación de los modelos de color

RGB

RGB describe un color como una mezcla de luz roja, verde y azul, los mismos tres colores que usa una pantalla para crear cada píxel. Cada canal va de 0 a 255. RGB(255, 0, 0) es rojo puro, y RGB(0, 0, 0) es negro. Los navegadores, las aplicaciones y el software de vídeo usan RGB porque coincide con el funcionamiento de las pantallas.

Hexadecimal

Un código hexadecimal escribe un color RGB en base 16 en lugar de base 10. #2ECC71 tiene tres pares de caracteres: 2E para el rojo, CC para el verde y 71 para el azul. Cada par va de 00 a FF. Los códigos hexadecimales son habituales en el diseño web porque CSS los acepta directamente y son más cortos de escribir que rgb(). También existe una abreviatura de tres caracteres: #0F0 significa lo mismo que #00FF00.

CMYK

CMYK se utiliza para imprimir. Una impresora crea el color superponiendo tinta cian, magenta, amarilla y negra sobre papel blanco, por lo que funciona restando luz en lugar de sumarla. Cada canal es un porcentaje de 0 a 100. CMYK(0, 0, 0, 0) significa que no hay tinta, por lo que se ve el papel blanco. CMYK no puede reproducir todos los colores que puede mostrar una pantalla; algunos colores brillantes de pantalla, especialmente ciertos azules y verdes, se ven más apagados al imprimirse.

HSV

HSV describe por separado el tono, la saturación y el valor. El tono es la familia de colores y se expresa en grados, de 0° a 360°, donde 0° es rojo, 120° es verde y 240° es azul. La saturación indica la intensidad del color, desde 0 % (gris) hasta 100 % (color completamente saturado). El valor indica el brillo, desde 0 % (negro) hasta 100 % (brillo máximo). HSV se acerca a la forma natural en que las personas describen los colores, por eso el espectro y el control deslizante de brillo de esta herramienta se basan en él.

Fórmula de RGB a hexadecimal

Cada canal RGB, un número de 0 a 255, se convierte en un número hexadecimal de dos dígitos; después, los tres pares se unen con un # delante.

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

Fórmula de RGB a CMYK

Primero, cada canal RGB se escala a una fracción entre 0 y 1. El negro (K) se obtiene a partir del canal de mayor valor. Después, el cian, el magenta y el amarillo se calculan a partir de los canales restantes y de K.

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

Cuando K es igual a 1 (el color es negro puro), C, M y Y se establecen todos en 0 para evitar dividir entre cero.

Fórmula de RGB a HSV

Primero, RGB se escala a fracciones entre 0 y 1. Sea $C_{max}$ el mayor de los tres valores, $C_{min}$ el menor y $\Delta$ la diferencia entre ambos.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ de lo contrario } \frac{\Delta}{C_{max}}\times 100\%$

El tono depende del canal que tenga el valor más alto:

undefined