CSS
Tutorial CSS: Colores en CSS
Aprende los sistemas de color en CSS: nombres, hexadecimal, RGB, RGBA, HSL, HSLA, currentColor y transparent para diseños web profesionales.
Aprende CSS y certifícateSistemas 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.
Ejercicios de esta lección Colores en CSS
Evalúa tus conocimientos de esta lección Colores en CSS con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Reto modelo caja CSS
Propiedades de posicionamiento
Modelo de caja
Sombras en texto y cajas
Reto implementación de fuentes web
Sintaxis básica
Estilos de fuente
Diseño responsive con media queries
Animaciones y transiciones
Proyecto CSS Landing page simple
Reto unidades de medida
Propiedades de texto
Metodologías BEM, SMACSS, OOCSS
Herencia y cascada
Sintaxis avanzada
Reto fondos background CSS
Reto sintaxis CSS
Flexbox en diseños modernos
Elementos 'float' y 'clear'
Pseudo-clases y pseudo-elementos
Reto grid de columnas en CSS
Selectores avanzados
Reto componente responsive
Reto formulario estilizado
Proyecto CSS crear una navbar
Proyecto CSS Dashboard Responsive
Reto Flexbox Hero
Propiedades de fondo
Introducción a CSS
Reto selectores básicos CSS
Reto Flexbox Card
Reto propiedades texto
Modelo de caja
Propiedad 'display'
Variables en CSS
Grid en diseños de cuadrícula
Selectores básicos
Reto tema claro/oscuro con variables
Reto especificidad y cascada
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Entorno Para Desarrollar Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Colores En Css
Sintaxis De Selectores Y Propiedades
Unidades De Medida
Sintaxis De Selectores Y Propiedades
Especificidad
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Fuentes Web
Estilización De Texto Y Fondo
Efectos De Texto: Gradientes, Recortes
Estilización De Texto Y Fondo
Tipografía Avanzada
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja
Propiedades De Posicionamiento
Modelo Caja
Propiedad 'Display'
Modelo Caja
Elementos 'Float' Y 'Clear'
Modelo Caja
Rellenos Y Márgenes
Modelo Caja
Bordes Y Contornos
Modelo Caja
Absolute, Fixed, Sticky Y Z-index
Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox
Css Grid Para Crear Layouts Y Estructuras
Flexbox
Propiedades Del Contenedor Flex
Flexbox
Propiedades De Los Items Flex
Flexbox
Columnas Y Filas En Grid
Css Grid
Espaciado Y Alineación
Css Grid
Tipografía Responsive
Diseño Responsive
Fundamentos Del Diseño Responsive
Diseño Responsive
Imágenes Responsive
Diseño Responsive
Funciones Matemáticas
Variables Y Funciones Css
Transformaciones 2d
Transformación, Transición, Animación
Transformaciones 3d
Transformación, Transición, Animación
Animaciones
Transformación, Transición, Animación
Transiciones
Transformación, Transición, Animación
Css Para Formularios
Css Avanzado
Accesibilidad Web Con Css
Css Avanzado
Container Queries
Css Avanzado
Selectores Avanzados
Css Avanzado
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender los distintos sistemas de color en CSS: nombres, hexadecimal, RGB, RGBA, HSL y HSLA.
- Aprender a utilizar la función currentColor y la palabra clave transparent para diseños flexibles y coherentes.
- Conocer cómo crear y gestionar paletas de color armónicas y accesibles mediante variables CSS y herramientas externas.
- Aplicar técnicas para manipular colores de forma intuitiva usando HSL y HSLA.
- Integrar herramientas y buenas prácticas para seleccionar colores adecuados y mejorar la experiencia visual en proyectos web.