Esquemas de color

Funciones

• Siete armonías: monocromática, análoga, complementaria, complementaria partida, tríada, tétrada y con neutros como base
• ⚠️ También genera paletas aleatorias con nueve temas: suave, vivo, oscuro, claro, cálido, frío, neón, tierra y monocromo. Los rangos de cada tema (saturación y luminosidad) están escritos en la propia opción, así que no es un algoritmo opaco
• Los tonos aleatorios se reparten por igual, no se sortean por separado: los sorteos independientes chocan con facilidad en dos bloques casi idénticos, que es justo lo que se le reprocha a las paletas aleatorias
• No hay duplicados dentro de un mismo lote, y la luminosidad alterna entre dos bandas para que los bloques no se fundan unos con otros
• Cualquier color base recalcula todo el conjunto; la forma corta (#36f) y la larga funcionan igual
• Una muestra en cada color: una fila de códigos hexadecimales aporta casi nada
• El hex de cada color, copiable fila a fila
• Cada esquema dice cuándo usarlo, y qué cuesta
• Además, las proporciones de área 60 / 30 / 10: con proporciones equivocadas se nota más que con colores equivocados
• Los neutros son grises teñidos con el tono base, para que la página se lea como una sola paleta y no como bloques sobre un fondo
• Indica si sobre el color base se lee mejor en negro o en blanco, con la relación de contraste WCAG
• Los colores base habituales están en un desplegable con búsqueda: elige uno y calcula
• Vacío usa un color base por defecto como ejemplo, así que la primera pantalla nunca queda en blanco
• Tolerancia al pegado: las comillas y los caracteres de ancho completo no rompen el cálculo
• Todo se calcula en tu navegador; el valor que escribes no se sube

Cómo se usa

1. Escribe un color base como #3366ff, o abre el desplegable y elige uno habitual
2. El resultado lista siete armonías por grupos, cada color con su muestra y su valor
3. Cada grupo termina con una línea sobre cómo usarlo y qué cuesta
4. El último grupo da las proporciones 60 / 30 / 10, que dicen cuánta área debería ocupar cada color

Preguntas frecuentes

¿Por qué estos esquemas no se parecen a los que esperaba?

Porque un esquema depende por completo del color que has escrito. La misma «complementaria» da un par totalmente distinto sobre rojo que sobre azul, y esa es justo la diferencia entre calcular armonías y reunir paletas. Una colección te da la elección ya hecha por otro; esto la deriva de tu color. Si quieres ver un efecto concreto, escribe ese color y vuelve a calcular.

¿De dónde vienen los nombres (monocromática, tríada…)?

Son conocimiento compartido de la teoría del color, que describe relaciones angulares en el círculo cromático: 30° de separación es análoga, 180° es complementaria y dividir el círculo en tercios da una tríada. Este vocabulario quedó fijado en los escritos de Itten sobre el color y en teoría del color anterior: no pertenece a nadie y no necesita atribución. La herramienta solo aplica esas relaciones a tu color base.

¿Puedo usar los colores resultantes directamente en un diseño?

Como punto de partida sí; copiados tal cual, no. Lo que garantiza es que las relaciones son correctas (ángulos de tono, estructura de claro a oscuro). No garantiza encaje con la marca, accesibilidad ni contexto. Hay dos cosas que conviene revisar uno mismo: la accesibilidad, es decir, que el texto corrido frente a su fondo alcance el 4,5:1 de WCAG —la herramienta da el contraste negro/blanco del color base, pero los demás pares corren de tu cuenta—; y la imprenta, donde los valores RGB que ves no coincidirán con lo que salga de la máquina. Para cualquier cosa que se fabrique, ajusta con una carta de color física.

¿Qué es 60 / 30 / 10?

Una proporción de áreas: los neutros (fondo, texto, bordes) ocupan aproximadamente el 60%, el color base el 30% y el color de acento el 10%. Es la regla más citada y más ignorada del color web: elige colores perfectos, equivoca las áreas y la página seguirá viéndose mal. El fallo clásico es inundar la página con el color base: las áreas grandes de alta saturación cansan y, sin espacio, no hay jerarquía. De ahí un grupo que pone las tres áreas junto a sus valores reales.

¿Por qué los neutros no son gris puro?

Porque están teñidos con el tono base. Un gris puro junto a un color vivo hace que la página se lea como «un fondo más unos bloques de color»; añade un rastro del tono base a los grises y el fondo, los bordes y el texto secundario parecerán de la misma familia que el color base, y la página se sostendrá como un todo. Es también la razón de que muchos sistemas de diseño traigan dos juegos de neutros, cálido y frío: cada uno está pensado para convivir con colores de marca cálidos o fríos.