RGB · HSL · CMYK · HEX
Convertidor RGB/HSL/CMYK
Al cambiar un valor, la vista previa y todas las notaciones se actualizan al momento.
Vista previa del color
El HEX y el selector quedan primero; muestras y reinicio comparten la misma fila.
Color válido.
Usa un botón de copia para llevarte la notación que necesitas.
Ajuste de valores de color
RGB, HSL y CMYK están alineados en filas de la misma altura.
RGBColor de pantalla
HSLAjuste de diseño
CMYKEstimación de impresión
HEXCódigo web
HEX también expande automáticamente la forma corta #RGB a seis dígitos.
Guía de conversión de color
Un código de color es una forma de leer el mismo color en varias notaciones
Este convertidor mantiene un mismo color alineado en HEX, RGB, HSL y CMYK. HEX funciona como código web, RGB como canales rojo-verde-azul para pantalla, HSL como ajuste de tono, saturación y luminosidad, y CMYK como una estimación para hablar de tinta e impresión. Separarlo así evita confundir el uso de cada valor.
Cambia el HEX o un deslizador y el resto de valores se actualiza
No hay botón de calcular. Al editar el campo HEX, el selector de color, los números o los deslizadores RGB/HSL/CMYK, la vista previa y los resultados copiables se actualizan para el mismo color.
- Elige primero el color. Introduce un valor como #3498DB en el campo HEX o selecciónalo visualmente. El HEX de tres dígitos se expande antes de mostrar el resultado.
- Ajusta el modelo que necesitas. RGB usa canales de 0 a 255, HSL usa tono 0–360° con saturación y luminosidad en porcentaje, y CMYK usa porcentajes de 0 a 100%.
- Mira la vista previa y el contraste juntos. La vista previa enseña el color actual, mientras las tarjetas comparan texto blanco y negro sobre ese fondo.
- Copia solo la notación que vas a usar. Para CSS y pantalla suele bastar HEX, RGB o HSL. Toma CMYK como una nota aproximada para impresión, no como perfil definitivo.
RGB, HSL y CMYK describen el mismo color para trabajos distintos
El mismo azul puede servir como valor CSS, como ajuste de tono o como referencia para imprenta. Los campos del tool separan los controles que cambian el color de las formas de leerlo.
Código HEX y selector
HEX escribe rojo, verde y azul con dos dígitos hexadecimales cada uno, como #RRGGBB. El selector sirve cuando prefieres escoger el mismo valor a ojo.
Valores RGB
Red, Green y Blue van de 0 a 255. Para color de pantalla, canvas y comprobaciones CSS, RGB suele ser la lectura más directa.
Valores HSL
Hue es el ángulo del color, Saturation la intensidad y Lightness la luminosidad. HSL ayuda cuando quieres mantener la familia de color y ajustar brillo o viveza.
CMYK y contraste
CMYK es una estimación de tinta calculada desde el color de pantalla. Las tarjetas de contraste ayudan a decidir si sobre ese fondo se lee mejor texto blanco o negro.
Dos dígitos HEX se convierten en un canal RGB de 0 a 255
La conversión parte de RGB. Cada par de dígitos HEX pasa a un canal decimal de 0 a 255; HSL recalcula ese RGB como tono, saturación y luminosidad; CMYK estima porcentajes de tinta desde el mismo color de pantalla. No sustituye un perfil ICC de imprenta.
Con #FF8800 obtienes el mismo naranja en RGB, HSL y CMYK
Si escribes #FF8800, RGB queda en rojo 255, verde 136 y azul 0. El mismo color se lee como hsl(32, 100%, 50%) y la estimación CMYK se centra en magenta 46.7% y amarillo 100%.
Ese naranja se lee mejor con texto negro
Sobre un fondo #FF8800, el texto negro tiene un contraste aproximado de 8.77 y el blanco de 2.39. Aunque el color sea correcto, conviene revisar el color del texto por separado.
El color de pantalla y el de impresión pueden compartir números y aun así verse distintos
RGB y HSL están más cerca del trabajo en pantalla sRGB; CMYK es una aproximación para hablar de tinta. Papel, tinta, impresora y perfiles pueden cambiar el resultado final, así que los trabajos importantes necesitan prueba de color.
- Copia el resultado HEX de seis dígitos. Aunque introduzcas HEX de tres dígitos, el resultado se normaliza a un código de seis dígitos en mayúsculas.
- Usa HSL como vista de ajuste. Hue, Saturation y Lightness son cómodos para ajustar un color, pero la notación CSS final debe seguir las reglas de tu proyecto.
- No trates CMYK como salida final de imprenta. El CMYK de esta herramienta se calcula desde RGB de pantalla. Para material de marca, usa el perfil y la prueba de la imprenta.
- Lee el contraste con contexto. La ratio ayuda, pero el tamaño de texto, el grosor y el fondo alrededor también influyen en la legibilidad real.
Preguntas frecuentes
¿Tengo que escribir # antes del código HEX?
No. La herramienta acepta 3498DB y #3498DB. También acepta la forma corta de tres dígitos y muestra el resultado como HEX de seis dígitos.
¿RGB y HSL hablan del mismo color?
Sí. RGB escribe los canales rojo, verde y azul; HSL reescribe el mismo color como tono, saturación y luminosidad.
¿El valor CMYK puede diferir del resultado de una imprenta?
Sí. Este CMYK es una estimación calculada desde un color RGB de pantalla. El color impreso real puede cambiar con papel, tinta, máquina y perfil ICC.
¿Cómo leo el número de contraste?
Cuanto más alto es el número, más se separa el texto del fondo. En el color inicial #3498DB, negro da 6.66 y blanco 3.15, así que el tool recomienda texto negro.