El color es una parte esencial del diseño de un sitio web. Puede afectar en qué hacen clic los usuarios, cómo leen el texto y cómo se sienten mientras navegan por su sitio.
Si bien el uso efectivo del color requiere práctica y conocimiento de la teoría del color, agregarlo a su sitio web es fácil gracias a las propiedades de color y color de fondo de CSS.
Hay varias formas de definir estas propiedades. Puede usar nombres de color HTML, códigos de color hexadecimales, códigos de color RGB o valores de color HSL para cambiar el color del texto o el color de fondo de una página web. Echemos un vistazo más de cerca a estos diferentes métodos a continuación.
Colores HTML en CSS
El uso de colores HTML es uno de los métodos más fáciles de agregar colores en CSS. Esto se debe a que los colores HTML se representan como nombres de color, no como una serie de números.
Actualmente, los navegadores modernos admiten 140 nombres de colores. Naranja, dorado, azul cielo, granate y azul cielo son solo algunos ejemplos. Puedes encontrar lista completa aquí.
Veamos un ejemplo. Suponga que desea hacer que un párrafo de texto sea rojo. Utilice el selector de CSS para seleccionar un párrafo y definir una propiedad de color con el nombre de color HTML «rojo».
Aquí está el CSS:
p {color: red;
}
Aquí está el código HTML:
<h2>Using HTML Color Names in CSS</h2><p>To change the color of this paragraph to red, define the CSS color property with the HTML color name "red."</p>
Aquí está el resultado:
Parece bastante fácil, ¿verdad?
Sin embargo, no se recomienda el uso de nombres de color HTML. Primero, son difíciles de recordar más allá del arcoíris estándar. Sí, el rojo, el amarillo y el azul marino son fáciles de recordar, pero ¿qué pasa con OldLace? ¿Mocasín? ¿Más de 100 más?
En segundo lugar, si bien 140 nombres de colores son muchos para recordar, es un número pequeño si se considera cuántos colores, matices y matices hay en el mundo. Por lo tanto, el uso de nombres de colores HTML limitará las combinaciones de colores y la capacidad de crear el esquema de colores de su sitio web.
Finalmente, y lo más importante, los nombres de colores HTML introducen imprecisión. Tu marfil podría ser el blanco de otra persona, que podría ser el caparazón de otra persona, y así sucesivamente.
Para evitar esta imprecisión en Internet, puede utilizar códigos de colores en lugar de nombres. Echemos un vistazo a los formatos más populares a continuación.
Códigos de color hexadecimales en CSS
Los códigos de color hexadecimales consisten en un hashtag y tres pares de caracteres que representan la intensidad de los tres colores primarios (rojo, verde y azul). Los valores posibles van desde 00 (menor intensidad del color base) hasta FF (mayor intensidad del color base).
Cada código hexadecimal tiene un total de seis caracteres. Los seis caracteres pueden ser cualquier combinación de los diez números (0-9) y las seis letras (af). Esto significa que hay un total de 16.777.216 combinaciones posibles. Veamos algunas combinaciones a continuación.
Para crear el blanco, debe mezclar cada uno de los tres colores primarios con la máxima intensidad. Esto significa que el código hexadecimal blanco es #FFFFFF. Dado que el negro no es un color primario, su código de color hexadecimal es # 000000. Para crear azul, necesita la mayor intensidad de azul y la menor intensidad de los otros dos colores primarios. El código hexadecimal rojo sería, por tanto, #FF0000.
El siguiente diagrama muestra algunos otros códigos de color hexadecimales.
Por supuesto, recordar 16.000 códigos de colores hexadecimales está fuera de discusión. Aquí es donde las herramientas en línea como Selector de color de código de color HTML Adelante. Con esta herramienta puede hacer clic y arrastrar el cursor al «área de selección» a la derecha. Su hexadecimal (así como los valores RGB y HSL) aparecerán en la parte superior. Eche un vistazo a la demostración a continuación.
Veamos un ejemplo. Suponga que desea cambiar el fondo de una página web al tinte azul de arriba. Usarás el selector CSS para indicar el contenido y definir la propiedad background-color con el código de color hexadecimal #69EAFF.
Aquí está el CSS:
body {background-color: #69EAFF;
}
Aquí está el código HTML:
<h2>Using Hex Color Codes in CSS</h2><p>To change the background color of this page to a shade of blue, define the CSS color property with the hex color code #69EAFF.</p>
Aquí está el resultado:
Códigos de color RGB en CSS
RGB es otro modelo de color basado en una combinación de colores primarios, de ahí la abreviatura de Reducar, GRAMO.reen, Bazul. Los códigos de color RBG se componen de tres números separados por comas. Cada número representa la intensidad del color base correspondiente como un número entero entre 0 y 255. Estos números se colocan entre paréntesis y van precedidos por una letra «rgb» minúscula.
Entonces rgb (0, 0, 0) es negro, rgb (255, 0, 0) es rojo y rgb (0, 0, 255) es azul.
La principal ventaja de usar códigos de color RGB es que no solo puede controlar el color de un elemento, sino también controlar la opacidad de ese color. Para hacer esto, solo agregue una «a» al prefijo rgb () y el cuarto valor entre paréntesis. En el rango de 0 a 1, este valor determina la transparencia del color. 0 es completamente transparente y 1 es completamente opaco. Entonces, un valor de 0.5 reflejará el color con una opacidad del 50%.
Veamos un ejemplo. Suponga que desea cambiar el color de fondo del encabezado y el párrafo de la página. Desea que ambos elementos tengan el mismo color de fondo. Sin embargo, para que el título sea más llamativo, establezca el color de fondo del párrafo en un 30 % de opacidad.
Aquí está el CSS:
h2 {background-color: rgb(150,100,255);
}
p {
background-color: rgba(150,100,255,.3);
}
Aquí está el código HTML:
<h2>Using RGB Color Codes in CSS</h2><p>To change the background color of this page to a shade of blue, define the CSS color property with the hex color code #69EAFF.</p>
Aquí está el resultado:
Valores de color HSL en CSS
Si desea controlar el tono, la saturación y el brillo, así como la transparencia de un color, puede utilizar el sistema de color HSL.
HSL tiene un formato similar a los códigos de color RGB. Consta de tres números separados por comas. Luego, estos números se colocan entre paréntesis y están precedidos por una «hsl» minúscula. También puede agregar «a» a «hsl» y un cuarto valor entre 0 y 1 entre paréntesis para establecer la transparencia del color.
Sin embargo, a diferencia de los códigos de color RGB, los tres primeros números de los valores de color HSL no representan la intensidad del color base correspondiente. En cambio, estos tres números representan el tono, la saturación y la luminosidad. El tono se mide en grados en una escala de 0 a 360. Establecer el tono en 0 o 360 es rojo, 120 es verde y 240 es azul. La saturación y el brillo se miden como un porcentaje en una escala de 0 a 100. La saturación establecida en 0 % es una sombra de gris y 100 % es un color completo. El brillo establecido en 0% es negro y el 100% es blanco.
Veamos un ejemplo. Suponga que desea cambiar los títulos de una página a diferentes tonos de rojo. Luego puede usar el mismo valor de matiz, 0, y simplemente cambiar los valores de saturación y brillo. También podemos agregar un cuarto valor al último encabezado para hacerlo transparente.
Aquí está el CSS:
h2 {color:hsl(0,100%,50%);
}
h3 {
color:hsl(0,100%,75%);
}
h4 {
color:hsl(0,100%,25%);
}
h5 {
color:hsla(0,60%,70%, .5);
}
Aquí está el código HTML:
<h1>Using HSL Color Values in CSS</h1><p>To change the hue, saturation, or lightness of an element, define the CSS color property with an HSL value.</p>
<h2>Red</h2>
<h3>Light red</h3>
<h4>Dark red</h4>
<h5>Pastel and transparent red</h5>
Aquí está el resultado:
Gradientes de color en CSS
Acabamos de cubrir cómo puede hacer que el fondo de un elemento o toda la página sea de un color sólido. Pero también puedes hacer un degradado con él. Un degradado muestra cómo uno cambia gradualmente a otro color (o un múltiplo) en una dirección específica, como de arriba a abajo, de izquierda a derecha o en diagonal.
Debe especificar al menos dos grados de color para crear un degradado. Pero no tienes que especificar solo dos. Puede especificar tantos como desee en cualquier formato.
Suponga que desea crear un degradado de arcoíris moviéndose de izquierda a derecha. Primero, crea un div en HTML. No necesita poner nada dentro de un elemento div. Puede dejarlo en blanco y luego diseñarlo con CSS.
Para crear un efecto de degradado, use la propiedad de acceso directo «fondo» en CSS y establezca la propiedad en «gradiente lineal». Luego puede especificar tantas paradas de color como desee entre paréntesis. Puede utilizar cualquier combinación de nombres de color HTML, códigos de color hexadecimales, códigos de color RGB y valores de color HSL. A continuación, utilizaremos cinco paradas de color.
Aquí está el CSS:
div { height: 100px;
background:
linear-gradient(
to right,
rgb(252, 164, 213),
red,
#FACA2E,
green,
hsl(240, 95%, 58%)
);
}
Aquí está el código HTML:
<h1>Creating a Color Gradient in CSS</h1><p>To create a color gradient, use the following CSS:
<p>background-image: linear-gradient(direction, color-stop1, color-stop2, ...);</p>
<div>
</div>
Aquí está el resultado:
Puede obtener más información sobre cómo crear degradados de color de fondo en Cómo agregar y cambiar el color de fondo en HTML.
Añadir color con Bootstrap CSS
Los ejemplos anteriores asumen que está construyendo un sitio desde cero. Pero, ¿qué sucede si está utilizando Bootstrap CSS en su proyecto?
Bootstrap CSS es un conjunto de herramientas de código abierto que incluye plantillas y componentes prediseñados para que pueda crear diseños con elementos de diseño importantes como Navegaciones de arranque, Botones de arranquey formularios sin tener que construirlos desde cero.
Pero para crear un sitio web verdaderamente personalizado que refleje la identidad única de su marca, no puede simplemente copiar y pegar estos fragmentos de código reutilizables. Deberá agregar CSS personalizado en una hoja de estilo externa para reemplazar la hoja de estilo CSS predeterminada de Bootstrap.
Por ejemplo, suponga que desea agregar un botón de llamada a la acción en su sitio. Luego, puede usar una de las nueve clases de modificador de Bootstrap predeterminadas, que crearán automáticamente un botón con bordes redondeados y el texto y el color de fondo especificados. Por ejemplo, la clase .btn-danger hará que el botón sea rojo con letra blanca, mientras que .btn-warning hará que el botón sea amarillo con letra negra, y así sucesivamente. Aquí hay una descripción general de todos los estilos de botones predefinidos.
Supongamos que le gusta el tamaño y los bordes redondeados de estos botones, pero ninguno de los colores forma parte de la combinación de colores de su sitio web. En este caso, querrá usar la clase de botón Bootstrap sin la clase de modificador. Luego, en su propia hoja de estilo, puede aplicar texto y colores de fondo a los botones usando las propiedades y valores de CSS discutidos anteriormente.
En el siguiente ejemplo, agregaremos un elemento de botón con la clase .btn en el código HTML. También envolveremos este botón en un div con clase .container para agregar relleno en todos los lados.
Luego usamos el selector de clase para definir las propiedades de color y color de fondo usando códigos de color hexadecimales para blanco (#FFFFFF) y cian (# 5FBC9F) en CSS.
Aquí está el CSS:
.btn {
color: #FFFFFF;
background-color: #5FBC9F;
}
Aquí está el código HTML:
<div class="container">
<h2>Button defined by CSS color property</h2>
<button type="button" class="btn">Click Me</button>
</div>
Aquí está el resultado:
Puede seguir el mismo proceso para anular el estilo predeterminado de otros elementos de Bootstrap, como barras de navegación, tablas, cuadrículas y más.
Agregar color usando CSS
En CSS, puede cambiar el color del texto y el fondo de su sitio web o varios elementos de la página. Para hacer esto, solo consulte los nombres y códigos de color anteriores. Dependiendo del código utilizado, no solo puedes experimentar con colores sólidos. También puede cambiar la transparencia, el tono, la saturación y el brillo de los colores en su sitio web. Estos conocimientos básicos de diseño web pueden ayudarte a crear un sitio web verdaderamente personalizado.
