Lección 1
Modelos de color para desarrolladores
Por qué una muestra tiene muchas notaciones y cómo interpretan los valores las pantallas.
El color en pantallas son números interpretados como luz. Los desarrolladores rara vez «ven» el color directamente — manipulan valores en CSS, SVG, design tokens y payloads de API.
Mismo color, muchas cadenas
Estos pueden describir el mismo color sRGB:
#2563EBrgb(37, 99, 235)hsl(221, 83%, 53%)
Las herramientas de diseño, navegadores y hojas de cálculo eligen formatos por defecto distintos. La conversión es trabajo rutinario, no un truco de una sola vez.
Canales y gama
La mayoría del trabajo de UI usa sRGB — tres canales (rojo, verde, azul) cada uno de 0–255 (o 0–100% en algunas funciones). Las pantallas de gama amplia (P3) pueden mostrar colores más vivos de los que el hex sRGB puede nombrar; eso importa más en sitios de marketing que en paneles de administración internos.
Para UI de producto típica, sRGB + tokens consistentes supera perseguir gamas exóticas sin pipeline.
Percepción vs medición
Los humanos juzgan el brillo de forma no lineal. Dos colores con promedio RGB igual pueden parecer distintos en claridad. Por eso existen HSL y Lab — separan tono/claridad para ajustes de diseño.
Los desarrolladores siguen publicando hex/rgb en CSS; HSL ayuda cuando necesitas «mismo tono, estado hover ligeramente más oscuro».
La opacidad es un canal aparte
Alpha controla transparencia. #2563EB es opaco; rgba(37, 99, 235, 0.5) es el mismo RGB al 50% de opacidad sobre lo que haya detrás.
Las comprobaciones de contraste deben usar colores compuestos sobre fondos reales — no la muestra sola sobre blanco.
Dónde aparece el color en el código
- Propiedades personalizadas CSS (
--color-primary) - Configuración de tema Tailwind
- Bibliotecas de gráficos y badges de estado
- Plantillas PDF/email con soporte CSS limitado
Conclusión clave
Trata el color como datos estructurados con múltiples vistas (HEX/RGB/HSL). Elige una fuente de verdad para tu design system y convierte para herramientas y plataformas.