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.

HEX y rgb() pueden representar exactamente los mismos canales sRGB de ocho bits. Un valor hsl() también puede describir ese color, pero redondear tono, saturación o luminosidad puede alterar la conversión de ida y vuelta.

• 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 funcional va de 0 a 1; el hexadecimal de ocho dígitos usa de 00 a FF. El byte 80 equivale a 128/255, aproximadamente 0,502: se acerca a 0,5, pero no es exactamente igual.
• Prueba en superficiesUna capa translúcida se compone con el fondo según su alfa; pruébala sobre cada superficie donde vaya a aparecer.
• 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.

Color Shades Generator crea la escala de forma mecánica: parte de un color hexadecimal y lo mezcla hacia el negro y el blanco para devolver entre tres y veinte pasos ponderados en hex. No son uniformes perceptualmente; comprueba cada candidato en su contexto real de interfaz.

• 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. Para reproducir los cinco colores, comparte el color inicial y el esquema; incluye el objetivo de contraste si también importan las mismas etiquetas de aprobado o suspenso.

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.

Color Mixer acepta colores hexadecimales compatibles, ofrece interpolación que considera el alfa o composición source-over y muestra resultados en hex y RGBA. Elige la operación y el peso antes de comparar dos colores de marca.

El campo de entrada acepta texto hexadecimal, no cualquier expresión de color CSS. Convierte los valores rgb() o hsl() a un formato hexadecimal compatible antes de usar esta herramienta.

• 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.

Una paleta suele empezar con una captura, un logotipo o una foto. Muestrear un píxel decodificado en el navegador da un valor reproducible para esa representación, más útil que adivinar el color a ojo.

Image Color Picker abre un PNG, JPEG o WebP en la pestaña y muestra el valor RGBA del píxel decodificado que el navegador muestrea con Canvas al pulsarlo. Sirve para examinar un recurso antiguo o un borde suavizado, pero el valor puede reflejar la decodificación y la conversión de color.

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.