Un mismo color se puede escribir de muchas formas. En diseño web y gráfico conviven al menos cuatro notaciones habituales, y cada una es más práctica para una tarea distinta. Saber pasar de una a otra evita perder tiempo copiando valores a mano o buscando el tono exacto por prueba y error.
Los cuatro modelos más comunes
HEX (#3B82F6) es la forma abreviada de escribir un color RGB en hexadecimal: dos dígitos para el rojo, dos para el verde y dos para el azul. Es el formato por defecto en CSS y en la mayoría de herramientas de diseño. Puede llevar dos dígitos más para la transparencia (#3B82F6CC).
RGB (rgb(59, 130, 246)) expresa lo mismo con tres números de 0 a 255. Es idéntico a HEX en la práctica, pero más legible cuando quieres razonar sobre los canales por separado o generar colores desde código.
HSL (hsl(217, 91%, 60%)) describe el color por tono (la posición en la rueda de color, de 0 a 360 grados), saturación (cuán intenso es, de 0 a 100 %) y luminosidad (de negro a blanco, de 0 a 100 %). Es el modelo más intuitivo para ajustar un color: para oscurecerlo bajas la luminosidad, para apagarlo bajas la saturación, sin tocar el resto.
CMYK (cmyk(76%, 47%, 0%, 4%)) es el modelo de la impresión: cian, magenta, amarillo y negro. Se usa al preparar material para imprenta. La conversión desde RGB es aproximada, porque las gamas de pantalla e impresión no coinciden.
Cuándo usar cada uno
- HEX: valor final en CSS, tokens de diseño, comunicación entre diseño y desarrollo.
- RGB: generar colores por código, trabajar con transparencia mediante
rgba(). - HSL: crear una paleta a partir de un color base, generar estados hover/activo, construir escalas de grises o de un mismo tono.
- CMYK: cualquier cosa que vaya a papel.
Cómo convertir con precisión
El conversor de colores de Mcatorce Suite convierte entre HEX, RGB, HSL y CMYK en tiempo real. Escribe el valor en cualquiera de los campos y el resto se actualiza al instante. Incluye un selector visual y, en los navegadores que lo permiten, un cuentagotas para capturar cualquier color de la pantalla.
Todas las conversiones se calculan en el navegador con las fórmulas estándar, sin enviar nada a un servidor.
Consejos prácticos
- Genera variantes con HSL. Para el estado hover de un botón azul, copia su HSL y baja la luminosidad un 8-10 %. Obtendrás una variante coherente sin desviar el tono.
- Comprueba el contraste. Al elegir texto sobre fondo de color, verifica que el contraste cumple las pautas de accesibilidad (WCAG AA pide una relación de al menos 4,5:1 para texto normal).
- No confíes en el CMYK de pantalla para decisiones de imprenta. Úsalo como orientación y pide siempre una prueba física para colores críticos de marca.
- Redondea con cuidado. Al convertir de HSL a HEX y de vuelta puede haber una pequeña deriva por el redondeo; parte siempre del mismo formato canónico.
Preguntas frecuentes
¿HEX y RGB son exactamente lo mismo?
Sí. #3B82F6 y rgb(59, 130, 246) describen el mismo color; solo cambia la notación.
¿Por qué mi color impreso no se parece al de la pantalla? Porque las pantallas emiten luz (RGB) y el papel refleja luz (CMYK), y sus gamas de color no son iguales. Los tonos muy saturados son los que más se apagan al imprimir.
¿Puedo convertir colores con transparencia?
Sí, mediante el canal alfa en HEX de 8 dígitos o rgba() / hsla().