Esquema de colores web — tokens CSS semánticos
Genera un esquema de colores web en el navegador. Elige un HEX de marca (verde azulado de ejemplo #0F6E8C), obtén neutros compartidos, action/hover/soft/focus, enlaces neutros, colores de estado fijos, vista previa del chrome y autochequeos AA; luego copia CSS :root o JSON. Basado en reglas — no es IA en la nube; no se sube nada.
Neutros y estados compartidos; cada tema solo sobrescribe tokens derivados de marca. Máx. 4 temas.
| Token | Valor |
|---|
| Token | Valor | Rol |
|---|
Cómo funciona
Añade hasta cuatro temas de marca (id + HEX). Se conserva una escalera neutra compartida, se derivan tokens de acción por marca, se mapean roles semánticos (enlaces neutros y estados fijos), se pinta un chrome claro, se corren autochequeos AA y puedes copiar variables CSS o JSON — todo local.
Reglas que debes esperar
Capas de tokens, enlace ≠ acción, estados independientes, pistas de contraste y privacidad.
- Los primitivos guardan neutros crudos y derivados de marca. La semántica nombra el propósito (bg, surface, link, action…). Los componentes solo deberían referenciar semántica.
- Marca → --action; hover oscurece ~22%; soft ≈ 10% alpha; focus-ring ≈ 40% alpha; --bg es un neutro ligeramente teñido.
- Los enlaces mapean a text / text-strong (neutro). No enlaces el --link por defecto a --action.
- Danger / success / warning / info se mantienen fijos entre temas para que la marca nunca reemplace la semántica de error.
- Privacidad: generación, vista previa y copia al portapapeles ocurren en esta pestaña. No se suben colores de marca.
Ejemplo
Carga el ejemplo (id teal, #0F6E8C). La vista muestra superficie blanca, resalte suave teal en el ítem activo (sin barra izquierda), enlaces de cuerpo neutros y una línea danger en rojo. La semántica mapea --link al color de texto (no a --action). Copiar CSS da neutros en :root más overrides html[data-theme="teal"].
Dónde encaja bien
- Chrome de herramientas o SaaS: un shell claro legible con acentos de marca en selección y foco, no en cada enlace.
- Rebrand de landing: cambia marcas con html[data-theme] y conserva el esqueleto neutro y los estados.
- Entrega diseño→dev: pega variables CSS :root en lugar de listas HEX de capturas.
Frequently asked questions
¿«Inteligente» significa generación con IA?
Aquí «inteligente» significa reglas deterministas: neutros fijos, la marca deriva action/hover/soft/focus, los enlaces siguen neutros y los estados no siguen la marca. Sin llamada a un modelo ni subida — el cálculo corre en esta pestaña.
¿Por qué los enlaces no usan el color de marca?
Los enlaces por defecto usan colores de texto para que la página no se convierta en un muro de hipervínculos de marca. El color de marca queda para acciones, selección, anillos de foco y rellenos soft ligeros.
¿Por qué los colores de estado no cambian con el tema?
Danger, success, warning e info se mantienen fijos entre temas. Una marca ámbar no debe convertirse en el color de error, o toda la UI parece una alerta.
¿Cuándo conviene Generar escala de color de marca?
Usa Generar escala de color de marca cuando necesites una rampa 50–950 o listados HEX/HSL/OKLCH. Esta página entrega un esquema semántico claro completo (bg/surface/link/action/status) listo para pegar.
¿Hasta dónde llega el autochequeo de contraste?
Los autochequeos cubren unos pares clave del tema activo. Para pares arbitrarios o AAA, abre el comprobador de contraste WCAG y pega el HEX de cualquier token.
Related tools
Consultas o comentarios
¿Algo poco claro, roto o que falte? Redacta un mensaje abajo — leemos cada nota sobre estas herramientas.