Respuesta directa
Un constructor de sistema de color transforma colores de marca inmutables en escalas primitivas 50–950 y asignaciones semánticas claro/oscuro editables en el navegador local sin enviar datos a servidores.
Cómo usar esta herramienta
Introduce los colores de origen
Pega valores HEX, oklch() o color(display-p3 …) y asigna cada color a Primary, Neutral u otra familia con un anclaje 400/500/600.
Crea el proyecto
Genera las escalas requeridas de Primary y Neutral, escalas de estado y asignaciones semánticas sin alterar los anclajes bloqueados.
Edita y previsualiza
Ajusta niveles de escala o asignaciones semánticas y revisa botones, tarjetas, formularios y estados en modo claro y oscuro.
Anclajes inmutables y capas semánticas
Los colores de origen permanecen como anclajes exactos en el nivel de escala elegido. Las escalas primitivas contienen pasos de 50 a 950 por familia. Los roles semánticos (fondo, superficie, texto, primario, texto en primario, borde, foco y estado) hacen referencia a las primitivas por separado para temas claros y oscuros, desacoplando el significado de la implementación de las muestras sin procesar.
- Las entradas con var() sin resolver, sintaxis de color relativo o color-mix() se rechazan con errores claros y accionables.
- Las escalas Primary y Neutral son obligatorias; Secondary y Accent son opcionales; Success, Warning y Destructive siempre están presentes.
- Todo el procesamiento y generación se ejecuta del lado del cliente con autoguardado local, sin cuentas ni cargas.
Ejemplos prácticos
Sistema primario con azul de marca
Entrada: Origen: #2563eb como Primary @ 500
Salida: Escala Primary 50–950 + roles claro/oscuro (primary, on-primary, focus) listos para el verificador
Crea un documento de entrega completo a partir de un solo color de marca sin inventar páginas de conversión fragmentadas.
Limitaciones
- No inventa valores para variables CSS no resueltas ni color-mix(); introduce valores concretos de CSS Color 4.
- Las recomendaciones estéticas de escala son guías heurísticas, no una certificación legal de conformidad.
Preguntas frecuentes
¿Puedo continuar al verificador sin exportar antes?
Sí. El Tool Island compartido mantiene el mismo documento en memoria, lo que permite cambiar de etapa sin recargas ni pérdida de estado.
¿El constructor sube mis colores a algún servidor?
No. Los colores, escalas y archivos de proyecto se quedan en la memoria y el almacenamiento local del navegador. Nada se envía a servidores externos.
¿Cómo funciona la navegación por teclado entre etapas?
Usa las pestañas de etapa para alternar entre constructor, verificador y generador de tokens. El foco permanece visible y la URL canónica no cambia.
Referencias y normas autorizadas
- W3C CSS Color Module Level 4 ↗ — Authoritative syntax for HEX, rgb(), hsl(), oklch(), and color(display-p3 …).
- W3C Web Content Accessibility Guidelines (WCAG) 2.2 ↗ — Accessibility baseline referenced when Builder previews contrast-sensitive semantic roles.