HEX, RGB y HSL: elegir un formato de color web

Cada color en estas notaciones es el mismo color sRGB con distinta ropa. HEX es RGB escrito en base dieciséis: #4F46E5 es el canal rojo, verde y azul como dos dígitos hexadecimales cada uno. rgb(79, 70, 229) enuncia los mismos tres canales en decimal, y hsl() describe el mismo píxel como una posición en la rueda de color.

La conversión entre las tres es sin pérdida dentro de sRGB: #4F46E5, rgb(79, 70, 229) y el valor hsl() equivalente hacen el viaje de ida y vuelta con exactitud, así que cambiar de notación es una elección de presentación, no un cambio de color.

• HEXHEX es compacto y estable para copiar y pegar entre herramientas de diseño y código, y por eso las paletas y guías de estilo se publican normalmente en hex.
• RGBRGB se lee como tres intensidades de canal de 0 a 255 y coincide con cómo las pantallas y los formatos de imagen almacenan realmente los píxeles.
• HSLHSL se lee como tono, saturación y luminosidad, más cercano a cómo la gente describe el color y mucho más fácil de ajustar por intención.

La transparencia se acopla a cada notación. rgb() y hsl() aceptan un cuarto argumento —rgba(79, 70, 229, 0.5)— y HEX ganó una forma de ocho dígitos, #4F46E580, donde el último par es el alfa de 00 a FF.

• 0–1 o 00–FFEl alfa va de 0 a 1 en notación funcional y de 00 a FF en hex; 0.5 y 80 son el mismo valor semitransparente.
• Prueba en superficiesUna capa translúcida se multiplica contra lo que haya debajo, así que un token semitransparente necesita pruebas en cada superficie sobre la que pueda caer.
• Tokens emparentadosCuando un sistema de diseño publica una versión sólida y otra translúcida del mismo tono, un solo hex de ocho dígitos las mantiene visiblemente emparentadas.

Editar los canales RGB directamente es aritmética; editar la intención es más fácil en HSL. Un tinte es el mismo tono con más luminosidad, una sombra es el mismo tono con menos, y una variante apagada es el mismo tono con la saturación bajada: tres movimientos de un solo dial en lugar de tres canales a la deriva juntos.

Generador de tonos construye esa rampa mecánicamente: dale un color hex y mezcla hacia el negro y hacia el blanco, devolviendo de tres a veinte pasos equiespaciados como valores hex, de modo que un estado hover y un tono de borde vengan del mismo color fuente en lugar de suposiciones elegidas a mano.

• Tintes y sombrasTintes y sombras: fija tono y saturación, recorre la luminosidad de casi blanco a casi negro y obtendrás una rampa usable para fondos, estados y texto.
• Estados de saturaciónLas variantes apagadas y vivas salen solo del dial de saturación, que es cómo los estados hover y disabled permanecen en la misma familia.
• Rotación de tonoLa rotación de tono produce colores afines: los vecinos análogos se sitúan a unos treinta grados, los complementarios a ciento ochenta.

Las armonías de color son geometría sobre la rueda de tono: los pares complementarios se sientan enfrente, los conjuntos triádicos dividen la rueda en tercios, los grupos análogos se agrupan juntos. HSL hace visible la matemática: cambia un número y todo el esquema se mueve.

Generador de armonías de color aplica exactamente ese modelo. A partir de un hex semilla de seis dígitos genera paletas de cinco colores en seis esquemas clásicos —análogo, complementario, complementario dividido, triádico, tetrádico y monocromo— y comprueba el contraste de cada muestra contra texto negro y blanco con objetivos de ratio WCAG de 3, 4.5 o 7.

El resultado se exporta como propiedades personalizadas CSS y como JSON, así que la paleta cae directamente en una hoja de estilos o un archivo de tokens. Como el motor es determinista, la misma semilla y el mismo esquema reproducen siempre los mismos cinco colores: comparte la semilla, no una captura de pantalla.

El CSS moderno fusionó las viejas formas funcionales: canales separados por espacios con una barra opcional para el alfa —rgb(79 70 229 / 0.5)— en lugar del rgba() cargado de comas. La especificación de nivel 4 también añade notaciones como hwb(), lab() y oklch() para gamuts más amplios y rampas perceptualmente uniformes.

Sea cual sea la notación que estandarices, mezclar dos colores es una operación canal a canal: Mezclador de colores funde dos colores con un peso elegido e informa el resultado como RGBA y hex, así que puedes calcular el punto medio entre dos colores de marca en lugar de estimarlo a ojo.

La misma herramienta sirve de puente entre notaciones: introduce un color en una forma y lee el resultado en otra, manteniendo honesta la aritmética cuando la especificación dice hex pero la hoja de estilos está escrita en rgb().

• Sintaxis nuevaLos canales separados por espacios con barra para el alfa son válidos en todos los navegadores actuales; las formas con comas siguen soportadas como alias heredados.
• Por qué OKLCHoklch() corrige un defecto real de HSL: pasos iguales de luminosidad en HSL no se ven igual de brillantes entre tonos, mientras que OKLCH mantiene consistente la luminosidad percibida.
• Adopta con criterioAdopta las notaciones nuevas donde resuelven un problema —rampas consistentes, pantallas de gamut amplio— y conserva hex o rgb() donde las herramientas y costumbres ya funcionan.

Las paletas rara vez empiezan en la teoría; empiezan en una captura de pantalla, un logotipo o una foto. Leer valores de píxel exactos de la fuente supera a comparar una muestra a ojo contra una rueda de color.

Selector de color de imagen abre un PNG, JPEG o WebP en la pestaña e informa del valor RGBA exacto del píxel en el que haces clic: útil para recuperar un color de marca de un recurso antiguo o comprobar qué contiene realmente un borde con antialiasing.

Todo se ejecuta localmente: la imagen se decodifica en tu navegador y nunca se sube, lo que importa cuando el material es un diseño aún no publicado. Lleva el valor elegido a las herramientas de tonos o armonías y toda la cadena del material a la paleta permanece en tu dispositivo.