Xerador de paletas de cores

Escolle unha cor base e propoñémosche cores que combinan con ela segundo a teoría da cor, ademais dunha escala completa de tons claros e escuros (do 50 ao 950) para usar na túa web ou aplicación.

Cor base

Cores que combinan

Escala de tons

Preme nunha cor para copiar o seu código HEX. O punto ● marca o ton no que encaixa a túa cor base.

Harmonías de cor

As harmonías baséanse na posición das cores no círculo cromático. A complementaria usa a cor oposta (180°) e dá o máximo contraste; a análoga, as veciñas (±30° e ±60°), tranquilas e naturais; a triádica, tres cores a 120°; a complementaria dividida, as dúas veciñas da oposta, máis doada de equilibrar; e a tetrádica, catro cores a 90°. A monocromática mantén o ton e varía a luminosidade.

Un consello clásico é a regra 60-30-10: unha cor dominante no 60% do deseño, unha secundaria no 30% e unha cor de acento no 10% restante.

Escala de tons 50-950

Os sistemas de deseño como Tailwind CSS, Material ou Bootstrap usan para cada cor unha escala do 50 (case branco) ao 950 (case negro): os tons claros serven para fondos, os medios para botóns e ligazóns, e os escuros para textos e estados activos.

Calculamos a paleta no espazo de cor OKLCH, que é perceptualmente uniforme: ao xirar o ton ou cambiar a luminosidade, as cores conservan a mesma claridade aparente, algo que non ocorre con HSL (en HSL, un amarelo e un azul coa mesma «luminosidade» vense moi distintos).