Generador d'harmonies de colors
Detalls tècnics
Com funciona el generador d’harmonies de color
Què fa l’eina
El generador d’harmonies de color calcula conjunts de colors relacionats matemàticament a partir d’un únic to base: complementari, anàleg, triàdic, tetràdic, quadrat, complementari dividit, monocromàtic i ombres. Cada paleta es representa amb valors HEX, RGB i HSL que pots copiar amb un clic i utilitzar directament a CSS o en tokens de disseny.
Casos d’ús habituals per a desenvolupadors
Els dissenyadors prototipen paletes de marca explorant com evoluciona un to de marca sota diferents regles d’harmonia. Els desenvolupadors frontend generen colors d’accent per a botons, alertes i insígnies a partir d’un color principal de marca. Els enginyers de visualització de dades trien conjunts de colors categòrics que semblen intencionats però continuen sent distingibles. Els product managers comparen opcions de paleta quan revisen propostes de disseny sense necessitat d’eines de disseny dedicades.
Formats, tipus o variants de dades
Hi ha vuit esquemes disponibles: Complementari (base + 180°), Anàleg (base ± 30°), Triàdic (3 colors separats 120°), Tetràdic (rectangular de 4 colors), Quadrat (4 colors separats 90°), Complementari dividit (base + ±150°), Monocromàtic (mateix to amb lluminositat variable 10–90%) i Ombres (mateix to, de fosc a clar). Cada color inclou les seves representacions HEX, RGB i HSL, juntament amb una etiqueta de rol.
Errors habituals i casos límit
Les harmonies derivades de colors base extremadament desaturats o gairebé en escala de grisos es veuen indistinguibles entre esquemes — comença amb una base saturada. Les bases molt saturades combinades amb esquemes triàdics o tetràdics poden produir paletes estridents i difícils d’equilibrar; considera reduir la saturació per a l’ús en UI. Algunes combinacions derivades de les harmonies no compleixen el contrast WCAG — verifica sempre les parelles text/fons a l’eina de contrast de color abans de publicar.
Quan utilitzar aquesta eina vs codi
Utilitza l’eina del navegador per a ideació, exploració ràpida i revisió de disseny. En codi, biblioteques com chroma.js, colord o culori et permeten calcular harmonies de manera programàtica, integrar-les en canals de build de tokens de disseny i combinar les matemàtiques d’harmonia amb espais de color perceptualment uniformes com Oklch per obtenir paletes d’aspecte més uniforme.