Conceptos básicos de CSS: trabajar con colores

Hay muchos factores a considerar al diseñar un sitio web; font, UX flow y mucho más. Un elemento de diseño muy importante es el color. Incluso decisiones simples como el color de la marca, el color del borde y el color de fondo generan un impacto definido y notable.

En este artículo, cubriremos los fundamentos de los colores CSS y aprenderemos cómo transformar un sitio HTML en un sitio web de apariencia impecable.

Introducción a los colores CSS

Hay una cierta forma de describir los colores en CSS que una computadora puede entender. Por lo general, se hace dividiendo el color en varios componentes, calculando un conjunto mixto de colores primarios para formar el color deseado. Hay varias formas diferentes de describir un color en CSS.

Usar nombres de colores como palabras clave

Hay aproximadamente 140 nombres de colores CSS que admiten la mayoría de los navegadores modernos. Podría ser tan simple como rojo o cian para la palabra clave color. Aunque ayuda con una gama moderada de colores, está limitado a unos pocos colores establecidos sin control de sombras y tintes. Aquí es donde deberá saltar a la gama más alta de opciones de color CSS.

/*Syntax*/
color rojo;
color: carmesí;
color: azul pizarra;

Usar valores RGB

Al diseñar un sitio web o una aplicación, el esquema de colores importa mucho, definitivamente no debería ser lo último que considere. En CSS, puede utilizar tres métodos para representar un color RGB. Estos son notación de cadena hexadecimal, notación funcional RGB y notación funcional HSL. He aquí un vistazo más de cerca a cada uno de ellos.

Notación de cadena hexadecimal

La notación de cadena hexadecimal siempre comienza con el carácter #. Después de este carácter, especifica los colores utilizando dígitos hexadecimales de un código de color específico. La cadena no distingue entre mayúsculas y minúsculas, pero es convencional usar minúsculas. A continuación, se muestran algunos casos de uso:

#rrggbb

Es la forma más común de describir un color numérico. Es un color completamente opaco con componentes rojo, verde y azul como 0xrr, 0xgg, y 0xbb respectivamente.

#rrggbbaa

Sigue los criterios RGB descritos anteriormente con un canal alfa que maneja la transparencia del color. Cuanto menor sea el 0xaa valor es, más translúcido se vuelve el color.

#rgb

Si tienes color #556677, simplemente puede escribirlo como #567 ya que representa 0xrr, 0xgg, y 0xbb respectivamente. Por ejemplo, #000 (o #000000) es negro mientras #fff (o #ffffff) es blanco.

#rgba

Sigue los criterios anteriores con un canal alfa especificado por 0xaa para controlar la opacidad.

Notación funcional RGB

La notación funcional RGB representa colores utilizando componentes rojo, verde y azul. Se define usando el función rgb () que acepta parámetros de entrada en forma de componentes primarios rojo, verde y azul (y un canal alfa opcional). Los valores rojo, verde y azul deben ser un número entero entre 0 para 255 (inclusive), o un porcentaje que varía de 0% a 100%. Por otro lado, el canal alfa acepta valores de 0.0 (completamente transparente) a 1.0 (completamente opaco). También acepta valores porcentuales de 0% (igual que 0.0) y 100% (igual que 1.0).

/*Syntax*/
color: rgb (rr, gg, bb);
color: rgba (rr, gg, bb, a);

Notación funcional HSL

La notación funcional HSL representa el color mediante el tono, la saturación y la luminosidad. Es muy similar al rgb () función en términos de uso. Tu puedes fácilmente encuentra el valor hexadecimal de cualquier color en la pantalla de su computadora. En este método de color, el tono define el color real de acuerdo con la posición en la rueda de colores. La saturación es el porcentaje de gris con el máximo tono posible. La luminosidad cambia el color de su apariencia más oscura a la más brillante posible a medida que aumenta.

El valor de tono (H) lo especifica la unidad de ángulo admitida en CSS. Incluye grados, rad, graduado, y girar. Saturación (S) especifica el porcentaje del color final compuesto por tono. El componente de luminosidad (L) define el nivel de gris.

/*Syntax*/
color: hsl (XXdeg, XX%, XX%);
color: hsl (XXturn, XX%, XX%);

Aplicar colores a elementos HTML

En CSS, el color La propiedad define el color de primer plano del contenido y color de fondo define el color de fondo del contenido estructurado por HTML. Cuando se renderiza un elemento, puede usar las propiedades de color para darle estilo.

Propiedad de color para textos

los color La propiedad se utiliza al dibujar texto y cuando necesita cualquier tipo de decoración de texto. Puedes usar el color-decoracion-texto propiedad para representar subrayados, sobrelíneas o líneas de tachado de diferentes colores. Puede cambiar el color de fondo del texto con el color de fondo propiedad. Puede aplicar un efecto de sombra en el texto usando el sombra de texto propiedad. Puedes elegir color de énfasis de texto mientras dibuja símbolos de énfasis en los campos de texto.

Propiedad de color para cajas

Como sabes, todo en una página web sigue el modelo de caja. Por lo tanto, cada elemento es un cuadro con algún tipo de contenido y área de margen, borde y relleno opcional. Puedes usar el color de fondo propiedad cuando no hay contenido en primer plano. Cuando dibuja una línea para separar las columnas de un texto, puede usar el color-regla-columna propiedad para ello. Hay un color de contorno propiedad para colorear el contorno. Tenga en cuenta que un contorno es diferente del borde: actúa como un indicador de enfoque.

Propiedad de color para bordes

Cualquier elemento HTML puede tener un borde. Puede configurar el color del borde propiedad como borde-color-superior, color del borde derecho, color del borde inferior, y color de borde izquierdo para establecer el color del borde de los lados correspondientes. Sin embargo, usar la propiedad de taquigrafía es una buena práctica.

los border-inline-start-color La propiedad le permite colorear los bordes del borde más cercanos al principio. Por otro lado, el border-inline-end-color La propiedad le permite colorear el final del inicio de las líneas de texto dentro de un cuadro. Aunque varía dependiendo de su modo de escritura, orientación del texto, y dirección.

Conclusión: color y accesibilidad

Aunque un sitio web con un hermoso diseño se ve muy afectado por el color utilizado, siempre debe asegurarse de que sea accesible. El uso inadecuado del color puede resultar en la pérdida de tráfico significativo en su sitio web.

El uso de notaciones de cadenas hexadecimales, nombres de colores o valores RGB depende completamente de usted. Solo asegúrate de usar colores para fortalecer el texto existente y haz que siga una jerarquía visual determinada. Aprender más sobre la teoría del color y crear su propia paleta es una idea excelente si es un desarrollador web en ciernes. ¡Hasta entonces, codificación alegre y colorida!

Cómo utilizar la teoría del color para mejorar sus proyectos creativos

Al usar los colores correctos de la manera correcta, puede llevar sus proyectos creativos a un nivel completamente nuevo.

Leer siguiente

Sobre el Autor