Generador de esquemas de color

Cómo se usa

1. En cuanto se abre la página ya hay un esquema y una escala de luminosidad en pantalla, construidos a partir de la base predeterminada #4F46E5 — el primer resultado no necesita ningún clic.
2. Hazlo tuyo: pega #4F46E5, rgb(79, 70, 229), hsl(243, 75%, 59%) o un nombre de color CSS en inglés, usa el selector del sistema o pulsa «Base aleatoria». Todo se recalcula mientras escribes.
3. Elige cómo se relacionan los tonos. La análoga (0°, ±30°, ±60°) se queda en el vecindario; la complementaria (0°, 180°) es el opuesto directo; la triádica (0°, 120°, 240°) y la tetrádica (0°, 90°, 180°, 270°) amplían la dispersión; la complementaria dividida (0°, 150°, 210°) mantiene la tensión sin el choque. La escala es siempre el color base con luminosidad 88 / 70 / 52 / 34 / 18 %, así que «la versión más clara/oscura de mi primario» está a un toque.
4. Toca cualquier muestra para copiar su valor en el formato elegido; «Copiar CSS» da todo el conjunto como propiedades personalizadas en :root, y «Copiar valores» da un valor por línea.

Alcance, límites y preguntas habituales

• Cinco reglas, sin ángulos personalizados y sin rueda de color: si necesitas un tono exacto, define el color base o usa el conversor de colores.
• La escala usa pasos de luminosidad fijos (88 / 70 / 52 / 34 / 18 %) en lugar de «un 25 % más cerca del blanco/negro desde tu color». Eso hace comparable la escala entre colores base distintos, pero una base ya muy clara o muy oscura tendrá pasos que apenas se diferencian de ella.
• Un color base gris, blanco o negro da un esquema totalmente idéntico: rotar el tono de un color completamente desaturado no cambia nada. Esa es la aritmética honesta, no un error.
• Solo colores opacos: sin alfa, sin rgba(), sin HEX de 8 dígitos. La transparencia pertenece al conversor de colores.
• Solo valores de pantalla sRGB: sin CMYK, sin Lab, sin gestión de color — el mismo HEX se ve distinto en pantallas sin calibrar, y esta herramienta no finge lo contrario.
• El contraste solo se usa para decidir si el valor impreso en una muestra es negro o blanco. No se informan ratios de contraste; para comprobar accesibilidad usa el conversor de colores.
• La geometría garantiza las relaciones de tono, no la estética: un par complementario muy saturado puede seguir siendo estridente. Eso es lo que significa la regla.
• «Base aleatoria» toma valores de crypto.getRandomValues de tu navegador — criptográficamente fuerte, no un servicio de entropía física — y se desactiva cuando el navegador no ofrece esa fuente. Todo lo demás sigue funcionando.
• No se sube, guarda ni escribe nada en la URL: recargar vuelve a #4F46E5 + Análoga + HEX, y el botón de compartir solo comparte el enlace de la página. Llévate tu esquema con «Copiar CSS».
• Se aceptan nombres de color CSS en inglés como entrada porque esa es la sintaxis de CSS; no hay salida de nombres de color localizados — el mismo color no tiene un nombre estándar en chino o árabe que imprimir.
• El redondeo es a nivel de presentación: los canales son enteros, así que convertir el mismo color entre HEX y HSL puede desplazar un canal en 1.