Conversió de Color
#ff69b4
Variacions
L'objectiu d'aquesta secció és produir amb precisió tons (blanc pur afegit) i ombres (negre pur afegit) del teu color seleccionat en increments del 10%.
Consell Pro: Utilitza ombres per a estats de pas del ratolí i ombres, tons per a ressaltats i fons.
Ombres
Variacions més fosques creades afegint negre al teu color base.
Tons
Variacions més clares creades afegint blanc al teu color base.
Usos Comuns
- • Estats de components UI (pas del ratolí, actiu, desactivat)
- • Crear profunditat amb ombres i ressaltats
- • Construir sistemes de color consistents
Consell de Sistema de Disseny
Aquestes variacions formen la base d'una paleta de colors cohesionada. Exporta-les per mantenir la consistència a tot el teu projecte.
Combinacions de colors
Cada harmonia té el seu propi estat d'ànim. Utilitza harmonies per generar idees de combinacions de colors que funcionin bé juntes.
Com utilitzar
Fes clic a qualsevol color per copiar el seu valor hex. Aquestes combinacions estan matemàticament provades per crear harmonia visual.
Per què és important
Les harmonies de colors creen equilibri i evoquen emocions específiques en els teus dissenys.
Complement
Un color i el seu oposat a la roda de colors, +180 graus de to. Alt contrast.
Complementari dividit
Un color i dos adjacents al seu complement, +/-30 graus de to des del valor oposat al color principal. Audaç com un complement directe, però més versàtil.
Triàdic
Tres colors espaiats uniformement al llarg de la roda de colors, cadascun a 120 graus de to. És millor permetre que un color domini i utilitzar els altres com a accents.
Anàleg
Tres colors de la mateixa luminància i saturació amb tons adjacents a la roda de colors, a 30 graus de distància. Transicions suaus.
Monocromàtic
Tres colors del mateix to amb valors de luminància +/-50%. Subtil i refinat.
Tetràdic
Dos conjunts de colors complementaris, separats per 60 graus de to.
Principis de la teoria del color
Equilibri
Utilitza un color dominant, recolza amb secundaris i accentua amb moderació.
Contrast
Assegura un contrast suficient per a la llegibilitat i l'accessibilitat.
Harmonia
Els colors han de treballar junts per crear una experiència visual unificada.
Verificador de contrast de color
Prova combinacions de colors per assegurar-te que compleixen els estàndards d'accessibilitat WCAG per a la llegibilitat del text.
Color del text
Color de fons
Contrast
Estàndards WCAG
Verificador de contrast avançat
Ajusta amb precisió amb lliscadors, múltiples previsualitzacions i més
Tothom és un geni. Però si jutges un peix per la seva capacitat d'enfilar-se a un arbre, viurà tota la seva vida creient que és estúpid.