Referencia de colores en CSS

Establecer el color del texto usando valores RGB

p {
  color: rgb(255, 0 ,0); /* Rojo */
}

Puedes mezclar diferentes niveles de rojo, verde y azul para crear diferentes colores:

Ejemplos de valores de color RGB en CSS

h1 {
    color: rgb(0 ,128 ,0); /* Verde */
}

.highlight {
    background-color: rgb(255 ,255 ,0); /* Amarillo */
}

a {
    color: rgb(128 ,0 ,128); /* Morado */
}

RGB te permite crear muchos colores cambiando el nivel de cada componente. Esto ofrece más control que usar nombres predefinidos.

CSS también admite valores RGBA (Rojo Verde Azul Alfa) que añaden un componente de opacidad al color. El valor de opacidad va de cero (transparencia total) a uno (opacidad total).

Uso de RGBA para transparencia

div { 
    background-color: rgba(255 ,00 ,00 ,.5); /* Rojo con cincuenta por ciento de opacidad */ 
} 

El uso de RGBA te permite crear colores con transparencia sin afectar la opacidad de todo el elemento. Esto es útil para crear superposiciones y otros efectos donde necesitas controlar la transparencia de colores individuales.

RGB y RGBA son ampliamente compatibles en CSS y te dan una amplia gama de opciones en comparación con los nombres comúnmente utilizados en diseño web.

Configuración del color del texto usando valores HSL

p {
    color: hsl(0, 100%, 50%); /* Rojo */
}

Ejemplos de valores de color HSL en CSS

h1 {
    color: hsl(120, 100%, 50%); /* Verde */
}

.highlight {
    background-color: hsl(60, 100%, 50%); /* Amarillo */
}

a {
    color: hsl(300, 100%, 50%); /* Morado */
}

El modelo HSL te permite crear muchos colores ajustando el tono, la saturación y la luminosidad. Proporciona una forma intuitiva en comparación con los valores hexadecimales o RGB.

Similar a RGBA, CSS también admite valores HSLA (Tono, Saturación, Luminosidad, Alfa) que añaden un componente de opacidad. El valor de opacidad va de cero (totalmente transparente) a uno (totalmente opaco).

Uso de HSLA para transparencia

div {
    background-color: hsla(0, 100%, 50%, 0.5); /* Rojo con cincuenta por ciento de opacidad */
}

El uso de HSLA te permite controlar la transparencia de colores individuales sin afectar la opacidad de todo el elemento. Esto es útil para crear superposiciones translúcidas, gradientes y otros efectos visuales.

HSL y HSLA proporcionan una forma flexible de especificar colores. CSS ofrece un enfoque intuitivo para la selección que permite ajustes fáciles para crear variaciones. HSL es una buena opción cuando quieres crear esquemas basados en un solo tono o necesitas hacer ajustes sutiles a un diseño.

Uso de palabras clave de color en CSS

.overlay {
  background-color: transparent;
}

.button {
  color: blue;
  border: 2px solid currentColor;
}

.child-element {
  color: inherit;
}

.overlay tiene un fondo transparente, permitiendo que el contenido detrás sea visible. Esto es útil para crear superposiciones o elementos semi-transparentes.

.button usa currentColor. El texto es azul y al usar currentColor para border-color, tanto el texto como el borde serán azules. Si cambias el color del texto más tarde, el borde se actualizará automáticamente.

.child-element usa inherit. Toma el color de texto de su padre sin necesidad de una especificación explícita.

Las palabras clave de color proporcionan una forma de aplicar colores basados en significados específicos o relaciones entre elementos. Se pueden usar con otras notaciones como valores hexadecimales, RGB o HSL para un estilo flexible en tu CSS.

Establecer Color de Texto

La propiedad color establece el color del texto de un elemento. Se puede aplicar a cualquier elemento que contenga texto, como párrafos, encabezados, enlaces o elementos span.

p {
  color: blue;
}

h1 {
  color: #ff0000;
}

a {
  color: rgb(0, 128, 0);
}

En estos ejemplos, la propiedad color establece el color del texto de los párrafos a azul, los encabezados a rojo usando un valor hexadecimal, y los enlaces a verde usando un valor RGB.

Establecer Color de Fondo

La propiedad background-color establece el color de fondo de un elemento. Se puede aplicar a cualquier elemento.

div {
  background-color: yellow;
}

.container {
  background-color: #f0f0f0;
}

button {
  background-color: hsla(240, 100%, 50%, 0.8);
}

En estos ejemplos, la propiedad background-color establece el color de fondo de un elemento div a amarillo, una clase container a gris claro usando un valor hexadecimal, y un botón a azul semitransparente usando un valor HSLA.

Establecer Color de Borde

La propiedad border-color establece el color del borde para un elemento. Se puede aplicar si el elemento tiene un borde.

.box {
  border: 2px solid;
  border-color: red;
}

input[type="text"] {
  border:1px solid; 
  border-color:#ccc; 
} 

button { 
  border: 3px solid; 
  border-color: rgb(0, 0, 0); 
} 

En estos ejemplos, la propiedad border-color establece el color del borde para una clase box a rojo, un campo de entrada a gris claro usando un valor hexadecimal, y un botón a negro usando un valor RGB. Estas propiedades de color aceptan varias notaciones de color como nombres de color, valores hexadecimales, RGB, RGBA, HSL y HSLA. Puedes usar estas notaciones según el color que desees aplicar. Al usar estas propiedades de color, puedes controlar el color del texto, el color de fondo y el color del borde de los elementos en tus páginas web, creando diseños visualmente atractivos y consistentes.

Uso de RGBA para la Transparencia del Color

Para aplicar transparencia a un color usando RGBA, utiliza la función rgba():

.overlay {
  background-color: rgba(255, 0, 0, 0.5); /* Rojo con 50% de opacidad */
}

p {
  color: rgba(0, 0, 255, 0.8); /* Azul con 80% de opacidad */
}

• El elemento .overlay tiene un fondo rojo semi-transparente.
• El texto en los párrafos se establece en azul con un valor alfa de .8.

Uso de HSLA para la Transparencia del Color

Similar a RGBA:

.button {
  background-color: hsla(120%,100%,50%, .6); /* Verde con .6 de opacidad */
}

a {
  color: hsla(240%,100%,50%, .9); /* Azul con .9 de opacidad */
}

• El elemento .button tiene un fondo verde semi-transparente.
• Los enlaces tienen un color azul establecido con un valor alfa de .9.

Uso de la Propiedad Opacity

CSS también proporciona la propiedad opacity:

img {
  opacity: .5; /* Hace que la imagen sea semi-opaca */
}

.container { 
  opacity: .8; /* Hace que el contenedor sea mayormente opaco */ 
}

• Una imagen se vuelve semi-opaca al establecer su opacity.
• Un elemento contenedor es mayormente opaco al establecer su opacity.

Ten en cuenta que al usar opacity, afecta tanto a un elemento como a su contenido. Si deseas transparencia solo en partes específicas o colores dentro de un elemento sin afectar las opacidades de los elementos hijos, usa RGBA o HSLA en su lugar.

Gradientes lineales

Los gradientes lineales crean una transición en línea recta de un color a otro. Para crear un gradiente lineal, use la función linear-gradient() como valor para la propiedad background-image.

.linear-gradient {
  background-image: linear-gradient(to right, red, blue);
}

.linear-gradient-multiple {
  background-image: linear-gradient(to bottom right, red, yellow, green);
}

Gradientes radiales

Los gradientes radiales crean una transición circular o elíptica entre colores. Para crear un gradiente radial, use la función radial-gradient() como valor para la propiedad background-image.

.radial-gradient {
  background-image: radial-gradient(circle, blue, green);
}

.radial-gradient-multiple {
  background-image: radial-gradient(circle at top left, red, yellow, green);
}

Ejemplos de creación de gradientes en CSS

Aquí hay algunos ejemplos más:

.linear-gradient-transparent { 
  background-image: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)); 
} 

.repeating-linear-gradient {   
  background-image: repeating-linear-gradient(45deg, red 10px, blue 20px);    
}  

.radial-gradient-custom {     
  background-image: radial-gradient(ellipse, yellow, green, blue);      
}    

Los gradientes son características útiles en CSS que le ayudan a crear fondos atractivos para botones, secciones, fondos de página completa y más. Con la flexibilidad que ofrecen ambos tipos junto con la capacidad de controlar propiedades como las posiciones de color y la transparencia, son posibles muchos efectos creativos dentro de sus páginas web.

Monocromático

Un esquema de color monocromático utiliza diferentes tonos, matices y sombras de un solo color. Crea un aspecto unificado y es agradable a la vista. Para crear este esquema, elige un color base y luego usa sus variaciones más claras y oscuras.

Complementario

Un esquema de color complementario utiliza colores que son opuestos entre sí en la rueda de colores. Estos colores crean un alto contraste, pero deben usarse con cuidado para evitar tensión visual. Algunos ejemplos incluyen azul y naranja, rojo y verde, o morado y amarillo.

Análogo

Un esquema de color análogo utiliza colores que están uno al lado del otro en la rueda de colores. Estos colores crean una combinación armoniosa. Para crear este esquema, elige un color principal y luego usa los colores directamente a su izquierda y derecha.

Triádico

Un esquema de color triádico utiliza tres colores que están espaciados uniformemente en la rueda de colores. Este esquema crea un aspecto equilibrado. Para crearlo, elige un color principal y luego dibuja un triángulo equilátero en la rueda para encontrar los otros dos colores.

Al crear una paleta para tu sitio web, algunas herramientas pueden ayudarte a generar esquemas basados en tus preferencias:

• Adobe Color: Esta herramienta te permite crear esquemas basados en diferentes reglas como monocromático o complementario.
• Coolors: Coolors es rápida y fácil de usar para generar paletas aleatorias o ajustar colores individuales.
• Paletton: Paletton te permite crear esquemas basados en modelos como monocromático o triádico con opciones de ajuste fino.

Al usar estas herramientas y comprender los diferentes tipos de esquemas, puedes crear paletas atractivas para tus diseños web, considerando el mensaje de marca y la experiencia del usuario al elegir tus colores, experimentando hasta encontrar la paleta perfecta para tu sitio.