Saltar al contenido
Toolars
Explorar
Informar de un error

Diseño · utilidad Local

Generador de armonías de color

Color Harmony Builder

Genera paletas de cinco colores desde una semilla con seis reglas de armonía y contraste 3:1, 4.5:1 o 7:1, y expórtalas en CSS o JSON. Sin IA.

Ruta de la tarea / de la entrada al resultado

Define el color semilla

Funciona en local · No se sube nada

Cómo funciona Generador de armonías de color, privacidad y herramientas relacionadas

Ruta de la tarea / de la entrada al resultado

Cómo construir una armonía de cinco colores

  1. 01

    Define el color semilla

    Escribe un valor hexadecimal de seis dígitos en HEX de la semilla — el prefijo # es opcional — o elige el color visualmente con Selector de semilla. Los dos campos permanecen sincronizados, y el espacio de trabajo abre con la semilla #5D4DF1.

  2. 02

    Elige la regla de armonía

    Elige Análoga, Complementaria, Complementaria dividida, Tríada, Tétrada o Monocromática. El motor aplica desplazamientos de tono fijos y después fija la muestra central en el color semilla exacto; las demás no siempre caen en los ángulos teóricos. Monocromática conserva el tono y varía saturación y luminosidad.

  3. 03

    Define el objetivo de contraste

    Elige un Objetivo de contraste del texto: 3:1 para texto grande, 4.5:1 para texto corporal AA o 7:1 para texto corporal AAA; el valor por defecto es 4.5:1. Cada muestra se mide contra el negro o el blanco, lo que se lea mejor sobre ella.

  4. 04

    Genera la paleta

    Pulsa Generar paleta. Aparecen cinco muestras, y la del centro es siempre tu color semilla exacto: las otras cuatro desplazan tono, saturación y luminosidad a su alrededor dentro de rangos limitados, de modo que la rampa sigue siendo utilizable en lugar de derivar hacia el neón o el barro.

  5. 05

    Lee las insignias de contraste

    Cada muestra muestra su valor hexadecimal, su proporción de contraste y una insignia Aprobado o Bajo el objetivo, con el texto de la muestra renderizado en negro o blanco: el color que ganó la comparación de contraste. Una insignia Bajo el objetivo significa elegir un vecino más oscuro o más claro para el texto, no que el color esté roto.

  6. 06

    Copia el CSS o descarga el JSON

    Copiar CSS copia un bloque :root comentado con las propiedades personalizadas --palette-1 a --palette-5. Descargar JSON guarda toolars-palette.json, que registra la semilla, la armonía, el objetivo de contraste y los datos de contraste de cada color junto a los campos explícitos aiModel y api puestos a null.

Datos de la herramienta

Procesamiento
En tu navegador
La entrada sale del dispositivo
Nunca
Retención
No se guarda nada
Precio
Gratis

Tus datos se quedan en el navegador.

Generador de armonías de color usa su ruta de ejecución local verificada y no crea un historial oculto de entradas ni salidas.

Ejecución local

Se ejecuta dentro de la pestaña actual del navegador.

Sin procesamiento oculto

Los datos activos de la herramienta nunca se convierten en un registro de documento de Toolars.

No se necesita cuenta

Usa el flujo de trabajo principal sin crear un perfil. Los favoritos se sincronizan con tu cuenta después de iniciar sesión.

Restablecimiento inmediato

Limpia la pestaña y los datos de trabajo activos desaparecen.

Qué hace Generador de armonías de color en realidad

Un proyecto personal necesita una paleta que parezca deliberada y no aleatoria: un color primario, sus tonos de apoyo y la prueba de que el texto sigue siendo legible sobre cada uno. Elegir armonías a ojo deriva con cada revisión, así que Generador de armonías de color aplica una regla fija a tu semilla y muestra el cálculo de contraste junto a cada muestra. El motor es determinista: la misma semilla y la misma regla devuelven siempre los mismos cinco colores, así que un compañero puede reproducir la paleta con exactitud. Toda la ejecución funciona sin red, y las exportaciones entran directamente en una hoja de estilos o en un archivo de tokens de diseño.

Preguntas frecuentes

¿La paleta la genera una IA?
No, y el espacio de trabajo lo declara sobre los controles: es un motor de armonía local y determinista sin modelo ni API de IA. La misma semilla y la misma regla producen siempre los mismos cinco colores, de modo que el resultado es reproducible en una revisión de diseño.
¿Qué valores de semilla se aceptan?
Un color hexadecimal de seis dígitos como #5D4DF1, con o sin el # inicial. La abreviatura de tres dígitos y otras notaciones se rechazan con un mensaje que indica el formato esperado, y el selector de color siempre produce una semilla válida.
¿Por qué la muestra central coincide exactamente con mi semilla?
Por diseño: la tercera posición de la rampa queda fijada al valor de la semilla para que la paleta permanezca anclada al color que elegiste. Las dos muestras de cada lado se derivan a su alrededor: la regla de armonía mueve el tono, mientras la luminosidad avanza hacia fuera y la saturación decrece hacia los bordes.
¿Cómo se calcula la insignia de contraste?
La proporción de contraste de cada muestra se calcula a partir de la luminancia relativa frente al negro y frente al blanco, y la mejor de las dos se muestra junto al valor hexadecimal. La muestra aprueba cuando esa proporción alcanza tu objetivo elegido: 3:1, 4.5:1 o 7:1.
¿Qué contienen exactamente las dos exportaciones?
Copiar CSS da un bloque :root con --palette-1 a --palette-5 bajo un comentario que nombra la armonía y la semilla. La descarga JSON registra el nombre del motor, los campos aiModel y api puestos a null, tu semilla, la armonía y el objetivo de contraste, y cada color con su hexadecimal, el color de texto ganador, la proporción de contraste y la marca de aprobado. CSS también exporta --palette-N-text para cada muestra; JSON conserva el contraste sin redondear.
¿Algo sale de mi navegador?
No. El panel está marcado explícitamente como Sin red: la semilla, los colores generados y las exportaciones permanecen en esta pestaña, y no se necesita cuenta.

Sigue leyendo

Continuar en Diseño

Tareas relacionadas, no un callejón sin salida.

Pasa a otro espacio de trabajo enfocado sin volver al índice completo.

Generador de animaciones de carga CSS

CSS Loader Generator

Diseña un anillo orbital o tres puntos que rebotan con marco, trazo, velocidad y colores ajustables, y copia el CSS con @keyframes y reduced-motion.

Crear

Generador de casillas CSS

CSS Checkbox Generator

Diseña casillas personalizadas sobre un input real —con estados de foco y desactivado incluidos— y copia el CSS con tus colores y su transición.

Crear

Generador de interruptores CSS

CSS Switch Generator

Diseña interruptores de CSS puro con pista, deslizador y colores de ambos estados ajustables, y copia el código con foco accesible y reduced-motion.

Crear

Generador de clip-path CSS

CSS Clip Path Generator

Edita polígonos arrastrando, con el teclado o mediante coordenadas. Usa cuatro formas predefinidas y copia una declaración clip-path o CSS completo de forma local.

Crear