El color es una parte esencial para el diseño de páginas web. Puede influir en las acciones que los visitantes ejecutan dentro de una página, el modo en el que leen tus contenidos y, sobre todo, cómo se sienten al navegar en tu página.
![<< [Plantilla gratuita] >> Plantillas de códigos de programación para CSS](https://no-cache.hubspot.com/cta/default/53/8cbe9b74-0404-40c9-b34f-cbee306c4f8e.png){kind=small}
A pesar de que el uso del color con estos fines requiere práctica y un buen dominio de la teoría del color, añadirlo al diseño de un sitio web no es tan complicado, gracias a las propiedades de color y fondo de CSS.
Existen muchas formas de trabajar con estas propiedades. Para cambiar el color de tus textos o del fondo de tu sitio puedes utilizar nombres de color en HTML, códigos de color hex o RGB o valores de color HSL. Revisemos cómo hacerlo con cada uno de los métodos.
¿Cómo poner colores HTML con CSS?
Utilizar colores en HTML es uno de los métodos más sencillos para añadir color en CSS. Esto se debe a que los colores en HTML están representados con nombres en lugar de números.
Actualmente se encuentran disponibles 140 nombres de color que pueden soportar los navegadores existentes. Anaranjado (orange), dorado (gold), cian (cyan), granate (maroon) y azul cielo (skyblue) son algunos ejemplos de este listado. En este sitio puedes encontrar la lista completa de colores disponibles en HTML.
Veamos un ejemplo. Supongamos que quieres cambiar el color de un párrafo de texto a rojo. Primero, deberás utilizar un selector CSS para hacer un llamado al párrafo y definir la propiedad de color en HTML con el nombre red (rojo).
Así deberá lucir tu código en CSS:
Este será nuestro código en 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>
Este es el resultado que obtendremos:
Suena sencillo ¿no es así?
A pesar de que este método es bastante simple, la utilización de nombres de color en HTML no es muy recomendable. Existen colores fáciles de recordar, como el rojo (red), el amarillo (yellow) o el azul marino (blue navy), pero ¿podrías memorizar cien nombres más como oldlace o mocassin, así como el color al que hacen referencia?
Además, aunque 140 es un número bastante alto de colores a memorizar, es un número muy pequeño cuando consideramos la gama de colores disponibles en el espectro cromático. Utilizar nombres de color en HTML limita las combinaciones de color posibles y la capacidad que tendrás de crear paletas de color específicas para tu sitio web.
Por último, utilizar nombres de color en HTML puede llevarte a imprecisiones o malentendidos. Por ejemplo, lo que tú ves como color marfil puede parecer blanco para otras personas. Pero para evitar este tipo de imprecisiones puedes emplear códigos de color en lugar de nombres. Veamos algunos de los formatos más populares para llevar esto a cabo.
Códigos de color Hex en CSS
Los códigos de color Hex (o hexadecimales) se componen de un signo # y tres pares de caracteres que representan la intensidad de los tres colores primarios (rojo, verde y azul en ese orden). Los valores pueden ir desde 00 (que es la menor intensidad para cada color primario) hasta FF (que es la intensidad más alta).
Cada código de color Hex consiste en seis caracteres en total. Estos pueden ser cualquier combinación de los diez números del 0 al 9 y de seis letras que van de la a a la f. Esto significa que existen 16.777.216 de combinaciones posibles en total. Veamos algunas de ellas.
Para crear el color blanco deberás mezclar cada uno de los colores primarios a su máxima intensidad. Esto significa que el código de color Hex para el blanco es #FFFFFF. Debido a que el negro es la ausencia de color, su código Hex es #000000. Para crear el color azul deberás definir la mayor intensidad en el azul y la menor en los otros dos colores primarios. Por el contrario, el código de color hex del rojo es #FF0000.
El siguiente diagrama te ayudará a visibilizar el color de algunos códigos Hex.
Obviamente nadie espera que memorices 16 millones de códigos de color. Para ayudarte a encontrar la tonalidad exacta que buscas existen herramientas online como HTML Color Codes’ Color Picker. Con ella podrás navegar a lo largo de las gamas de color y seleccionar la que más te guste. El siguiente demo te ayudará a entender cómo puedes buscar colores con esta plataforma.
Supongamos que quieres cambiar el color de fondo de tu página a la tonalidad azul del demo. Para hacerlo deberás incluir un selector CSS para hacer un llamado al elemento que quieres modificar y definir los valores de tu propiedad de color de fondo (background-color). En este caso utilizarás el código #69EAFF.
Este será el código en CSS:
Y así lucirá nuestro código en 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>
Este será el resultado:
Código de color RGB en CSS
El RGB es otro modelo de color que se basa en la combinación de los colores primarios. La «R» hace referencia al color rojo (Red), «G» al color verde (Green) y «B» al color azul (Blue). Los códigos de color RGB están compuestos por tres números separados por comas. Cada uno representa la intensidad de los colores primarios mediante un número entero en la escala del 0 al 255. Estos números deben ir entre paréntesis y estar precedidos por «rgb» en minúsculas.
Por ejemplo, #000000 es negro, #ff0000 es rojo y #0000ff es azul.
El mayor beneficio de utilizar códigos de color RGB es que no solamente puedes controlar el color del elemento en cuestión, sino también modificar su opacidad. Para hacerlo, simplemente deberás añadir una «a» al prefijo rgb (rgba) y un cuarto valor dentro del paréntesis. Este último puede ir del 0 al 1 y servirá para definir la transparencia del color. El 0 hace al elemento completamente transparente, mientras que el 1 lo hace completamente opaco. Por su parte, el valor 0.5 hará que el color tenga un 50 % de opacidad.
Supongamos que quieres cambiar el color de fondo de un título y de un párrafo de tu página web. Quieres que ambos elementos tengan el mismo color de fondo. Sin embargo, para asegurarte de que el titular sea más llamativo, te gustaría que el fondo sea 30 % más opaco que el del párrafo.
Así deberá verse tu código en CSS:
Y así lucirá nuestro código en 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>
Este será el resultado:
Valores de color HSL en CSS
Si quisieras controlar el matiz, la saturación o la luminosidad de tu color y, al mismo tiempo, su transparencia puedes emplear el sistema de color HSL.
HSL tiene un formato similar al del código de color RGB. Está compuesto por tres números enteros separados por comas. Estos números también deben ir entre paréntesis, pero precedidos por «hsl» en minúsculas. Así como con los códigos RGB, puedes añadir una «a» a «hsl» y un cuarto valor que deberá ser un número entre 0 y 1 para asignar la transparencia del color.
La principal diferencia entre HSL y RGB radica en que los valores del primer sistema no representan la intensidad de cada color primario. Por el contrario, los valores representan el matiz (Hue), la saturación (Saturation) y la luminosidad (Lightness). El matiz se mide en una escala que va del 0 al 360; estos dos extremos representan el color rojo, 120 el color verde y 240 el color azul. La saturación y la luminosidad se miden en porcentajes que van del 0 al 100. Una saturación del 0 % corresponde a una tonalidad de gris, mientras que 100 % al color en su mayor intensidad. Una luminosidad de 0 % es negro y una del 100 % es blanco.
Supongamos que quieres cambiar a diferentes tonalidades de rojo los títulos en una página de tu sitio web. Para lograrlo puedes utilizar el mismo valor de matiz: 0. Solamente deberás cambiar los valores de saturación e intensidad. Para el último título podemos incluso incluir un cuarto valor que lo haga transparente.
Así se verá tu código en CSS:
Nuestro código en HTML lucirá así:
<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>
Y este será el resultado final:
Gradientes de color en CSS
Hasta ahora únicamente hemos abordado algunas formas para hacer que un elemento o un fondo tengan un color, pero tal vez quieras utilizar gradientes en tus páginas. Los gradientes permiten crear cambios graduales entre colores o tonalidades en un sentido definido (de arriba abajo, de derecha a izquierda o diagonalmente).
Para crear un gradiente deberías especificar al menos dos colores a utilizar, pero puedes usar cuantos quieras.
Supongamos que quieres crear un gradiente de arcoíris que vaya de izquierda a derecha. Lo primero que deberás hacer es crear un bloque en tu código HTML. No es necesario que escribas algo dentro de este elemento. Puedes dejarlo vacío y continuar con tu edición en CSS.
Para crear el efecto de gradiente usa la propiedad abreviada «background» en CSS y establece la propiedad como «linear-gradient» (que significa gradiente lineal). En este punto puedes incluir los colores que quieras dentro del paréntesis. Para establecerlos puedes emplear nombres de color HTML, códigos de color Hex, RGB o valores de color HSL. En nuestro ejemplo utilizaremos cinco colores con diferentes formatos.
Este es el código en CSS:
Así puedes configurar tu código en 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>
Y este será nuestro resultado:
Puedes aprender más sobre gradientes de color en nuestro artículo Cómo poner un color de fondo en HTML.
Añadir color con Bootstrap en CSS
Los ejemplos que te hemos presentado funcionan cuando estás construyendo tu sitio web desde cero. Pero ¿qué pasa si ya estás utilizando Bootstrap para CSS en tu proyecto?
Las herramientas para CSS de Bootstrap proveen plantillas prediseñadas y componentes que te permiten crear disposiciones visuales con elementos de diseño únicos, como barras de navegación, botones o formularios, sin tener que construirlas de cero.
Pero para crear un sitio web realmente auténtico que comunique tu identidad de marca no solo debes copiar y pegar estos trozos de código preexistente. Lo que deberás hacer es añadir tu propio código CSS para ir más allá de las plantillas predefinidas de Bootstrap en CSS.
Por ejemplo, supongamos que quieres añadir un botón de acción en tu sitio. Lo que puedes hacer es utilizar uno de los nueve modificadores de clase predeterminados de Bootstrap, que automáticamente creará un botón con esquinas redondeadas y con un color de fondo y un texto predefinidos. Por ejemplo, la clase .btn-danger creará un botón rojo con texto en color blanco, mientras que .btn-warning generará un botón amarillo con texto en color negro. Aquí puedes ver todas las opciones de estilos predeterminados de botón.
Supongamos que te gustan los tamaños y formas de estos botones, pero ninguna de las combinaciones de color se adecua a la paleta de color de tu sitio. En este caso podrás utilizar el botón de Bootstrap sin la clase modificadora. Lo que deberás hacer es aplicar el color de fondo y de texto en tu propia hoja de estilo utilizando propiedades CSS y alguno de los valores que hemos abordado en este artículo.
En nuestro ejemplo añadiremos un botón con la clase .btn en HTML. Este elemento deberá estar contenido en un bloque div con la clase .container para que el relleno se añada en todos sus lados.
Posteriormente, utilizando un selector de clase, definiremos los valores de las propiedades color y background-color con el respectivo código Hex para blanco (#FFFFFF) y con uno para turquesa (#5FBC9F) en CSS.
Este será nuestro código en CSS:
Así lucirá en HTML:
Y este es el resultado final:
Puedes seguir el mismo proceso para ir más allá de los estilos predeterminados de cualquier otro elemento en Bootstrap, como las barras de navegación, tablas o cuadrículas, entre otros.
Añadir color con CSS
En CSS puedes cambiar el color de los textos y fondos de tu sitio web, así como diferentes elementos dentro de sus páginas. Para hacerlo únicamente necesitas estar familiarizado con los nombres de color y los códigos que hemos revisado.
Según sea el código que utilices puedes explorar las posibilidades de emplear colores sólidos o bien mezclar tonalidades y jugar con su transparencia, saturación, luminosidad y matiz. Para terminar, te compartimos algunos elementos esenciales de diseño gráfico que pueden ayudarte a crear un sitio web realmente personalizado y único.
