4 formas de definir colores en CSS

Conclusiones clave

• Uso de nombres de colores: CSS proporciona 145 nombres de colores para una selección de colores fácil y amigable para principiantes, pero las opciones son limitadas y es posible que no satisfagan necesidades de diseño precisas.
• Códigos de colores hexadecimales: los códigos hexadecimales ofrecen una amplia gama de opciones de color y una personalización precisa, aunque pueden ser menos intuitivos de usar y recordar.
• Valores de color RGB y RGBA: RGB permite un control preciso del color con valores numéricos, mientras que RGBA agrega transparencia. Es importante garantizar combinaciones de colores accesibles.

Los colores se encuentran entre los atributos CSS más utilizados y desempeñan un papel vital en la configuración de la identidad visual, el estado de ánimo y la experiencia del usuario de un sitio web. CSS ofrece una variedad de opciones para usar el color, cada una adaptada a las necesidades y preferencias de diseño específicas.

Si bien es fácil pasar por alto la importancia de la definición del color, sus elecciones pueden afectar significativamente la apariencia de su sitio web. Explorar las diferencias entre varios métodos y cómo aplicarlos y combinarlos de manera práctica mejorará su capacidad para crear sitios web visualmente atractivos.

1. Usar nombres de colores

CSS proporciona una forma práctica de definir colores mediante nombres y hay 145 opciones disponibles. Estos nombres de colores van desde simples "rojo", "verde" y "azul" hasta tonos más específicos como "coral" o "lavanda".

Usar colores con nombre es sencillo: selecciona un nombre de color como "rojo" y lo usa en una propiedad CSS que admite valores de color. Semejante Las propiedades incluyen lo obvio. color y color de fondo, pero también color del borde, color de contorno, y sombra de texto, entre otros.

Los nombres de colores son útiles cuando necesita un color temporal para crear prototipos o desea que su código sea fácil de leer. Aquí está la sintaxis:

color_property: color_name;

En este caso, simplemente reemplace nombre_color con el color específico que deseas utilizar. Por ejemplo, si desea configurar el texto color de un párrafo a rojo, escribir:

p {
color: red;
}

Esto le dará a tus párrafos un color de texto rojo:

Ventajas: Son fáciles de leer y comprender en su código CSS. Son aptos para principiantes, funcionan bien en todos los navegadores y son útiles para ideas de diseño rápidas.

Contras: Tienen opciones limitadas y es posible que no ofrezcan los tonos precisos que necesita, lo que limita la creatividad del diseño. Además, es posible que no siempre cumplan con requisitos estrictos de accesibilidad y el soporte en sistemas más antiguos puede variar.

2. Códigos de colores hexadecimales

Los códigos de color hexadecimales, a menudo denominados "códigos hexadecimales", son los métodos más comunes para especificar colores en el diseño web. Estos códigos constan de combinaciones de seis caracteres de números y letras (0-9, A-F), que representan la mezcla de componentes rojo, verde y azul (RGB) en un color.

Si bien son fáciles de usar, comprender cómo funcionan puede resultar un desafío. Puedes tomar una inmersión profunda en códigos hexadecimales para entender mejor. A continuación se muestra un ejemplo básico de cómo se pueden utilizar códigos hexadecimales en CSS:

color: #RRGGBB;

En este formato, RR, GG y BB representan los componentes rojo, verde y azul, respectivamente. Cada componente puede variar desde 00 (sin intensidad) hasta FF (intensidad máxima). Por ejemplo, si desea establecer el color de fondo del encabezado de un sitio web en un tono de azul específico, puede usar un código hexadecimal como este:

header {
background-color: #336699;
}

Esto producirá un color azul intenso:

​​​​​

También puedes utilizar una taquigrafía si cada uno de los tres componentes repite el mismo carácter dos veces. Puedes escribir el ejemplo anterior como:

header {
background-color: #369;
}

Ventajas: Los códigos de color hexadecimales brindan una amplia gama de opciones de color, lo que le permite generar tonos detallados y personalizados. Ofrecen un control fluido sobre las opciones de color, lo que los hace ideales para requisitos de diseño complejos.

Contras: Aunque los códigos hexadecimales son potentes, pueden ser menos intuitivos que los colores con nombre. También puede encontrarse con el desafío de recordar valores de color específicos. Afortunadamente, Herramientas para encontrar los códigos hexadecimales de colores. que encuentres están disponibles, lo que hace que el proceso sea más manejable.

3. Valores de color RGB y RGBA

Al igual que los códigos hexadecimales, este formato le permite especificar colores según sus componentes rojo, verde y azul. Esta vez, sin embargo, puedes utilizar números enteros más amigables.

Valores de color RGB

Los valores de color RGB son el segundo método más utilizado para definir colores en CSS. “RGB” representa rojo, verde y azul, expresado como una función CSS seguida de paréntesis. Dentro del paréntesis, asigna valores a cada canal de color, que van de 0 a 255. Esto te permite controlar la intensidad del rojo, verde y azul en el color que deseas usar.

Aquí está la sintaxis:

rgb(red_value, green_value, blue_value);

Reemplazar valor_rojo, valor_verde, y valor_azul con sus respectivos valores numéricos. Por ejemplo, puedes conseguir colores blanco, negro y rojo como los que se muestran en esta imagen:

Cuando configura los tres canales de color (rojo, verde y azul) en su valor máximo de 255, se obtiene la intensidad más alta para cada canal, creando el color blanco:

.white-box {
 color: rgb(255, 255, 255);
}

Cuando configura los tres canales de color en su valor mínimo de 0, representa la ausencia de color en cada canal, lo que resulta en negro.

.black-box {
color: rgb(0, 0, 0);
}

Configurar el canal rojo en su valor máximo de 255, mientras se mantienen los otros canales en su valor mínimo de 0, produce el color rojo:

.red-box {
color: rgb(255, 0, 0); 
}

Valores de color RGBA

RGBA funciona de la misma manera que RGB, la única diferencia es la inclusión de un valor alfa. La "A" en RGBA significa alfa, que determina el nivel de transparencia u opacidad del color elegido. Un valor de 0 representa transparencia total, lo que hace que el color sea completamente invisible, mientras que un valor de 1 representa opacidad total, lo que hace que el color sea completamente visible.

RGBA es especialmente útil cuando desea crear elementos con distintos niveles de transparencia, como fondos translúcidos o texto descolorido. La sintaxis completa es:

color: rgba(red_value, green_value, blue_value, alpha_value);

Aquí, valor_rojo, valor_verde, y valor_azul representar los canales de color como en RGB, y valor_alfa especifica el nivel de transparencia.

div {
background-color: rgba(0, 128, 0, 0.5);
}

En este ejemplo, el valor alfa de 0,5 asigna un 50 % de transparencia al color verde, lo que permite que se muestre el contenido que hay debajo:

Ventajas: RGB y RGBA le permiten controlar los colores con precisión, lo que facilita la elección de tonos precisos y la creación de diseños visualmente atractivos. Son compatibles con varios navegadores web, lo que garantiza que los colores elegidos luzcan consistentes.

Contras: El desafío consiste en garantizar combinaciones de colores accesibles. Es fundamental prestar atención a las relaciones de contraste, principalmente cuando se trabaja con transparencia en RGBA. Las directrices WCAG pueden ayudar usted se asegura de que su diseño sea accesible.

4. Valores de color HSL y HSLA

HSL (abreviatura de Tono, Saturación y Luminosidad) es otra función CSS que define los colores. Al igual que RGB, HSL utiliza valores numéricos para representar colores, pero lo hace de manera diferente. Puede que estés familiarizado con Valores HSL de componentes de UI en aplicaciones de diseño y en otros lugares.

Matiz: Representa el color en sí usando grados en una rueda de colores, que van de 0 a 360. Imagínelo como seleccionar un punto en un círculo, donde cada grado corresponde a un color diferente. Por ejemplo, 0 y 360 grados para el rojo, 120 grados para el verde y 240 grados para el azul.

Saturación: La saturación determina la viveza o intensidad del color. Define la relación del color con el gris, siendo el 0% completamente en escala de grises (dessaturado) y el 100% completamente saturado (vibrante y puro).

Ligereza: La luminosidad representa qué tan brillante u oscuro aparece el color. Está relacionado con la posición del color en el espectro entre el negro (0%) y el blanco (100%). Un valor del 50% representa el color normal, mientras que los valores inferiores al 50% oscurecen el color y los valores superiores al 50% lo aclaran.

Además de HSL, existe HSLA, donde la "A" significa "alfa". Esto es similar a la "A" en RGBA y significa transparencia.

Aquí está la sintaxis:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Usando esta sintaxis, reemplace valor_tono, porcentaje_saturación, y porcentaje_luminosidad con los valores específicos que desea para cada componente. Por ejemplo:

div {
background-color: hsl(120, 100%, 50%);
}

En este ejemplo, el color de fondo de un div El elemento se establece en un verde vibrante usando valores HSL. El 120 representa el tono (verde), el 100% es para una saturación total y el 50% establece la luminosidad a un nivel equilibrado.

Ventajas: HSL y HSLA ofrecen cálculos de color versátiles utilizando propiedades personalizadas de CSS. Son altamente compatibles con los navegadores modernos y permiten ajustes sencillos en la luminosidad del color.

Contras: Aprender HSL implica entender la ciencia del color, como tonos y saturaciones, que pueden ser más desafiantes que los familiares colores RGB.

Aprovechando el poder de los colores CSS

Hay más métodos que puedes comprobar y mientras exploras los diferentes formatos para definir colores En CSS, tenga en cuenta que usted tiene el poder de dar forma a la apariencia, el estado de ánimo y la experiencia del usuario de su sitio web.

Su elección de formato de color (ya sean nombres de colores simples, códigos hexadecimales, RGB o HSL) puede afectar la forma en que su audiencia percibe su sitio. Experimente, aprenda y encuentre las definiciones de color que mejor se adapten a sus objetivos de diseño.