Paletes De Colors Web

Què són les paletes de colors web?

Els colors són molt importants per als dissenyadors web i dissenyadors gràfics. Els dissenyadors descriuen els colors que descrivim com a blau, vermell i verd a la vida diària amb codis com #fff002, #426215. Independentment del tipus de projecte de codificació que estigueu duent a terme, probablement començareu a treballar amb colors en algun moment. Això serà especialment útil si apreneu a codificar amb HTML, com ho fan molta gent per dissenyar pàgines web.

Què significa el codi hexadecimal en colors?

El codi hexadecimal és una manera de representar un color en format RGB combinant tres valors. Aquests codis de color són una part integral de l'HTML per al disseny web i segueixen sent una forma important de representar els formats de color digitalment.

Els codis de color hexadecimals comencen amb el signe de lliura o hashtag (#) seguit de sis lletres o números. Les dues primeres lletres/nombres corresponen al vermell, les dues següents al verd i les dues darreres al blau. Els valors de color es defineixen en valors entre 00 i FF.

Els números s'utilitzen quan el valor és 1-9. Les lletres s'utilitzen quan el valor és superior a 9. Per exemple:

• A = 10
• B = 11
• C = 12
• D = 13
• E = 14
• F = 15

Codis de colors hexadecimals i equivalents RGB

Memoritzar alguns dels codis de colors hexadecimals més comuns pot ser útil per ajudar-vos a predir millor quins altres colors seran quan vegeu el codi de colors hexadecimal, no només quan vulgueu utilitzar aquests colors exactes.

• Vermell = #FF0000 = RGB (255, 0, 0)
• Verd = #008000 = RGB (1, 128, 0)v
• Blau = #0000FF = RGB (0, 0, 255)
• Blanc = #FFFFFF = RGB (255.255.255)
• Marfil = #FFFFF0 = RGB (255, 255, 240)
• Negre = #000000 = RGB (0, 0, 0)
• Gris = #808080 = RGB (128, 128, 128)
• Plata = #C0C0C0 = RGB (192, 192, 192)
• Groc = #FFFF00 = RGB (255, 255, 0)
• Lila = #800080 = RGB (128, 0, 128)
• Taronja = #FFA500 = RGB (255, 165, 0)
• Borgonya = #800000 = RGB (128, 0, 0)
• Fúcsia = #FF00FF = RGB (255, 0, 255)
• Llima = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Teal = #008080 = RGB (0, 128, 128)
• Oliva = #808000 = RGB (128, 128, 0)
• Blau marí = #000080 = RGB (0, 0, 128)

Per què són importants els colors del lloc web?

Potser penseu que no us afecten els colors, però segons un estudi, el 85% de la gent diu que el color té un gran impacte en el producte que compren. També diu que quan algunes empreses canvien els colors dels botons, han notat un fort augment o disminució de les seves conversions.

Per exemple, Beamax, una empresa que fabrica pantalles de projecció, va notar un augment massiu del 53,1% dels clics als enllaços vermells en comparació amb els enllaços blaus.

Els colors tenen un gran impacte no només en els clics sinó també en el reconeixement de la marca. Un estudi sobre l'impacte mental dels colors va trobar que els colors augmenten el reconeixement de la marca en un 80% de mitjana. Per exemple, quan penseu en Coca-Cola, probablement us imaginareu llaunes vermelles vibrants.

Com triar un esquema de colors per a llocs web?

Per decidir quins colors heu de triar al vostre lloc web o aplicació web, primer heu de tenir una bona comprensió del que esteu venent. Per exemple, si esteu intentant aconseguir una imatge de gran qualitat i alta qualitat, el color que heu de triar és el morat. Tanmateix, si voleu arribar a un públic més ampli, blau; És un color tranquil·litzador i suau que s'adapta molt bé a temes més sensibles com la salut o les finances.

Els exemples anteriors han estat provats per molts estudis. Però el color que trieu per al vostre lloc web depèn de la complexitat del vostre disseny i dels tipus de combinacions de colors. Per exemple, si utilitzeu una paleta de disseny web monocroma, és possible que necessiteu set tons o més d'aquest color per tenir prou varietat a la pantalla. Heu de definir colors per a determinades parts del vostre lloc, com ara el text, els fons, els enllaços, els colors del cursor, els botons CTA i les capçaleres.

Ara "Com triar un esquema de colors per a llocs web i aplicacions web?" Mirem-ho pas a pas:

1. Tria els teus colors primaris.

La millor manera de decidir un color primari és examinar els colors que coincideixen amb l'estat d'ànim del vostre producte o servei.

A continuació us oferim alguns exemples:

• Vermell: significa emoció o felicitat.
• Taronja: denota un moment amable i divertit.
• El groc significa optimisme i felicitat.
• Verd: significa frescor i naturalesa.
• Blau: significa fiabilitat i seguretat.
• Lila: representa una marca distingida amb una història de qualitat.
• Marró: significa un producte fiable que pot ser utilitzat per tothom.
• El negre significa luxe o elegància.
• Blanc: es refereix a productes elegants i fàcils d'utilitzar.

2. Trieu els vostres colors addicionals.

Trieu un o dos colors addicionals que complementin el vostre color principal. Idealment, aquests haurien de ser els colors que facin que el vostre color principal sigui "impressionant".

3. Seleccioneu un color de fons.

Trieu un color de fons que sigui menys "agressiu" que el vostre color primari.

4. Seleccioneu el color de la lletra.

Trieu un color per al text del vostre lloc web. Tingueu en compte que un tipus de lletra negre sòlid és poc freqüent i no es recomana.

Les millors paletes de colors web per a dissenyadors

Si no trobeu el color que busqueu a la col·lecció de paletes de colors web de Softmedal, podeu fer una ullada als llocs de colors alternatius següents:

La selecció de colors és un procés llarg i sovint requereix molt d'ajustament per trobar els colors adequats. En aquest punt, podeu estalviar temps utilitzant aplicacions web 100% gratuïtes que creen els esquemes de colors rellevants des de zero.

1. Paletó

Paletton és una aplicació web que tots els dissenyadors web haurien de conèixer. Només has d'introduir un color de llavor i l'aplicació farà la resta per tu. Paletton és una opció fiable i una gran aplicació web per a aquells que no saben res de disseny i per a principiants.

2. Color segur

Si WCAG us preocupa en el vostre procés de disseny, Color Safe és la millor eina per utilitzar. Amb aquesta aplicació web, podeu crear esquemes de colors que es combinen perfectament i ofereixen un contrast ric segons les directrius WCAG.

En utilitzar l'aplicació web Color Safe, us assegureu que el vostre lloc compleix les directrius WCAG i és totalment accessible per a tothom.

3. Adobe Color CC

És una de les eines gratuïtes d'Adobe creades per a ús públic. És una aplicació web elaborada on qualsevol pot crear esquemes de colors des de zero. Et permet triar entre molts models de colors diferents que s'adaptin millor a les teves necessitats. La interfície pot semblar una mica confusa al principi, però un cop us acostumeu, no hauríeu de tenir cap problema per triar opcions de color boniques.

4. Ambient

Ambiance, una aplicació web gratuïta, ofereix paletes de colors web prefabricades d'altres llocs web de colors. Funciona com una aplicació web tradicional on podeu desar colors al vostre perfil i crear els vostres propis esquemes des de zero. Totes aquestes paletes de colors web provenen de Colorlovers. La interfície Ambiance facilita la navegació i es centra més en la interacció de colors per al disseny de la interfície d'usuari.

5. 0a255

0to255 no és exactament un generador d'esquemes de colors, però us pot ajudar a afinar els esquemes de colors existents. L'aplicació web us mostra tots els tons diferents perquè pugueu barrejar i combinar colors a l'instant.

Si us costa crear una combinació de colors utilitzable, podeu revisar algunes de les aplicacions anteriors.

Les millors paletes de colors web

Els llocs següents utilitzen una varietat de paletes de colors web amb gran efecte. Són acuradament seleccionats per les emocions que evoquen i les emocions que transmeten.

1. Odòpode

Odopod va ser dissenyat amb una paleta de colors monòtona, però amb l'objectiu d'evitar semblar avorrit amb un degradat a la seva pàgina d'inici. La tipografia gran ofereix un gran contrast. Està clar on els visitants volen que facin clic.

2. L'ull de Tori

L'ull de Tori és un gran exemple d'esquema de colors monocrom. Aquí, es veuen els efectes d'una paleta de colors senzilla però potent centrada en tons de verd. Aquest esquema de colors sol ser fàcil d'aconseguir, ja que una ombra d'un color gairebé sempre funcionarà amb una altra ombra del mateix color.

3. Kit de supervivència del formatge

El vermell és un color molt popular per a la paleta de colors d'un lloc web. Pot transmetre una rica barreja d'emocions, fent-lo versàtil. Com podeu veure al lloc web de Cheese Survival Kit, és especialment potent quan s'utilitza en petites dosis. El vermell es suavitza amb colors més neutres, i el blau ajuda amb les CTA i altres àrees on l'empresa vol cridar l'atenció del visitant.

4. Ahrefs

Ahrefs és un exemple de lloc web que utilitza la paleta de colors lliurement. El blau fosc actua com a color predominant, però hi ha variacions a tot el lloc. El mateix passa amb els colors taronja, rosa i turquesa.

Preguntes més freqüents sobre colors

1. Quin és el millor color per a un lloc web?

El blau és sens dubte l'opció més segura, ja que és el color més popular amb un 35%. Tanmateix, si tots els vostres competidors utilitzen blau, pot ser que tingués sentit "diferenciar" la vostra oferta i marca. Però heu d'assegurar-vos de no aclaparar els visitants.

2. Quants colors ha de tenir el lloc web?

Tingueu en compte que el 51% de les marques tenen logotips monocroms, el 39% utilitza dos colors i només el 19% de les empreses prefereixen logotips a tot color. Des d'aquí, podeu veure que els llocs web amb 1, 2 i 3 colors tenen més sentit que intentar crear un lloc web amb colors de l'arc de Sant Martí. Tanmateix, marques com Microsoft i Google creuen en l'avantatge de treballar amb més colors, ja que utilitzen almenys 4 colors sòlids en els seus dissenys.

3. On he d'utilitzar els colors?

Els colors cridaners s'han d'utilitzar amb moderació, en cas contrari perdran el seu efecte. Aquest efecte ha d'estar en punts de conversió com els botons "Compra ara".