Tutoriales
Step-by-step tutorials applying color science concepts to real-world design and development tasks.
Generación de imágenes OG coloridas con Next.js y Satori
Genera imágenes Open Graph dinámicas con Next.js y Satori. Crea plantillas OG con conciencia de color, degradados, colores de marca y diseños responsivos.
Actualizado Feb 24, 2026
Propiedades Personalizadas CSS para Sistemas de Color Dinámicos
Aprende a construir sistemas de color mantenibles y personalizables con propiedades personalizadas CSS. Cubre variables, modos claro/oscuro y cambios de color en tiempo de ejecución con JS.
Actualizado Feb 18, 2026
Colores de Tailwind CSS: guía completa del sistema de tonos
Domina el sistema de color de Tailwind CSS: la paleta predeterminada, la convención de tonos 50-950, colores personalizados en la configuración y el nuevo enfoque de variables CSS en Tailwind v4.
Actualizado Feb 11, 2026
Implementar el modo oscuro: guía completa para desarrolladores
Aprende a implementar el modo oscuro usando propiedades personalizadas de CSS, prefers-color-scheme, alternadores con JavaScript y estrategias adecuadas de adaptación de color para cualquier proyecto web.
Actualizado Feb 04, 2026
Construyendo un Selector de Color como Web Component desde Cero
Construye un selector de color accesible como Web Component. Implementa renderizado en canvas, sliders de tono, canales alfa y eventos personalizados con Shadow DOM.
Actualizado Feb 02, 2026
CSS color-mix(): Mezcla Colores Nativamente en el Navegador
Aprende CSS color-mix() para mezclar colores nativamente en el navegador. Domina la sintaxis, los espacios de color, los casos de uso prácticos y crea paletas dinámicas sin JavaScript.
Actualizado Ene 31, 2026
Gama de color explicada: sRGB, P3 y Rec. 2020
Entiende las gamas de color (sRGB, Display P3 y Rec. 2020) y cómo usar colores de gama amplia en CSS con @media (color-gamut) para pantallas modernas. Incluye ejemplos prácticos.
Actualizado Ene 28, 2026
Funciones de Color CSS: rgb(), hsl(), oklch() Comparadas
Compara todas las funciones de color CSS — rgb(), rgba(), hsl(), hsla(), lab(), lch(), oklch() y color-mix(). Aprende cuál usar, cuándo y cómo es el soporte de navegadores.
Actualizado Ene 22, 2026
Espacios de Color Perceptuales: Lab, LCH, Oklab, OKLCH
Explora los espacios de color perceptualmente uniformes — CIE Lab, LCH, Oklab y OKLCH. Aprende cómo fue diseñado cada uno, en qué destaca y cuál usar para CSS y trabajo de diseño.
Actualizado Ene 22, 2026
Componentes de Auto-layout en Figma con Tokens de Color
Crea componentes de auto-layout en Figma con arquitectura de tokens de color. Aprende sobre enlace de variables, tokens responsivos, variantes de tema y entrega a desarrolladores.
Actualizado Ene 15, 2026
Prueba de Color: Garantizando Colores Precisos en Impresión
Aprende técnicas de prueba blanda, prueba física y prueba de prensa para garantizar una reproducción precisa del color de impresión desde la pantalla hasta la salida final.
Actualizado Ene 13, 2026
CMYK para diseñadores web: cuando la impresión se encuentra con la pantalla
Los diseñadores web que trabajan en proyectos de impresión necesitan entender CMYK. Aprende las diferencias de gama, estrategias seguras de conversión RGB a CMYK, flujos de trabajo de prueba de impresión y errores comunes.
Actualizado Ene 12, 2026
Cómo el Papel Afecta el Color: Sustrato y Calidad de Impresión
Comprende cómo el tipo de papel, el revestimiento y el gramaje afectan el color impreso. Aprende las diferencias entre papeles revestidos, sin revestir y de especialidad para lograr precisión de color.
Actualizado Ene 09, 2026
Estampado en Lámina y Colores Metálicos en Diseño de Impresión
Aprende sobre técnicas de estampado en lámina, opciones de tintas metálicas, elección de láminas doradas y plateadas, y consideraciones de diseño para materiales impresos premium.
Actualizado Ene 08, 2026
Arquitectura de color multimarca: un código, muchos temas
Construye arquitectura de color multimarca con propiedades personalizadas de CSS y tokens de diseño. Soporta temas white-label desde un único código fuente con integración de Tailwind.
Actualizado Ene 06, 2026
Color en 3D y WebGL: Espacio de color lineal y PBR
Entiende el color en renderizado 3D: sRGB vs RGB lineal, corrección gamma, colores de renderizado basado en física, gestión de color en Three.js y HDR en 3D web.
Actualizado Ene 02, 2026
Color para la narrativa de datos: Más allá de los colores predeterminados
Supera los colores predeterminados de los gráficos para contar historias con datos. Aprende paletas secuenciales, divergentes y categóricas, accesibilidad en visualización de datos y escalas de color en D3/Chart.js.
Actualizado Dic 29, 2025
Animación de color en CSS: Transiciones y fotogramas clave
Domina la animación de color en CSS con transiciones, animaciones de fotogramas clave, rotación de tono HSL, interpolación OKLCH para suavidad perceptual y mejores prácticas de rendimiento.
Actualizado Dic 26, 2025
Función CSS light-dark(): Cambio de Tema Nativo
Usa CSS light-dark() para cambiar temas de forma nativa. Reemplaza los interruptores de JavaScript y las media queries con una sola función CSS para colores en modo claro y oscuro.
Actualizado Dic 24, 2025
El modelo de color RGB: cómo las pantallas muestran el color
Comprende cómo funciona el modelo de color RGB: mezcla de luz roja, verde y azul, el rango 0–255, la función CSS rgb() y por qué las pantallas pueden mostrar 16.7 millones de colores.
Actualizado Dic 20, 2025
Flujo de Trabajo de Gestión del Color: De la Pantalla a la Impresión
Domina la gestión del color desde la calibración del monitor hasta la prueba de impresión. Aprende cómo los perfiles ICC, la prueba blanda y un flujo de trabajo consistente mantienen los colores precisos de la pantalla a la impresión.
Actualizado Dic 14, 2025
Construyendo un Sistema de Color para tu Design System
Crea una arquitectura de color sistemática para tu design system con convenciones de nombres, generación de tonos, tokens semánticos y patrones de implementación.
Actualizado Dic 09, 2025
Diseño de una API de color: Endpoints REST para datos de color
Diseña una API REST de color con endpoints para conversión, búsqueda, verificación de contraste y generación de paletas. Aprende diseño de esquema y mejores prácticas.
Actualizado Dic 06, 2025
Técnicas de color en SVG: relleno, trazo y degradados
Domina las técnicas de color en SVG: atributos fill y stroke, degradados lineales y radiales, la palabra clave currentColor y el estilo de SVG con CSS para el desarrollo web moderno.
Actualizado Nov 29, 2025
La Regla 60-30-10: Proporción de Color en el Diseño
Domina la regla de color 60-30-10 para el diseño. Aprende cómo funcionan juntos los colores dominante, secundario y de acento, con ejemplos reales, códigos hex y consejos para romper la regla de forma efectiva.
Actualizado Nov 24, 2025
Separación de Color Explicada: Preparar Archivos para Imprenta
Comprende la separación de color CMYK, planchas de tinta plana, trapping y marcas de registro. Prepara archivos listos para imprenta con separaciones de color correctas.
Actualizado Nov 21, 2025
HSL vs HSV: ¿Qué Modelo de Color Deberías Usar?
Comprende la diferencia entre los modelos de color HSL y HSV, cuándo es apropiado cada uno para el desarrollo web o los selectores de color, y cómo ambos se comparan con las funciones de color CSS.
Actualizado Nov 19, 2025
Sistemas de Color Semántico: Nombrar Colores por Función, No por Tono
Construye sistemas de color semántico que nombren los colores por función (éxito, advertencia, error) en lugar de por tono. Aprende la arquitectura de tokens e implementación en CSS y Tailwind.
Actualizado Nov 14, 2025
Sintaxis de Color Relativo CSS: Transforma Cualquier Color Dinámicamente
Domina la sintaxis de color relativo CSS para transformar colores dinámicamente. Ajusta tono, saturación, luminosidad y canales alfa directamente en tus hojas de estilos.
Actualizado Nov 10, 2025
Diseñar para el Modo de Alto Contraste: Windows, macOS y Web
Diseña para el modo de alto contraste en Windows, macOS y la web. Aprende CSS de colores forzados, palabras clave de colores del sistema, estrategias de prueba y errores comunes a evitar.
Actualizado Nov 06, 2025
Cómo Funcionan los Códigos de Color Hex: La Guía Completa
Domina los códigos de color hex desde cero. Aprende qué significa #RRGGBB, cómo leer cualquier valor hex, notación abreviada, transparencia alfa y cómo convertir entre formatos.
Actualizado Oct 29, 2025
Color en el Arte Generativo: Algoritmos para Paletas Hermosas
Crea color hermoso en arte generativo con espirales HSL, paletas basadas en ruido, muestreo por razón áurea y algoritmos de color en p5.js para estética procedural.
Actualizado Oct 26, 2025
Tematización dinámica de color en React: más allá de las variables CSS
Implementa tematización dinámica de color en React usando variables CSS, proveedores de contexto y Tailwind CSS. Construye temas personalizables por el usuario con generación de color en tiempo de ejecución.
Actualizado Oct 23, 2025
El Sistema de Igualación Pantone Explicado: Guía para Diseñadores
Aprende cómo funciona el Sistema de Igualación Pantone, la diferencia entre los libros revestidos y sin revestir, colores especiales vs. de proceso, y los límites de la conversión de Pantone a hex.
Actualizado Oct 19, 2025
Accesibilidad más allá del contraste: el color en el diseño inclusivo
La accesibilidad del color va más allá de las relaciones de contraste. Aprende el principio 'no solo por color' de WCAG, los indicadores de foco, los estados de error y los patrones accesibles para personas con daltonismo.
Actualizado Oct 17, 2025
Colores en Serigrafía: Una Guía para Diseñadores
Domina las técnicas de color en serigrafía: separación de colores, tramas de medios tonos, tintas de color directo y preparación de diseños para materiales serigráficos.
Actualizado Oct 14, 2025
Interpolación de Color en CSS: Por Qué Gana OKLCH
La interpolación de color en CSS determina cómo los gradientes y color-mix() mezclan colores. Aprende por qué OKLCH produce resultados vívidos y perceptualmente uniformes mientras RGB y HSL fallan.
Actualizado Oct 12, 2025
Lista de verificación de accesibilidad de color para desarrolladores web
Una lista de verificación completa de accesibilidad de color para desarrolladores web que cubre ratios de contraste WCAG, dependencia exclusiva del color, indicadores de foco, herramientas de prueba y verificaciones automatizadas.
Actualizado Oct 07, 2025
Manipulación de colores en JavaScript: librerías y técnicas
Domina la manipulación de colores en JavaScript con chroma.js, culori y tinycolor2. Analiza, transforma y genera colores programáticamente para aplicaciones web.
Actualizado Oct 02, 2025
Color en Animación Web: GSAP, Framer Motion y CSS
Domina la animación de color en transiciones CSS, GSAP y Framer Motion. Aprende interpolación OKLCH, técnicas de keyframes y optimización de rendimiento.
Actualizado Sep 29, 2025
Colores directos vs. colores de proceso: Guía de color para impresión
Comprende la diferencia entre colores directos y colores de proceso CMYK, cuándo usar cada uno, cómo afectan los costos de impresión y cómo preparar archivos correctamente para cada método.
Actualizado Sep 27, 2025
Algoritmos de contraste de color: WCAG 2 vs APCA
Comprende cómo WCAG 2 (luminancia relativa) y APCA (Algoritmo de Contraste Perceptual Avanzado) calculan el contraste. Compara resultados y aprende cuál usar para un diseño accesible.
Actualizado Sep 25, 2025
Sistema de color en SwiftUI: construcción de paletas de color adaptativas
Crea paletas de color adaptativas en SwiftUI. Aprende sobre Color vs UIColor, colores en catálogos de assets, colores dinámicos para modo oscuro y patrones de color accesibles.
Actualizado Sep 19, 2025
Tokens de diseño para color: de Figma al código
Implementa tokens de diseño de color de Figma al código de produccion con Style Dictionary. Aprende nomenclatura de tokens, transformaciones y salida multiplataforma.
Actualizado Sep 12, 2025
Convenciones de Nomenclatura de Color en CSS y Sistemas de Diseño
Explora los colores nombrados de CSS, la nomenclatura semántica con propiedades personalizadas, la nomenclatura por escala al estilo Tailwind y las mejores prácticas para gestionar nombres de color en sistemas de diseño de equipo.
Actualizado Sep 06, 2025
Color en el Diseño de Email: Lo que Funciona en Cada Cliente
Domina el uso del color en emails para Outlook, Gmail y Apple Mail. Aprende estrategias seguras, soluciones para modo oscuro y requisitos de estilos en línea para resultados consistentes.
Actualizado Sep 05, 2025
Temas de Color en React: Variables CSS y Context
Construye temas de color escalables en React usando propiedades CSS personalizadas y la API Context. Cubre arquitectura de temas, temas de Tailwind CSS y estrategias multimarca.
Actualizado Sep 03, 2025
Rendimiento del Color en la Web: Degradados, Sombras y Filtros
Optimiza el rendimiento del color en la web. Aprende cómo los degradados, box-shadows, filtros CSS y backdrop-filter afectan el rendimiento de renderizado y cómo acelerarlos con GPU.
Actualizado Sep 01, 2025
Color responsivo: adaptando los colores para diferentes pantallas
Aprende cómo los colores cambian según la pantalla, el gamut de color y el modo oscuro. Usa media queries CSS y propiedades personalizadas para construir sistemas de color responsivos en cualquier pantalla.
Actualizado Ago 31, 2025
Combinaciones de Color en Señalización para Máxima Visibilidad
Aprende las combinaciones de color más visibles en señalización, investigaciones sobre legibilidad a distancia, requisitos ADA, consideraciones para LED y cómo los materiales y la iluminación afectan la percepción del color.
Actualizado Ago 30, 2025
Cómo elegir colores de marca: una guía paso a paso
Una guía paso a paso para elegir colores de marca que resuenen con tu audiencia. Cubre investigación, análisis del sector, psicología del color, prueba de combinaciones y documentación de directrices de marca.
Actualizado Ago 29, 2025