Tutorial CSS: Colores en CSS

Sistemas de color: nombres, hexadecimal, RGB y RGBA

El color es uno de los elementos fundamentales en el diseño web, permitiéndonos crear interfaces visualmente atractivas y mejorar la experiencia del usuario. CSS ofrece varios sistemas para definir colores, cada uno con sus propias características y ventajas.

Colores por nombre

La forma más sencilla de especificar colores en CSS es utilizando nombres predefinidos. CSS incluye 147 nombres de colores estándar que podemos usar directamente en nuestras propiedades.

.error-message {
  color: red;
  background-color: lightyellow;
  border: 1px solid tomato;
}

Algunos nombres de colores comunes incluyen:

• Colores básicos: black, white, red, green, blue
• Tonos de gris: gray, lightgray, darkgray, dimgray
• Colores extendidos: orange, purple, pink, brown, cyan

Aunque son fáciles de recordar, los nombres de colores tienen una limitación importante: ofrecen una paleta restringida y no permiten ajustes finos de tonalidad.

Sistema hexadecimal

El sistema hexadecimal es uno de los más utilizados en desarrollo web. Consiste en un símbolo de almohadilla (#) seguido de seis dígitos hexadecimales (0-9 y A-F), donde cada par de dígitos representa la intensidad de los componentes rojo, verde y azul (RGB).

.button {
  background-color: #3498db; /* Azul */
  color: #ffffff;           /* Blanco */
  border: 2px solid #2980b9; /* Azul más oscuro */
}

La estructura de un color hexadecimal es:

#RRGGBB

Donde:

• RR: Intensidad de rojo (00-FF)
• GG: Intensidad de verde (00-FF)
• BB: Intensidad de azul (00-FF)

También existe una notación abreviada para colores que tienen valores repetidos en cada canal:

.element {
  color: #f00;    /* Equivalente a #ff0000 (rojo) */
  background: #0f0; /* Equivalente a #00ff00 (verde) */
  border-color: #00f; /* Equivalente a #0000ff (azul) */
}

Sistema RGB

El sistema RGB (Red, Green, Blue) utiliza la función rgb() para definir colores mediante valores numéricos para cada componente. Cada canal puede tener un valor entre 0 y 255.

.notification {
  background-color: rgb(52, 152, 219); /* Azul */
  color: rgb(255, 255, 255);          /* Blanco */
  border: 1px solid rgb(41, 128, 185); /* Azul más oscuro */
}

La sintaxis es:

rgb(red, green, blue)

También podemos usar porcentajes en lugar de valores numéricos:

.header {
  background-color: rgb(20%, 60%, 85%);
  color: rgb(100%, 100%, 100%);
}

Una ventaja del sistema RGB es que resulta más intuitivo para algunos desarrolladores, ya que los valores numéricos son más fáciles de interpretar que los códigos hexadecimales.

Sistema RGBA

El sistema RGBA extiende el RGB añadiendo un cuarto parámetro: el canal alfa, que controla la transparencia del color. Este valor va de 0 (completamente transparente) a 1 (completamente opaco).

.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* Negro semitransparente */
}

.tooltip {
  background-color: rgba(52, 152, 219, 0.8); /* Azul con 80% de opacidad */
  color: rgba(255, 255, 255, 1);           /* Blanco totalmente opaco */
  border: 1px solid rgba(41, 128, 185, 0.9); /* Azul más oscuro, casi opaco */
}

La sintaxis es:

rgba(red, green, blue, alpha)

El canal alfa nos permite crear efectos de superposición, sombras y transparencias sin necesidad de imágenes adicionales:

.glass-effect {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

Conversión entre sistemas

Los diferentes sistemas de color son intercambiables y representan exactamente los mismos colores. Por ejemplo:

• red = #FF0000 = rgb(255, 0, 0) = rgba(255, 0, 0, 1)
• skyblue = #87CEEB = rgb(135, 206, 235) = rgba(135, 206, 235, 1)

Uso práctico

Al elegir un sistema de color, considera:

• Usa nombres de colores para prototipos rápidos o colores estándar
• Utiliza hexadecimal cuando necesites compatibilidad con navegadores antiguos
• Emplea RGB cuando quieras una sintaxis más legible
• Aprovecha RGBA cuando necesites transparencias

Un ejemplo combinando diferentes sistemas:

.card {
  background-color: white;
  color: #333333;
  border: 1px solid rgb(220, 220, 220);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid rgb(220, 220, 220);
}

.card-button {
  background-color: #007bff;
  color: white;
  border: none;
}

.card-button:hover {
  background-color: rgba(0, 123, 255, 0.9);
}

Este ejemplo muestra cómo podemos combinar diferentes notaciones de color según nuestras necesidades específicas, aprovechando las ventajas de cada sistema para crear interfaces visualmente coherentes y atractivas.

Sistema HSL y HSLA para control intuitivo del color

El sistema HSL (Hue, Saturation, Lightness) representa una forma más intuitiva de trabajar con colores en CSS, permitiéndonos pensar en términos que se alinean mejor con nuestra percepción natural del color. A diferencia de RGB o hexadecimal, que requieren mezclar valores de rojo, verde y azul, HSL nos permite manipular directamente el tono, la saturación y la luminosidad.

Componentes del modelo HSL

La función hsl() en CSS acepta tres parámetros:

.element {
  color: hsl(tono, saturación, luminosidad);
}

• Tono (Hue): Representa el color base en la rueda cromática, expresado en grados (0° a 360°).
• Saturación (Saturation): Indica la intensidad o pureza del color, expresada como porcentaje (0% a 100%).
• Luminosidad (Lightness): Determina qué tan claro u oscuro es el color, también como porcentaje (0% a 100%).

Entendiendo el tono (Hue)

El tono se representa como un ángulo en la rueda de colores:

• 0° o 360° → Rojo
• 120° → Verde
• 240° → Azul
• 60° → Amarillo
• 180° → Cian
• 300° → Magenta

.color-wheel {
  --red: hsl(0, 100%, 50%);
  --yellow: hsl(60, 100%, 50%);
  --green: hsl(120, 100%, 50%);
  --cyan: hsl(180, 100%, 50%);
  --blue: hsl(240, 100%, 50%);
  --magenta: hsl(300, 100%, 50%);
}

Manipulando la saturación

La saturación controla la pureza del color:

• 0% → Gris (sin color)
• 100% → Color completamente saturado

.saturation-demo {
  /* Mismo tono y luminosidad, diferentes saturaciones */
  --fully-saturated: hsl(200, 100%, 50%);
  --medium-saturated: hsl(200, 50%, 50%);
  --desaturated: hsl(200, 20%, 50%);
  --grayscale: hsl(200, 0%, 50%);
}

Ajustando la luminosidad

La luminosidad determina la cantidad de luz:

• 0% → Negro (sin luz)
• 50% → Color normal
• 100% → Blanco (máxima luz)

.lightness-demo {
  /* Mismo tono y saturación, diferentes niveles de luminosidad */
  --darkest: hsl(120, 100%, 0%);    /* Negro */
  --dark: hsl(120, 100%, 25%);      /* Verde oscuro */
  --normal: hsl(120, 100%, 50%);    /* Verde */
  --light: hsl(120, 100%, 75%);     /* Verde claro */
  --lightest: hsl(120, 100%, 100%); /* Blanco */
}

Ventajas prácticas de HSL

El sistema HSL facilita enormemente ciertas operaciones de diseño:

• Crear variaciones de un mismo color: Manteniendo el tono y modificando saturación/luminosidad.
• Generar paletas armónicas: Utilizando tonos equidistantes en la rueda.
• Ajustar contraste: Modificando solo la luminosidad.

.button-system {
  /* Color base */
  --primary-color: hsl(210, 100%, 50%);
  
  /* Variaciones manteniendo el mismo tono */
  --primary-dark: hsl(210, 100%, 40%);    /* Más oscuro */
  --primary-light: hsl(210, 100%, 60%);   /* Más claro */
  --primary-pale: hsl(210, 70%, 70%);     /* Menos saturado y más claro */
  --primary-faded: hsl(210, 30%, 95%);    /* Muy desaturado y muy claro */
}

Creando esquemas de color armónicos

Con HSL, podemos crear fácilmente esquemas de color complementarios o análogos:

.color-scheme {
  /* Color base */
  --base: hsl(180, 70%, 50%);
  
  /* Colores análogos (±30°) */
  --analogous1: hsl(150, 70%, 50%);
  --analogous2: hsl(210, 70%, 50%);
  
  /* Color complementario (±180°) */
  --complementary: hsl(0, 70%, 50%);
  
  /* Colores triádicos (±120°) */
  --triadic1: hsl(60, 70%, 50%);
  --triadic2: hsl(300, 70%, 50%);
}

Sistema HSLA para transparencia

Al igual que RGBA, el sistema HSL tiene su versión con canal alfa: HSLA. Esto nos permite añadir transparencia a nuestros colores HSL:

.overlay {
  background-color: hsla(0, 0%, 0%, 0.5);  /* Negro semitransparente */
}

.glass-panel {
  background-color: hsla(200, 100%, 50%, 0.2);  /* Azul muy transparente */
  border: 1px solid hsla(200, 100%, 50%, 0.5);  /* Borde azul semitransparente */
}

La sintaxis es:

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

Donde el valor alfa va de 0 (completamente transparente) a 1 (completamente opaco).

Aplicación práctica en interfaces

El sistema HSL es particularmente útil para crear interfaces coherentes y adaptables:

:root {
  /* Definimos el tono base de nuestra aplicación */
  --brand-hue: 220;
  
  /* Creamos toda la paleta a partir de ese tono */
  --primary: hsl(var(--brand-hue), 80%, 50%);
  --primary-hover: hsl(var(--brand-hue), 80%, 40%);
  --primary-active: hsl(var(--brand-hue), 80%, 35%);
  
  --accent: hsl(calc(var(--brand-hue) + 180), 70%, 45%);
  
  --background: hsl(var(--brand-hue), 20%, 95%);
  --text: hsl(var(--brand-hue), 15%, 15%);
  --text-light: hsl(var(--brand-hue), 10%, 40%);
}

Con esta configuración, podríamos cambiar completamente el esquema de color de nuestra aplicación modificando solo la variable --brand-hue.

Ejemplo: Botón con estados usando HSL

.button {
  background-color: hsl(220, 70%, 50%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.button:hover {
  /* Mismo tono, misma saturación, menos luminosidad */
  background-color: hsl(220, 70%, 40%);
}

.button:active {
  /* Mismo tono, misma saturación, aún menos luminosidad */
  background-color: hsl(220, 70%, 35%);
}

.button.disabled {
  /* Mismo tono, menos saturación, más luminosidad */
  background-color: hsl(220, 30%, 70%);
  cursor: not-allowed;
}

Comparación con otros sistemas de color

Mientras que RGB y hexadecimal son excelentes para especificar colores exactos, HSL brilla cuando necesitamos:

• Ajustar un color existente (aclarar, oscurecer, desaturar)
• Generar variaciones de un color base
• Crear paletas de colores armónicas
• Comunicar intenciones de diseño de manera más intuitiva

Por ejemplo, para oscurecer un color:

/* Con RGB, necesitamos recalcular todos los componentes */
.rgb-dark { background-color: rgb(20, 83, 120); }

/* Con HSL, solo ajustamos la luminosidad */
.hsl-dark { background-color: hsl(200, 70%, 30%); }

El sistema HSL nos permite expresar colores de una manera que se alinea con nuestra forma natural de pensar sobre ellos, facilitando la creación de diseños coherentes y visualmente armoniosos.

Función currentColor y palabra clave transparent

En CSS, además de los sistemas de color que hemos visto anteriormente (nombres, hexadecimal, RGB/RGBA y HSL/HSLA), existen dos valores especiales que resultan extremadamente útiles para crear diseños coherentes y flexibles: la función currentColor y la palabra clave transparent.

La función currentColor

La palabra clave currentColor es un valor especial que toma automáticamente el valor de la propiedad color del elemento actual. Esto permite crear relaciones dinámicas entre diferentes propiedades de color sin tener que repetir valores.

.button {
  color: #3498db;
  border: 2px solid currentColor;
  box-shadow: 0 0 5px currentColor;
}

En este ejemplo, tanto el borde como la sombra heredarán automáticamente el color azul (#3498db) definido en la propiedad color. Si posteriormente cambiamos el color del texto, los demás elementos se actualizarán automáticamente.

Ventajas de currentColor

• Coherencia visual: Garantiza que elementos relacionados mantengan la misma tonalidad.
• Código más limpio: Reduce la repetición de valores de color.
• Mantenimiento simplificado: Permite cambiar múltiples propiedades de color modificando un solo valor.

Casos de uso comunes

1. Iconos que coinciden con el texto:

.icon-button {
  color: #2c3e50;
}

.icon-button svg {
  fill: currentColor;
  stroke: currentColor;
}

2. Bordes y subrayados coordinados:

.nav-link {
  color: #8e44ad;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s;
}

.nav-link:hover {
  border-color: currentColor; /* Adopta el color del texto */
}

3. Gradientes basados en el color del texto:

.gradient-card {
  color: #e74c3c;
  background-image: linear-gradient(to bottom, white, currentColor);
  padding: 20px;
}

Herencia y currentColor

Es importante entender que currentColor hereda a través del árbol DOM. Si un elemento hijo no tiene definida su propia propiedad color, currentColor tomará el valor heredado del elemento padre:

.parent {
  color: blue;
}

.child {
  /* No tiene definido su propio color, hereda blue */
  border: 1px solid currentColor; /* El borde será azul */
}

La palabra clave transparent

transparent es un valor de color predefinido que representa un color completamente transparente, equivalente a rgba(0, 0, 0, 0). Es extremadamente útil para crear efectos visuales sutiles y transiciones.

.overlay {
  background-color: transparent;
  transition: background-color 0.3s;
}

.overlay:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

Usos prácticos de transparent

1. Bordes parciales:

.tab {
  border: 1px solid #ddd;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}

Este patrón es común en interfaces de pestañas, donde queremos que el borde inferior desaparezca para crear la ilusión de continuidad con el contenido.

2. Gradientes con desvanecimiento:

.fade-effect {
  background-image: linear-gradient(to right, #3498db, transparent);
  height: 200px;
}

3. Botones con fondo transparente:

.ghost-button {
  color: #2980b9;
  background-color: transparent;
  border: 2px solid currentColor;
  padding: 10px 20px;
  transition: background-color 0.3s;
}

.ghost-button:hover {
  background-color: rgba(41, 128, 185, 0.1);
}

Diferencia entre transparent y rgba(0,0,0,0)

Aunque funcionalmente equivalentes en la mayoría de los casos, hay algunas diferencias sutiles:

• transparent es más conciso y legible.
• rgba(0,0,0,0) permite una transición gradual a través de la manipulación del canal alfa.

.box {
  background-color: transparent;
  transition: background-color 0.5s;
}

.box:hover {
  /* Podemos animar hacia un color con opacidad */
  background-color: rgba(52, 152, 219, 0.5);
}

Combinando currentColor y transparent

Estas dos palabras clave pueden trabajar juntas para crear efectos elegantes:

.fancy-link {
  color: #9b59b6;
  text-decoration: none;
  position: relative;
}

.fancy-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transition: transform 0.3s;
}

.fancy-link:hover::after {
  transform: scaleX(1);
}

En este ejemplo, creamos un efecto de subrayado animado que siempre coincidirá con el color del texto.

Ejemplo práctico: Tarjeta con tema dinámico

.card {
  --theme-color: #e74c3c;
  color: var(--theme-color);
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card-header {
  border-bottom: 2px solid currentColor;
  margin-bottom: 15px;
  padding-bottom: 10px;
}

.card-button {
  background-color: transparent;
  color: currentColor;
  border: 1px solid currentColor;
  padding: 8px 16px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.card-button:hover {
  background-color: currentColor;
  color: white;
}

En este ejemplo, podemos cambiar fácilmente el tema de toda la tarjeta modificando solo la variable --theme-color. Todos los elementos relacionados (borde del encabezado, botón) se actualizarán automáticamente.

Consideraciones de compatibilidad

• currentColor tiene excelente soporte en todos los navegadores modernos.
• transparent es compatible con todos los navegadores.

Estas palabras clave son herramientas fundamentales en el arsenal de cualquier desarrollador CSS, permitiendo crear diseños más mantenibles, coherentes y elegantes con menos código.

Herramientas de selección de color y paletas armónicas

Seleccionar los colores adecuados para un proyecto web puede ser un desafío, especialmente si no tienes formación en diseño. Afortunadamente, existen numerosas herramientas que facilitan este proceso, permitiéndote crear combinaciones de colores armónicas y profesionales sin necesidad de ser un experto en teoría del color.

Selectores de color integrados

Los navegadores modernos incluyen selectores de color nativos en sus herramientas de desarrollo. Estos te permiten experimentar con diferentes valores de color directamente mientras inspeccionas tu código CSS:

• En Chrome DevTools, al hacer clic en cualquier valor de color, aparece un selector que permite ajustar el color visualmente
• Firefox ofrece funcionalidades similares, incluyendo la posibilidad de cambiar entre diferentes formatos (HEX, RGB, HSL)

.button {
  /* Puedes hacer clic en este color en las DevTools para ajustarlo */
  background-color: #3498db;
}

Herramientas web para selección de colores

Existen excelentes aplicaciones web que facilitan la selección y experimentación con colores:

• Color Picker Tools:

• Adobe Color (anteriormente Adobe Kuler): Permite crear esquemas de color basados en reglas de armonía cromática

• Coolors: Genera paletas de color aleatorias con un simple toque de barra espaciadora

• Colormind: Utiliza inteligencia artificial para generar paletas de color coherentes

• Extractores de color:

• ColorZilla: Extensión de navegador que permite capturar cualquier color de una página web

• Eye Dropper: Herramienta simple que te permite seleccionar colores de cualquier parte de tu pantalla

:root {
  /* Colores extraídos de una paleta generada con Coolors */
  --primary: #2b2d42;
  --secondary: #8d99ae;
  --light: #edf2f4;
  --accent: #ef233c;
  --accent-dark: #d90429;
}

Principios de armonía cromática

Las paletas armónicas se basan en principios establecidos de teoría del color. Las herramientas mencionadas utilizan estos principios para generar combinaciones agradables:

• Esquema monocromático: Variaciones de un solo color, ajustando su saturación y luminosidad
• Esquema análogo: Colores adyacentes en la rueda cromática
• Esquema complementario: Colores opuestos en la rueda cromática
• Esquema triádico: Tres colores equidistantes en la rueda cromática
• Esquema tetrádico: Cuatro colores formando un rectángulo en la rueda cromática

/* Ejemplo de esquema complementario */
.complementary-scheme {
  --primary: #3498db;       /* Azul */
  --complementary: #e67e22; /* Naranja (complementario del azul) */
  
  --primary-light: #7fc4fd;
  --complementary-light: #ffb878;
}

Herramientas de accesibilidad de color

Un aspecto crucial al seleccionar colores es asegurar que sean accesibles para todos los usuarios, incluidas las personas con discapacidades visuales:

• WebAIM Contrast Checker: Verifica que el contraste entre texto y fondo cumpla con las pautas WCAG
• Contrast Ratio: Herramienta simple para comprobar la relación de contraste
• Colorable: Permite ajustar colores mientras monitoriza su relación de contraste

/* Colores con buen contraste según WCAG AA */
.accessible-text {
  background-color: #ffffff;
  color: #595959;           /* Gris oscuro con ratio de contraste >4.5:1 */
}

.accessible-heading {
  background-color: #ffffff;
  color: #2d2d2d;           /* Casi negro con ratio de contraste >7:1 */
}

Sistemas de diseño y paletas predefinidas

Muchos frameworks y sistemas de diseño incluyen paletas de color cuidadosamente seleccionadas:

• Material Design: El sistema de Google ofrece una completa paleta con variaciones de cada color
• Tailwind CSS: Incluye una escala de colores bien pensada con múltiples tonalidades
• Bootstrap: Proporciona variables de color predefinidas para diferentes propósitos

/* Inspirado en la paleta de Material Design */
:root {
  --primary-50: #e3f2fd;
  --primary-100: #bbdefb;
  --primary-200: #90caf9;
  --primary-300: #64b5f6;
  --primary-400: #42a5f5;
  --primary-500: #2196f3;
  --primary-600: #1e88e5;
  --primary-700: #1976d2;
  --primary-800: #1565c0;
  --primary-900: #0d47a1;
}

Extensiones de color para editores de código

Los editores de código modernos ofrecen extensiones que facilitan trabajar con colores:

• Color Highlight: Muestra un fondo del color correspondiente a los valores de color en tu código
• Color Picker: Permite seleccionar colores directamente desde el editor
• CSS Color Preview: Muestra una previsualización de los colores en la línea de código

Estas herramientas mejoran significativamente el flujo de trabajo al permitirte ver y ajustar colores sin salir de tu editor.

Creando un sistema de color con variables CSS

Una práctica recomendada es crear un sistema de color utilizando variables CSS. Esto facilita la gestión y actualización de tu paleta:

:root {
  /* Colores base */
  --blue: #1a73e8;
  --red: #ea4335;
  --yellow: #fbbc04;
  --green: #34a853;
  
  /* Colores semánticos */
  --primary: var(--blue);
  --danger: var(--red);
  --warning: var(--yellow);
  --success: var(--green);
  
  /* Variaciones tonales */
  --primary-light: #d2e3fc;
  --primary-dark: #174ea6;
  
  /* Colores de interfaz */
  --background: #ffffff;
  --surface: #f8f9fa;
  --on-primary: #ffffff;
  --on-background: #202124;
  --on-surface: #3c4043;
}

Este enfoque permite cambiar fácilmente toda la paleta modificando solo los colores base.

Herramientas para generar variaciones de color

Algunas herramientas te permiten generar automáticamente variaciones tonales a partir de un color base:

• Tint & Shade Generator: Crea variaciones más claras y más oscuras de un color
• Palx: Genera una paleta completa a partir de un solo color
• Leonardo: Herramienta de Adobe que genera escalas de color accesibles

/* Escala de grises generada con una herramienta de variaciones */
:root {
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
}

Inspiración de color para proyectos web

Cuando buscas inspiración para tu próximo proyecto, estas fuentes pueden ser muy útiles:

• Color Hunt: Colección de paletas de color curadas por la comunidad
• Dribbble: Plataforma donde los diseñadores comparten su trabajo, excelente para inspiración
• Behance: Similar a Dribbble, con proyectos de diseño profesionales
• Pinterest: Infinitas ideas de combinaciones de color organizadas por categorías

Ejemplo práctico: Implementando una paleta armónica

Veamos cómo implementar una paleta completa generada con una herramienta de armonía cromática:

:root {
  /* Paleta principal (esquema análogo) */
  --primary: #3366ff;
  --primary-variant: #5c85ff;
  --secondary: #33ccff;
  --secondary-variant: #70dbff;
  
  /* Neutros */
  --background: #fafafa;
  --surface: #ffffff;
  --error: #b00020;
  
  /* Texto */
  --on-primary: #ffffff;
  --on-secondary: #000000;
  --on-background: #202020;
  --on-surface: #202020;
  --on-error: #ffffff;
}

/* Aplicación de la paleta */
body {
  background-color: var(--background);
  color: var(--on-background);
}

.button-primary {
  background-color: var(--primary);
  color: var(--on-primary);
}

.button-secondary {
  background-color: var(--secondary);
  color: var(--on-secondary);
}

.card {
  background-color: var(--surface);
  color: var(--on-surface);
  border: 1px solid var(--primary-variant);
}

.alert-error {
  background-color: var(--error);
  color: var(--on-error);
}

Consideraciones para diseño responsive

Al trabajar con colores en diseños responsive, considera:

• Usar mayor contraste para pantallas pequeñas donde la legibilidad es crucial
• Implementar modos oscuros para reducir la fatiga visual en diferentes condiciones de iluminación

/* Ejemplo de modo oscuro usando variables CSS */
:root {
  --background: #ffffff;
  --text: #202020;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #121212;
    --text: #e0e0e0;
  }
}

body {
  background-color: var(--background);
  color: var(--text);
}

Las herramientas y principios que hemos explorado te permitirán crear paletas de color profesionales y armónicas para tus proyectos web, mejorando significativamente la estética y usabilidad de tus diseños sin necesidad de ser un experto en teoría del color.