Enciclopedia CSS: color

Plantilla:Programación La propiedad color en CSS define el color del texto de un elemento. Se utiliza para dar estilo al contenido textual y admite tanto nombres simples de colores como formatos más precisos: HEX, RGB, RGBA, HSL, HSLA y variables CSS.

Formatos para definir el color

La propiedad color puede recibir distintos tipos de valores:

1. Nombres de color: nombres predefinidos como red, blue o green.
2. Código HEX: notación hexadecimal, por ejemplo #ff0000 para el rojo.
3. RGB: formato rgb(255, 0, 0).
4. RGBA: similar a RGB, pero con canal de transparencia, por ejemplo rgba(255, 0, 0, 0.5).
5. HSL: color definido mediante tono, saturación y luminosidad, por ejemplo hsl(0, 100%, 50%).
6. HSLA: formato HSL con transparencia.
7. Variables CSS: uso de valores reutilizables, por ejemplo var(--color-principal).

Ejemplo de uso

El siguiente ejemplo muestra cómo la propiedad color establece el color del texto mediante un nombre de color, un valor HEX, rgb() y rgba() con transparencia.

CSS: propiedad color

HTMLCopiar

<div class="color-demo"> <p class="example1">Este texto es rojo.</p> <p class="example2">Este texto es azul.</p> <p class="example3">Este texto es verde.</p> <p class="example4">Este texto es naranja con transparencia.</p> </div>

CSSCopiar

.color-demo { padding: 18px; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; background: #f7f9fc; border: 1px solid #d6e0ea; } .color-demo p { margin: 0 0 10px; font-weight: 600; } .example1 { color: red; } .example2 { color: #0000ff; } .example3 { color: rgb(0, 128, 0); } .example4 { color: rgba(255, 140, 0, 0.8); }

ResultadoDescargar archivo

Compatibilidad con navegadores

La propiedad color es una propiedad básica de CSS y está disponible en todos los navegadores modernos, incluidas sus versiones móviles.

Notas

• El color del texto puede heredarse del elemento padre si no se define explícitamente.
• Para efectos más complejos, como degradados, se utilizan normalmente background o background-image.
• Conviene comprobar el contraste entre texto y fondo para mantener una buena legibilidad.

Ejemplo con variables

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
}

h1 {
    color: var(--primary-color);
}

p {
    color: var(--secondary-color);
}

Las variables CSS permiten organizar la paleta de colores de un sitio. Si el color principal cambia, basta con modificar el valor de la variable en un solo lugar y todos los elementos que la utilizan se actualizarán automáticamente.

Conclusión

La propiedad color es una de las herramientas principales para controlar la presentación del texto en CSS. Su compatibilidad con distintos formatos la hace útil tanto para ejemplos sencillos como para sistemas de diseño completos.