Lección 5
Flujo de selección de color
Coincide paletas de marca, muestrea colores y publica design tokens.
Mover color del mockup a producción es un flujo de trabajo, no un clic único de cuentagotas.
Paso 1: Ancla en tokens de marca
Empieza desde las escalas primaria, neutra y semántica del design system — no hex aleatorio de un artefacto de compresión de captura.
Si marketing te entregó un PNG, confirma el color contra el PDF de marca oficial o la biblioteca Figma antes de codificar.
Paso 2: Muestrea con cuidado
Los cuentagotas del navegador leen un píxel. Bandas JPEG, antialiasing subpíxel y escalado retina pueden mentir.
Muestra una región de relleno plano, o lee valores directamente del archivo de diseño. Al muestrear un sitio en vivo, desactiva zoom y comprueba variantes claro/oscuro por separado.
Paso 3: Convierte y registra todas las vistas
Almacena hex canónico (u OKLCH) en tokens, luego deriva:
- RGB para APIs canvas/gráficos
- HSL para generadores de tema
- Pares de texto con contraste seguro documentados junto a fondos
Un conversor mantiene los números consistentes cuando los diseñadores piden «el mismo azul en HSL».
Paso 4: Verifica contraste y estados
Para cada componente interactivo, comprueba pares por defecto, hover, focus y deshabilitado. Los anillos de focus suelen necesitar un tercer color que siga pasando contraste sobre rellenos por defecto y hover.
Captura ratios fallidos en el ticket de revisión — no solo «se ve bien en mi portátil».
Paso 5: Publica como variables CSS
:root {
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-on-primary: #ffffff;
}
Los componentes referencian nombres semánticos (--color-on-primary), no hex en bruto esparcidos en módulos.
Lista de comprobación de entrega
| Elemento | Hecho cuando |
|---|---|
| Nombre de token acordado | Diseño + eng usan el mismo --color-* |
| Contraste documentado | AA cumplido para pares de texto |
| Modo oscuro | Tabla separada o overrides listados |
| Superficies no CSS | Hex email/PDF exportado |
Conclusión clave
Trata las herramientas de cuentagotas como instrumentos de medición en un pipeline documentado — muestrea, convierte, verifica contraste, publica tokens. Así los equipos evitan que #2563EB se convierta en cinco azules ligeramente distintos en producción.