Conversor de colores
Introduce un nombre o código de color CSS para ver sus valores RGB, HEX, HSL, HWB, CMYK y NCol, junto con una vista previa del color.
Conversor de colores HEX ⇄ RGB ⇄ HSL
Fórmula del conversor de colores
Donde:
- \(h_1,\ldots,h_6\) — los seis dígitos de un color HEX, leídos como valores de 0 a 15; las letras de la A a la F representan del 10 al 15.
- \(R\), \(G\) y \(B\) — los valores de los canales rojo, verde y azul, cada uno de 0 a 255.
Esta fórmula convierte un color HEX de seis dígitos a RGB. La calculadora también acepta otros formatos de color compatibles y realiza conversiones entre ellos.
Conversor de colores – Ejemplo de cálculo
Ejemplo: la entrada predeterminada es skyblue. Este color con nombre corresponde a #87CEEB, por lo que sus pares de dígitos HEX pueden convertirse a RGB.
\[R=8(16)+7=135,\qquad G=12(16)+14=206,\qquad B=14(16)+11=235\]
Resultado: skyblue tiene el valor HEX #87CEEB y el valor RGB rgb(135, 206, 235). Sus valores HSL son aproximadamente 197° de tono, 71 % de saturación y 73 % de luminosidad.
Cómo usar el conversor de colores
- Introduce un color en el campo Color. Puedes empezar con el valor predeterminado
skyblue, escribir un nombre de color CSS comored, o introducir un código como#f00orgb(255, 0, 0). - Comprueba el resultado de Color para ver una vista previa de la entrada interpretada.
- Copia el formato que necesites de Nombre, RGB, HEX, HSL, HWB, CMYK o NCol.
Si en Nombre aparece «sin nombre», el color no tiene un nombre coincidente en la lista de colores con nombre del conversor. Los resultados numéricos pueden seguir representando un color válido.
Qué significan los formatos de color
Un color digital puede describirse de varias maneras sin cambiar su apariencia. HEX escribe el rojo, el verde y el azul como pares de dígitos hexadecimales: #87CEEB significa rojo 87, verde CE y azul EB en base 16. RGB expresa esos mismos canales como números decimales de 0 a 255. Si quieres resolver por separado la aritmética en base 16, usa el Conversor hexadecimal; convierte números, no valores completos de color CSS.
HSL describe el tono, la saturación y la luminosidad. El tono es una posición en la rueda de color, normalmente expresada en grados; la saturación describe la intensidad del color, y la luminosidad va del negro hacia el blanco. HWB utiliza en su lugar tono, blancura y negrura. Estos formatos pueden ser más fáciles de leer cuando comparas tonalidades o ajustas un color a ojo. RGB y HEX suelen ser más prácticos cuando una especificación exige valores exactos de canal.
CMYK proporciona valores de cian, magenta, amarillo y negro derivados del color de pantalla. NCol es una notación basada en el tono que ofrece el conversor; no se usa tanto en CSS como HEX, RGB o HSL. El formato de salida cambia cómo se escribe un color, no el color subyacente elegido. Pequeñas diferencias en los porcentajes mostrados pueden deberse al redondeo.
Límites prácticos y consejos
El conversor necesita una entrada que su analizador de colores reconozca. Los nombres de color CSS estándar y los códigos de color CSS habituales son buenos puntos de partida. Un código HEX de tres dígitos es una abreviatura: por ejemplo, #f00 se expande a #ff0000. Las letras HEX no distinguen mayúsculas de minúsculas, así que #87ceeb y #87CEEB representan el mismo color.
Algunas entradas incluyen un valor alfa, que controla la transparencia. Para las entradas reconocidas con alfa, los resultados RGB, HSL, HWB y NCol usan formas con alfa. Comprueba cada resultado antes de copiarlo en otra aplicación: no todos los formatos enumerados describen la transparencia de la misma manera. La vista previa también puede verse diferente sobre otro fondo cuando un color es parcialmente transparente.
El CMYK de aquí es una conversión matemática a partir de un color digital, no una conversión con perfil de impresión. La apariencia impresa depende de la impresora, las tintas, el papel y los ajustes de gestión del color, así que usa un flujo de trabajo de impresión adecuado cuando el color exacto de producción sea importante. Asimismo, la apariencia de un color en pantalla depende del monitor y de sus ajustes; la coincidencia de valores numéricos por sí sola no puede garantizar una apariencia idéntica en todos los dispositivos.
Si colocas un color HEX en un parámetro de consulta de una URL, recuerda que # tiene un significado especial en las URL. Usa el Codificador de URL para codificar el valor cuando sea necesario.
Preguntas frecuentes
¿Cómo convierto RGB a HEX a mano?
Convierte cada canal RGB de decimal a dos dígitos hexadecimales y luego une los tres pares tras un #. Divide el valor de un canal entre 16: el cociente entero es el primer dígito y el resto es el segundo. Por ejemplo, 206 da cociente 12 (C) y resto 14 (E), por lo que se convierte en CE. Un valor inferior a 16 necesita un cero a la izquierda, por ejemplo, 9 se convierte en 09.
¿Cómo puedo calcular HSL a partir de RGB?
Primero divide cada canal RGB entre 255 y luego encuentra el valor mayor \(M\) y el menor \(m\). La luminosidad es \(L=(M+m)/2\). Si \(M=m\), la saturación es cero y el tono no tiene un valor significativo. En caso contrario, la saturación es \((M-m)/(1-|2L-1|)\); el tono depende de qué canal sea el mayor. Por ejemplo, el rojo puro, rgb(255, 0, 0), es hsl(0, 100%, 50%).
¿Cuál es una buena relación de contraste para los colores del texto y del fondo?
Para los objetivos habituales de WCAG 2.2 nivel AA, busca al menos 4,5:1 para texto normal y 3:1 para texto grande. Los objetivos AAA son 7:1 y 4,5:1, respectivamente. Un conversor de colores por sí solo no puede decirte si una combinación cumple esos objetivos: el contraste depende de ambos colores. Comprueba juntos el primer plano y el fondo reales, incluido el fondo visible detrás de los colores transparentes.
¿Por qué un color gris tiene un valor de tono?
El tono está matemáticamente indefinido cuando un color no tiene saturación, como ocurre con los valores RGB cuyos tres canales son iguales. Un conversor puede mostrar un tono de marcador de posición, a menudo 0°, para mantener completa la notación HSL o HWB. Ese número no hace que el gris sea rojizo. A medida que la saturación se acerca a cero, pequeños cambios en los canales también pueden provocar grandes cambios en el tono indicado sin apenas cambio visible.
¿El valor alfa cambia los canales RGB de un color?
El alfa controla cuánto se muestra de un color sobre su fondo; por sí solo no cambia los canales RGB almacenados del color. Un valor alfa de 0 es totalmente transparente, mientras que 1 es totalmente opaco. El resultado visible depende del fondo: para cada canal, el valor mostrado es aproximadamente \(\alpha\times\text{primer plano}+(1-\alpha)\times\text{fondo}\). Un rojo transparente puede, por tanto, verse rosado sobre el blanco.
¿Por qué un color puede cambiar ligeramente tras convertirlo de ida y vuelta?
Las conversiones pueden introducir redondeo. Los canales RGB suelen almacenarse como números enteros de 0 a 255, mientras que HSL y otros formatos pueden mostrar grados o porcentajes redondeados. Volver a introducir esos resultados redondeados puede producir valores RGB ligeramente diferentes. Para conservar un color RGB exacto a través de ediciones o copias, mantén su valor RGB u HEX de seis dígitos original en lugar de confiar en resultados intermedios redondeados.