Selector y convertidor de color

La guía completa de formatos de color CSS: HEX, RGB, HSL y más

El color es una de las herramientas más poderosas en el conjunto de herramientas de un diseñador o desarrollador, sin embargo, los múltiples sistemas de formato de color utilizados en CSS (HEX, RGB, RGBA, HSL, HSLA y ahora color()) son una fuente constante de confusión. Comprender cuándo utilizar cada formato, por qué existen y cómo se relacionan entre sí es esencial para cualquier creación profesional de la web. Nuestro Selector y convertidor de color gratuito le permite traducir instantáneamente entre todos los formatos de color principales con un solo clic.

Cómo las computadoras representan el color: el modelo RGB

A nivel de hardware, cada monitor produce color combinando tres colores primarios de luz: rojo, verde y azul (RGB). Cada píxel de la pantalla se compone de tres pequeños subpíxeles, uno para cada canal de color. Al variar el brillo de cada subpíxel de forma independiente, el monitor puede producir millones de colores distintos.

En las pantallas estándar de 8 bits (la inmensa mayoría de las pantallas de consumo), cada canal de color está representado por un valor de 0 (apagado/oscuro) a 255 (intensidad máxima). Esto nos da 256 × 256 × 256 = 16.777.216 colores posibles, comúnmente llamados "color verdadero de 24 bits" o "16,7 millones de colores".

Códigos de colores HEX (#RRGGBB)

El formato de color hexadecimal es la forma más común de escribir colores en CSS y herramientas de diseño. Un código HEX son simplemente los valores RGB escritos en notación base 16 (hexadecimal):

• #FF0000 = Rojo (R=255, G=0, B=0)
• #00FF00 = Verde (R=0, G=255, B=0)
• #0000FF = Azul (R=0, G=0, B=255)
• #FFFFFF = Blanco (R=255, G=255, B=255)
• #000000 = Negro (R=0, G=0, B=0)

Cada par de dígitos hexadecimales representa un canal de color. FF en hexadecimal = 255 en decimal. 00 en hexadecimal = 0 en decimal. Cuando ambos dígitos en un par de canales son idénticos (por ejemplo, #RRGGBB → #RGB), el código HEX se puede acortar a 3 dígitos: #FF6600 → #F60.

HEX con Alfa: El formato de 8 dígitos #RRGGBBAA agrega un canal alfa (opacidad). #FF000080 es 50% rojo transparente. Esto es compatible con todos los navegadores modernos.

Notación de color RGB (rgb() y rgba())

La función CSS rgb() expresa el mismo modelo de color en una notación decimal más legible por humanos:

color: rgb(255, 0, 0);        /* Rojo fijo */
color: rgba(255, 0, 0, 0,5);  /* 50% rojo transparente */

El valor alfa en rgba() varía de 0 (completamente transparente) a 1 (completamente opaco). En CSS moderno, la sintaxis rgb(255 0 0 / 50%) también es válida y fusiona rgb() y rgba() en una sola función.

Cuándo preferir RGB a HEX: use rgb() cuando necesite manipular dinámicamente los valores del canal de color en JavaScript o cuando esté creando colores a partir de propiedades personalizadas de CSS con funciones calc().

Notación de color HSL (hsl() y hsla())

HSL significa Tono, Saturación, Luminosidad. Es una representación cilíndrica del modelo de color RGB que se asemeja mucho más a cómo los humanos perciben y describen el color:

color: hsl(0, 100%, 50%);       /*Rojo puro*/
color: hsl(120, 100%, 50%);     /*Verde puro*/
color: hsl(240, 100%, 50%);     /*Azul puro*/
color: hsl(0, 100%, 50%, 0,5);  /* 50% rojo transparente */

• Tono (0–360°): el ángulo de color en la rueda de colores. 0° y 360° son rojos, 120° son verdes y 240° son azules.
• Saturación (0 %–100 %): qué tan vibrante o "colorido" es el color. 0% es completamente gris; 100% es la versión más vívida del tono.
• Luminosidad (0 %–100 %): qué tan claro u oscuro es el color. 0% es siempre negro; El 100% es siempre blanco; El 50 % es el color de tono "puro".

Por qué HSL es potente para los sistemas de diseño

HSL es el formato preferido para sistemas de diseño y bibliotecas de componentes porque hace que la manipulación del color sea intuitiva:

• Para crear un tono más claro: aumente el valor de Luminosidad (hsl(220, 80%, 60%) → hsl(220, 80%, 80%))
• Para crear un tono más oscuro: disminuya el valor de Luminosidad
• Para desaturar (hacer más silenciado): disminuya el valor de saturación
• Para crear un color complementario: agregue 180° al valor de Tono

Esto es imposible de hacer de forma intuitiva con valores HEX o RGB. Las propiedades personalizadas de CSS y HSL juntas son la base de los sistemas de diseño modernos compatibles con el modo oscuro.

Propiedades personalizadas de CSS (variables)

El patrón moderno más potente combina HSL con propiedades personalizadas de CSS para crear sistemas de diseño totalmente temáticos:

:raíz {
--color-primario-h: 220;
--color-primario-s: 80%;
--color-primario-l: 55%;
--color-primario: hsl(
var(--color-primario-h),
var(--color-primario-s),
var(--color-primario-l)
);
}

Este patrón le permite generar mediante programación paletas de colores completas (tonos claros/oscuros) a partir de un único valor de tono, lo que hace que el modo oscuro sea trivialmente sencillo de implementar.

Utilice nuestro selector y convertidor de color gratuitos para traducir entre formatos variables HEX, RGB, HSL y CSS al instante, perfecto para diseñadores, desarrolladores y cualquiera que trabaje con colores web.