La vista Color
Parte de un color de marca y la vista Color deriva el resto: una rampa OKLCH completa, una escala de neutros teñida por la marca, los cuatro colores funcionales y los roles semánticos que tu CSS realmente usa —con mínimos de contraste WCAG aplicados mientras trabajas.
La barra de herramientas
- Pasos — cuántos valores obtiene cada rampa (la familiar 50–900 tiene diez). La luminosidad de cada paso sigue una curva definida por la razón de la escala global, de modo que la progresión de color y la progresión tipográfica comparten un esqueleto.
- Curva de croma — cómo se distribuye la saturación a lo largo de la rampa (la campana mantiene vivos los valores medios y calmados los extremos).
- Nivel WCAG — el mínimo de contraste (AA o AAA) que la derivación semántica debe respetar.
- Oscuro — genera la variante oscura de cada rampa como su propia derivación, con su propia curva de luminosidad y un ligero refuerzo de croma —no una inversión del tema claro.
- Avanzado — divulgación progresiva para los controles más finos (desplazamiento de tono por rampa, multiplicador de croma, mínimo de luminosidad, gama P3). Un punto en el botón indica cuándo algo ahí dentro se desvía de los valores por defecto.
Rampas y roles
Cada paleta es una tarjeta: la semilla arriba, los pasos derivados debajo, con valores hex y etiquetas de paso. La herramienta avisa cuando dos pasos adyacentes son demasiado parecidos para distinguirse —una comprobación de diferencia apenas perceptible (JND), no una opinión estética.
Las paletas se agrupan por rol, y la agrupación es una convención que la herramienta impone, no una sugerencia:
- Marca — exactamente una; la semilla a la que responde todo lo demás.
- Secundario — tantas como quieras; el «+» vive aquí.
- Neutro — exactamente una, teñida por el tono de marca para que los grises pertenezcan a la familia.
- Funcional — exactamente cuatro: danger, warning, success, info. El conjunto fijo es la clave —estos nombres son los que espera el código posterior.
Anclas de página y modo oscuro
Las dos anclas definen el fondo de la página en claro y oscuro. El ancla oscura sigue automáticamente el paso de marca más oscuro —«la noche está teñida por la marca»— hasta que rompes el vínculo deliberadamente con una elección personalizada; un botón de revincular lo restaura.
La barra lateral
Selecciona cualquier muestra y la barra lateral la inspecciona: componentes OKLCH, hex, contraste frente a ambas anclas (la razón WCAG y el Lc de APCA lado a lado) y sugerencias de armonía derivadas de la semilla —un tono profundo, un contra-tono, un acero, un matiz—, cada una a un clic de convertirse en una paleta secundaria.
La simulación de deficiencias de la visión (protanopía, deuteranopía, tritanopía) renderiza todo el lienzo a través de las matrices correspondientes —una comprobación, presentada sin juicio.
Teoría
La sección de aprendizaje cubre las ideas en profundidad: OKLCH · escalas de color · contraste · modo oscuro · sistemas de color de marca.