01 de 10
Entendre esquemes de color i web
Hi ha quatre esquemes de color bàsics que podeu utilitzar per a un lloc web. Cada pàgina d'aquest article mostra una imatge de l'esquema de color i com es pot generar un esquema similar a Photoshop.
- monocromàtic
Ús de colors del mateix matís. Poden tenir diferents matisos o matisos depenent de la quantitat de blanc o negre que s'afegeixi. - anàleg
Utilitza colors que estan molt a prop de la roda del color. - complementari
Sovint, això es veu com a "contrari" perquè els dos colors d'un esquema de color complementari són contraris a la roda del color. - triàdic
Aquests colors estan uniformement espaiats a la roda de colors.
Tots els esquemes de color usaran aquest groc com a color base.
02 de 10
Esquema de color web monocromàtic
Aquest esquema de colors utilitza el mustardy yellow del meu color de base i afegeix alguns blancs i negres al tint i ombreja el esquema en conseqüència.
- a la part superior esquerra - el color base # ffe500
- a la part superior dreta: s'ha afegit un farcit del 50% blanc per obtenir # fff280
- a la part inferior esquerra: afegiu un farcit del 75% blanc per obtenir # fff8bf
- Baixar a la dreta: afegiu un emplenament del 50% negre per obtenir el número 7f7200
Els esquemes de color monocromàtic sovint són els més fàcils a la vista de tots els esquemes de color. Els suaus canvis de tints i ombres fan que els colors flueixen millor entre si. Utilitzeu aquest esquema de colors per fer que el vostre lloc aparegui més fluid i recollit.
03 de 10
Esquema de color web monocromàtic més
S'ha afegit un quadrat de negre del 20% per obtenir més colors al pla. Si afegiu el color blanc o negre als vostres colors, podeu crear un nou color a la vostra paleta sense interferir el to de la pàgina.
04 de 10
Esquema analògic de color web
Aquest esquema de color pren el color base groc i afegeix i resta 30 graus a la tonalitat de la paleta de colors de Photoshop.
- a la part superior esquerra - el color base # ffe500
- a la part superior dreta - +30 graus per obtenir # 99ff00
- a la part inferior esquerra - -30 graus per aconseguir # ff6600
- a la part inferior dreta - 100% blanc de #ffffff
Els colors anàlegs poden funcionar molt bé, però de vegades poden xocar amb força. Assegureu-vos de provar aquests esquemes amb més persones que tu mateix, la teva família i amics. Quan funcionen, creen un lloc que és més colorit que l'esquema monocromàtic, però gairebé tan fluït.
05 de 10
Esquema de color web analògic més
S'ha afegit un quadrat de negre del 20% per obtenir més colors al pla.
06 de 10
Esquema de color web complementari
Els esquemes de color complementaris, a diferència d'altres esquemes de color solen tenir dos colors. El color base i és oposat a la roda de color. Photoshop fa que sigui fàcil obtenir el color complementari: simplement seleccioneu l'àrea de color que voleu que compleixi i feu clic a Ctrl-I. Photoshop ho invertirà. Assegureu-vos de fer-ho en una capa duplicada, de manera que no perdeu el color base.
- esquerra: el color base # ffe500
- dret - el complement # 001aff
Els esquemes de color complementaris sovint són molt més sorprenents que altres esquemes de color, de manera que els utilitzeu amb cura. S'utilitzen amb més freqüència en peces que cal destacar.
07 de 10
Esquema de color web complementari més
Per obtenir aquesta versió, he afegit un 50% de color blanc a la meitat inferior dels colors i un 30% de color negre a la casella central. Com podeu veure, us ofereix algunes opcions més, però encara és un esquema de color complementari.
08 de 10
Esquema de color web triàdic
Els esquemes de color triàdics es componen de 3 colors més o menys espaiats al voltant de la roda de colors. Com que una roda de color és de 360 graus, he tornat a utilitzar el quadre de tonalitat en el selector de color per afegir i restar 120 graus del color base.
- a la part superior esquerra - el color base # ffe500
- a la part superior dreta - +120 graus per obtenir # e500ff
- a la part inferior esquerra - -120 graus per obtenir # 00ffe6
- a la part inferior dreta - 100% blanc de #ffffff
Els esquemes de color triàdics sovint produeixen pàgines web molt vibrants. Però, com a esquemes de color complementaris, poden afectar de manera diferent a les persones. Assegureu-vos de provar.
També podeu crear esquemes de color tetràtic o de 4 colors, on els colors estan igualment espaciats al voltant de la roda de color.
09 de 10
Esquema de color web triàdic més
Igual que amb els altres exemples, he afegit un quadrat negre del 30% als colors per obtenir els tons addicionals.
10 de 10
Esquemes de color web discordants
La bellesa és a l'ull de l'espectador, però és un fet desafortunat que no tots els colors vagin junts. Els colors discordants són colors que estan més allunyats que uns 30 graus de distància a la roda de color i que no són complementaris o formen part d'una tríada.
Els esquemes de color discordants poden ser molt impactants i només s'han d'utilitzar per generar atenció. Recordeu que, perquè aquests colors sovint xoquen, l'atenció que obtingueu no és exactament el que busqueu.