Generador i selector de codi de color

Genera codis de color, variacions, harmonies i comprova les relacions de contrast.

Conversió de color

HEX

#ca4e4e

Chestnut Rose

HEX
#ca4e4e
HSL
0, 54, 55
RGB
202, 78, 78
XYZ
28, 19, 9
CMYK
0, 61, 61, 21
LUV
50,105,21,
LAB
50, 49, 26
HWB
0, 31, 21

Variacions

L'objectiu d'aquesta secció és produir amb precisió tints (blanc pur afegit) i matisos (negre pur afegit) del color seleccionat en increments del 10%.

Consell professional: Feu servir ombres per als estats de punteig i les ombres, i tints per als punts destacats i els fons.

Ombres

Variacions més fosques creades afegint negre al color base.

Tints

Variacions més clares creades afegint blanc al color base.

Casos d'ús comuns

  • Estats dels components de la interfície d'usuari (en passar el cursor per sobre, actiu, desactivat)
  • Crear profunditat amb ombres i reflexos
  • Creació de sistemes de color consistents

Consell del sistema de disseny

Aquestes variacions formen la base d'una paleta de colors cohesionada. Exporteu-les per mantenir la coherència en tot el projecte.

Combinacions de colors

Cada harmonia té el seu propi ambient. Fes servir harmonies per fer una pluja d'idees sobre combinacions de colors que funcionin bé juntes.

Com utilitzar

Feu clic a qualsevol color per copiar-ne el valor hexadecimal. S'ha demostrat matemàticament que aquestes combinacions creen 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 al cercle cromàtic, +180 graus de tonalitat. Alt contrast.

#ca4e4e
Ideal per a: Dissenys d'alt impacte, crides a l'acció, logotips

Complementari dividit

Un color i dos adjacents al seu complementari, a +/-30 graus de tonalitat respecte al valor oposat al color principal. Atrevit com un complement directe, però més versàtil.

Ideal per a: Dissenys vibrants però equilibrats

Triàdic

Tres colors espaiats uniformement al llarg del cercle cromàtic, cadascun separat per 120 graus de tonalitat. El millor és deixar que un color domini i utilitzar els altres com a accents.

Ideal per a: Dissenys divertits i enèrgics

Anàleg

Tres colors de la mateixa luminància i saturació amb tons adjacents al cercle cromàtic, separats per 30 graus. Transicions suaus.

Ideal per a: Interfícies relaxants inspirades en la natura

monocromàtic

Tres colors del mateix to amb valors de luminància de +/-50%. Subtil i refinat.

Ideal per a: Dissenys minimalistes i sofisticats

Tetràdic

Dos conjunts de colors complementaris, separats per 60 graus de tonalitat.

Ideal per a: Esquemes de colors rics i diversos

Principis de la teoria del color

Equilibri

Feu servir un color dominant, doneu-hi suport amb un color secundari i accentueu-lo amb moderació.

Contrast

Assegureu-vos que hi hagi prou contrast per a la llegibilitat i l'accessibilitat.

Harmonia

Els colors han de treballar conjuntament per crear una experiència visual unificada.

Comprovador de contrast de colors

Proveu les combinacions de colors per assegurar-vos que compleixen els estàndards d'accessibilitat WCAG per a la llegibilitat del text.

Color del text
Color de fons
Contrast
Fail
Text petit
✖︎
Text gran
✖︎
Estàndards WCAG
AA:Relació de contrast mínima de 4,5:1 per a text normal i 3:1 per a text gran. Obligatòria per a la majoria de llocs web.
AAA:Relació de contrast millorada de 7:1 per a text normal i 4,5:1 per a text gran. Recomanat per a una accessibilitat òptima.

Tothom és un geni. Però si jutges un peix per la seva capacitat per pujar a un arbre, viurà tota la seva vida creient que és estúpid.

- Albert Einstein

Formats tècnics

Formats pràctics

Anàlisi del color

Simulador de ceguesa

Aspectes creatius