Colores

< Anterior Siguiente >

Colores en CSS

¿Qué son los colores en CSS?

Los colores en CSS se utilizan para definir el color del texto, el fondo, los bordes y otros elementos visuales en una página web. Pueden definirse de varias maneras, como por nombre, por valor hexadecimal, por valor RGB, y más.

Formas de Definir Colores en CSS

1. Colores por Nombre

CSS tiene un conjunto de nombres de colores predefinidos que se pueden usar directamente. Ejemplos incluyen red, blue, y green.

body {
    background-color: lightblue;
}

h1 {
    color: red;
}

2. Colores Hexadecimales

Los colores también se pueden definir utilizando valores hexadecimales, que están compuestos por seis dígitos que representan la cantidad de rojo, verde y azul (RGB). Por ejemplo, #ff0000 es rojo, #00ff00 es verde, y #0000ff es azul.

p {
    color: #ff5722;
}

div {
    background-color: #4CAF50;
}

3. Colores RGB

Los colores RGB se definen mediante la función rgb(), que toma tres valores (rojo, verde y azul) en un rango de 0 a 255. Por ejemplo, rgb(255, 0, 0) es rojo.

.caja {
    background-color: rgb(173, 216, 230); /* LightBlue */
}

4. Colores RGBA

La función rgba() es similar a rgb(), pero incluye un cuarto valor para la opacidad (alpha), que varía de 0 (transparente) a 1 (opaco). Por ejemplo, rgba(255, 0, 0, 0.5) es rojo con 50% de opacidad.

.transparente {
    background-color: rgba(255, 99, 71, 0.5); /* Tomate con transparencia */
}

5. Colores HSL

La función hsl() define colores utilizando el matiz (hue), la saturación (saturation), y la luminosidad (lightness). Por ejemplo, hsl(120, 100%, 50%) es verde.

h2 {
    color: hsl(240, 100%, 50%); /* Azul */
}

6. Colores HSLA

Similar a hsl(), pero con un valor adicional para la opacidad (alpha). Por ejemplo, hsla(240, 100%, 50%, 0.3) es azul con 30% de opacidad.

.opaco {
    background-color: hsla(240, 100%, 50%, 0.3); /* Azul opaco */
}

Ejemplos Visuales

Consejos para el Uso de Colores