Escalas de color y paletas de UI: la guía práctica
Una escala de color es una serie de pasos ordenados —numerados por convención del 50 al 900— generados a partir de un solo color semilla, de modo que toda una paleta se deriva de un puñado de decisiones en lugar de decenas de valores elegidos a mano. La escala es al color lo que una escala tipográfica es a los tamaños de fuente: un sistema pequeño que responde la mayoría de las preguntas antes de que se planteen. Este hub reúne nuestras guías sobre cómo construirlas y usarlas; la orientación más rápida es abrir una rampa completa y ver su anatomía.
Un color de entrada, un sistema de salida
El método de trabajo detrás de cada guía de aquí: eliges un color de marca y la maquinaria hace el resto: diez pasos colocados sobre una curva de luminosidad, la saturación modelada para que el centro brille y los extremos sigan siendo utilizables, una escala de neutros teñida levemente hacia el tono de la marca y colores funcionales para éxito, advertencia, error e información. Lo que antes eran cuarenta valores hex elegidos a mano se convierte en un puñado de semillas y un conjunto de reglas que puedes inspeccionar.
Deja de elegir colores a mano defiende trabajar así, y Generar una paleta completa a partir de un solo color de marca recorre la derivación de principio a fin. Las dos reglas que hacen la mayor parte del trabajo tienen cada una su propia guía: Curvas de luminosidad sobre por qué unos pasos que parecen uniformes no pueden ser numéricamente lineales, y Perfiles de croma sobre dónde debe alcanzar su pico la saturación y por qué debe atenuarse hacia ambos extremos. Construir una escala de neutros cubre ese leve tinte de marca que evita que los grises se vean apagados. Este es también el método que implementa Scale Composer: allí la paleta convive con la tipografía y la rejilla, las tres derivadas de una misma escala compartida.
Los pasos son el vocabulario
La numeración 50–900 no es decoración: es lo que hace que el color se pueda discutir. «Usa brand-100 para el tinte y brand-700 para el texto» es una instrucción que dos personas pueden ejecutar de forma idéntica. Las guías siguientes cubren qué significan los números, cuántos pasos necesita una escala y por qué la diferencia entre pasos vecinos tiene que seguir siendo visible: una escala cuyos pasos no se distinguen entre sí es un vocabulario con sinónimos que nadie pidió.
Por qué los pasos de color se llaman 50–900 rastrea la convención y el margen que sus huecos dejan a propósito, y Nombrar los tokens de color resuelve la cuestión de brand-600 frente a blue-600: la elección de nombres que decide cuán doloroso será un futuro cambio de marca. El vocabulario también se gana su sitio en los estados de interacción: Estados hover y pressed muestra por qué «un paso a lo largo de la escala» produce mejores colores de estado que mezclar negro o blanco con la base.
Roles, no colores
La capa final es semántica: los botones, los bordes, los fondos y el texto no hacen referencia a pasos en bruto, sino a roles que apuntan a pasos, con los requisitos de contraste comprobados allí donde los roles se encuentran. Eso es lo que hace que una paleta sea mantenible: reajusta la semilla y cada rol la sigue, porque nada aguas abajo fijó nunca un valor hex a fuego. Primario, secundario, acento cubre la capa de roles para los colores de marca, Éxito, advertencia, error, información cubre los colores de retroalimentación, y Texto sobre botones de color resuelve el emparejamiento que envía todo producto: elegir el color de encima. El modelo de color que hace todo esto computable tiene su propia serie en la guía de OKLCH, y el mismo razonamiento de roles recorre los design tokens; los umbrales contra los que se comprueban los pares de roles viven en el hub de contraste.
Guías de este hub
- ¿Qué es una rampa de color (escala de color)?
Qué es una rampa de color — un tono en diez pasos ordenados de luminosidad — más la anatomía: qué pasos hacen qué trabajos de UI, y por qué las rampas superan a elegir muestras sueltas.
- Cómo crear una escala de neutros que no parezca gris muerto
Una escala de color neutro es el caballo de batalla de la UI: fondos, bordes, estados deshabilitados, texto. Diez pasos de gris asignados a funciones, con notas de contraste y modo oscuro.
- Curvas de luminosidad: por qué las rampas lineales se ven mal
La luminosidad de una escala de color no puede dividirse por igual: por qué las rampas lineales dejan famélico el extremo claro y cómo una curva por tramos ligada a la razón tipográfica espacia los pasos.
- De los estilos de color de Figma a tokens reales
De los estilos de color de Figma a los tokens: qué resuelve cada uno —estilos y variables—, cómo se superponen las colecciones primitiva y semántica, y el modo oscuro como un cambio de modo.
- Deja de elegir colores a mano: el método escala-primero
Cómo elegir colores de interfaz sin elegir cada uno a mano: fija una vez una semilla, los extremos, la curva y el perfil, y deja que cada valor se derive de las reglas.
- Derivar colores de apoyo a partir de un primario (armonía de color)
Cómo un generador de armonía de color deriva colores de apoyo a partir de un primario: por qué los complementarios clásicos vibran en la UI y por qué los desplazamientos prácticos los flanquean.
- Estados hover y pulsado: derivarlos de la escala
El color hover de botón bien hecho: los estados hover y pulsado son pasos vecinos en la escala de color, no filtros de opacidad — trabajado paso a paso en OKLCH.
- Éxito, advertencia, error, info: colores funcionales bien hechos
Los colores semánticos en la UI — éxito, advertencia, error, info — son rampas, no muestras. Afinar tono, croma y luminosidad para que los cuatro se sientan nativos y pasen el contraste.
- Generar una paleta completa a partir de un solo color de marca
Derivar una paleta completa solo a partir del color de marca: rampa semilla, neutros tintados, tonos de apoyo desde la geometría de tonos, colores funcionales y roles verificados por contraste.
- Migrar una paleta heredada a escalas de color
Cómo refactorizar una paleta de color que creció por accidente: inventaría la maraña de hex, agrupa los valores por rol, siembra rampas nuevas y mapea cada valor heredado.
- Nombrar tokens de color: brand-600 vs blue-600
Nombrar tokens de color en tres capas: por qué brand-600 le gana a blue-600 en el nivel primitivo, qué añaden los tokens semánticos y cuándo una capa de componente se gana su lugar.
- Perfiles de croma: dónde debe alcanzar su pico la saturación
La saturación de una rampa de color necesita un plan, no una constante: dónde debe alcanzar su pico el croma, comparación entre perfiles de campana y frontal, y el suelo que mantiene los extremos de la rampa fieles a la marca.
- Por qué la máxima saturación es contraproducente en la UI
Por qué los colores saturados son contraproducentes en la UI: bordes que vibran y fatiga visual, jerarquía aplanada, texto más difícil de leer — y dónde el croma pleno sí se gana su lugar.
- Por qué los pasos de color se numeran de 50 a 900
Los números de la escala de color explicados: de dónde viene el 50–900, por qué los números superan a nombres como claro y más claro, y por qué un 500 es una posición, no una medida.
- Primario, secundario, acento: color basado en roles
Primario, secundario y acento son roles, no tipos de color: qué hace cada rol, cuándo una paleta necesita secundarios y cómo derivarlos bien.
- Probar una paleta para el daltonismo
Cómo probar una paleta para daltonismo: simula protanopía, deuteranopía y tritanopía, encuentra los pares de tonos que colapsan y corrígelos con luminosidad.
- Texto en botones de color: cómo elegir el on-color
El contraste del color de texto en botones se mide contra el relleno, no contra la página — por qué las marcas de luminosidad media atrapan tanto el texto blanco como el negro, y cómo se deriva el on-color.
Mira un cambio de marca en un solo movimiento
El argumento más fuerte a favor de las escalas frente a las muestras sueltas es ver cómo un sistema se reajusta: cambia el color semilla y observa cómo todo se vuelve a derivar: las rampas, los neutros y las relaciones de contraste de cada paso se reconstruyen a partir de la nueva semilla en un solo movimiento. Eso, comprimido en una frase, es lo que enseña todo este hub: elige los colores una vez, derívalos para siempre.