CSS - Colores

Nombres de Colores

En CSS, puedes usar nombres de colores predefinidos para especificar colores. Estos nombres son fáciles de recordar y proporcionan una forma rápida de aplicar colores a tus elementos web. Algunos nombres de colores comúnmente utilizados incluyen:

• red: Un rojo brillante.
• blue: Un azul clásico.
• green: Un verde natural.
• yellow: Un amarillo soleado.
• purple: Un morado real.
• black: Un negro sólido.
• white: Un blanco puro.

Colores Hexadecimales

Los valores de color hexadecimal son una forma popular de representar colores en CSS. Consisten en un símbolo de almohadilla (#) seguido de seis caracteres, donde cada par de caracteres representa la intensidad de los componentes rojo, verde y azul (RGB).

El formato de un valor de color hexadecimal es #RRGGBB, donde:

• RR representa el componente rojo (00 a FF).
• GG representa el componente verde (00 a FF).
• BB representa el componente azul (00 a FF).

#FF0000 /* rojo */
#00FF00 /* verde */
#0000FF /* azul */
#000000 /* negro */
#FFFFFF /* blanco */

Colores RGB

El modelo de color RGB es otra forma de especificar colores en CSS. Utiliza una combinación de valores de rojo, verde y azul.

El formato de un valor de color RGB es:

rgb(rojo, verde, azul)

donde cada componente es un número entero entre 0 y 255.

rgb(255, 0, 0)   /* rojo */
rgb(0, 255, 0)   /* verde */
rgb(0, 0 ,255)   /* azul */
rgb(0 , 0 , 0 )    /* negro */
rgb(255 ,255 ,255 )/* blanco */

Colores RGBA

RGBA es una extensión del modelo RGB que incluye un canal alfa para especificar la opacidad. El valor alfa va de 0 (totalmente transparente) a 1 (totalmente opaco).

El formato de un valor de color RGBA es:

rgba(rojo, verde, azul, alfa)

donde los primeros tres componentes son números enteros entre 0 y 255, y el valor alfa va de 0 a 1.

 rgba(255, 0, 0, .5) /* rojo con 50% de opacidad */  
 rgba(0, 255, 0, .8) /* verde con 80% de opacidad */  
 rgba(0, 0, 255, .3) /* azul con 30% de opacidad */

Colores HSL

El modelo HSL representa los colores usando valores de tono, saturación y luminosidad. Proporciona una forma más intuitiva de describir colores en comparación con RGB.

El formato de un valor de color HSL es:

hsl(tono, saturación, luminosidad)

donde:

• tono es un ángulo entre 0 y 360 grados que representa la rueda de colores.
• saturación es un valor porcentual entre 0% y 100%, donde 0% representa escala de grises y 100% representa saturación completa del color.
• luminosidad es un valor porcentual entre 0% y 100%, donde 0% representa negro, 50% representa el color normal, y 100% representa blanco.

hsl(0, 100%, 50%) /* rojo */
hsl(120, 100%, 50%) /* verde */
hsl(240, 100%, 50%) /* azul */
hsl(0, 0%, 0%) /* negro */
hsl(0, 0%, 100%) /* blanco */

Colores HSLA

HSLA es una extensión del modelo de color HSL que incluye un canal alfa para especificar la opacidad, similar a RGBA.

El formato de un valor de color HSLA es:

hsla(tono, saturación, luminosidad, alfa)

donde los primeros tres componentes siguen el mismo formato que HSL, y el valor alfa es un decimal entre 0 y 1.

 hsla(0, 100%, 50%, .5) /* rojo con 50% de opacidad */   
 hsla(120, 100%, 50%, .8) /* verde con 80% de opacidad */   
 hsla(240, 100%, 50%, .3) /* azul con 30% de opacidad */

Color de Texto

La propiedad color en CSS establece el color del texto dentro de un elemento. Acepta cualquier valor de color válido, como nombres de colores, colores hexadecimales, RGB, RGBA, HSL o HSLA.

h1 {
  color: blue;
}

p {
  color: #FF0000;
}

span {
  color: rgb(0, 255, 0);
}

• El elemento <h1> tendrá texto azul.
• El elemento <p> tendrá texto rojo usando un valor hexadecimal.
• El elemento <span> tendrá texto verde usando un valor RGB.

Color de Fondo

La propiedad background-color establece el color de fondo de un elemento. Acepta los mismos valores que la propiedad color.

div {
  background-color: yellow;
}

section {
  background-color: #00FF00;
}

article {
  background-color: rgba(255, 0, 0, 0.5);
}

• El elemento <div> tendrá un fondo amarillo.
• El elemento <section> tendrá un fondo verde usando un valor hexadecimal.
• El elemento <article> tendrá un fondo rojo con 50% de opacidad usando un valor RGBA.

Color de Borde

La propiedad border-color establece el color del borde de un elemento. Acepta los mismos valores que las propiedades color y background-color.

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

.container { 
  border: 1px dashed; 
  border-color: #0000FF; 
} 

.card { 
  border: 3px dotted;  
  border-color: hsl(240, 100%, 50%);
}

• La clase .box tiene un borde sólido rosa.
• La clase .container tiene un borde discontinuo azul con valores hexadecimales.
• La clase .card tiene bordes punteados azules con valores HSL.

Opacidad

La opacidad controla la transparencia entre cero y uno, donde cero significa transparencia total y uno significa visibilidad total.

img {
  opacity: 0.5;
} 

.overlay {
  opacity: 0.8;
} 

.faded-text {
  opacity: 0.3;
}

• Los elementos img son semitransparentes al cincuenta por ciento.
• Las clases .overlay aparecen ochenta por ciento visibles.
• Las clases .faded-text se ven treinta por ciento desvanecidas.

Esquema de Color Complementario

Los colores complementarios están opuestos entre sí en la rueda de colores. Crean un alto contraste y pueden hacer que los elementos destaquen. Algunos ejemplos incluyen:

• Rojo y verde
• Azul y naranja
• Morado y amarillo

Esquema de Color Análogo

Los colores análogos están uno al lado del otro en la rueda de colores. Crean un aspecto equilibrado. Algunos ejemplos incluyen:

• Rojo, naranja y amarillo
• Verde, verde azulado y azul
• Morado, azul violáceo y azul

Esquema de Color Triádico

Los colores triádicos están espaciados uniformemente en la rueda de colores, formando un triángulo. Ofrecen una combinación vibrante. Algunos ejemplos incluyen:

• Rojo, amarillo y azul
• Verde, naranja y morado
• Turquesa, magenta y amarillo anaranjado

Al crear combinaciones de colores, considera estos consejos:

• Usa una rueda de colores para ayudarte a seleccionar colores que combinen.
• Elige un color principal con otros como acentos para lograr equilibrio.
• Piensa en el estado de ánimo que quieres transmitir con tus elecciones.
• Prueba tus combinaciones en diferentes dispositivos para comprobar la legibilidad.

Utiliza herramientas en línea para generar paletas o explorar diferentes esquemas.

Recuerda que las preferencias varían según el gusto personal o el contexto del proyecto. Experimenta con diferentes esquemas para crear diseños visualmente atractivos.