Si ets dissenyador gràfic, o simplement alguna vegada t'has ficat a un programa d'edició d'imatge, hauràs vist un requadre que et permetia canviar el color, ja sigui de la galleda de pintura, del pinzell, de les lletres… El que potser t'ha donat curiositat és el fet que, quan es tria un color, apareix un codi de colors, saps què és?
Si t'has preguntat mai què signifiquen aquests codis de lletres, o de números, i vols saber-ne més, a continuació t'ajudem que entenguis la importància del codi de colors, per què reflecteixen colors i altres detalls curiosos.
Què és el codi de colors
Podem definir el codi de colors com una gamma cromàtica en què es pot mostrar una web. És a dir, les possibilitats que es tenen, en una paleta d'uns 216 colors, per determinar com es veurà una web. Aquest codi es pot basar en tres tipus de sistemes: RGB, HEX i HSL (aquest últim ja en desús).
Realment, per al que serveix el codi de colors és per servir de codi universal per a tots els navegadors de manera que, amb aquests codis, el que s'aconsegueix és reproduir les mateixes tonalitats, ja sigui a Internet Explores, a Firefox Mozilla, a Google Chrome…
Has de saber que un ordinador és capaç de distingir fins a 16 milions de colors, de manera que hi ha moltíssimes possibilitats per crear una web o per modificar imatges.
Tipus de codis de colors
Com t'hem dit abans, hi ha tres tipus de sistemes:
- RGB. És el més conegut i es compon de tres colors primaris, vermell, blau i verd, dels quals, a través de la seva combinació, se'n treuen la resta de colors. Pel que fa a la seva representació, aquesta va del 0 al 255 i el codi que apareix està compost per tres xifres separades per comes i entre parèntesis.
- Hexadecimal. Utilitzat sobretot en HTML i en CSS. En aquest cas, es compon tant de xifres com de lletres que s'ordenen entre si per obtenir codis que determinin els colors.
- HSL. Ja en desús, es basa en fer servir el matís, la saturació i la lluminositat a l'hora de crear un color. Ve determinat per graus i tants per cent (tres xifres separades per comes i entre parèntesis).
Per què són importants els codis
Ara que sabeu què és el codi de colors, la seva aplicació és fàcil d'entendre, ja que serveix per determinar quin és el codi que cal perquè es mostri un color determinat. Això funciona, per exemple, a les pàgines web. El codi HTML porta implícit si una web té un fons d'un color determinat, si el tipus de lletra va en vermella, groga, verda, blava…, i molts altres usos.
Entens per què és important? Per exemple, imagina que tens una web amb un fons vermell. I vols canviar-ho a un en blanc. Si sabessis el codi que determina el color vermell, usant el cercador al codi HTML obtindries el lloc on es reflecteix aquest color (vinculat amb el color de background) i podries canviar-lo ràpidament. Però, i si no en tens? Hauries d'estar buscant fins a trobar aquesta secció i provar per veure quin és el codi que s'acosta al que vols.
Per això, el codi de colors t'ajuda a accelerar la feina, així com a poder fer servir els colors a l'hora de dissenyar una web, editar una imatge, etc.
Llistat de colors i codi Hexadecimal i RGB
Per acabar, ens agradaria deixar-te a continuació una taula on pots trobar la majoria de colors que hi ha al costat del seu codi decimal (RGB) i l'hexadecimal perquè, si en algun moment necessites canviar el codi, puguis fer-ho fàcilment sense necessitat de buscar-lo a la paleta de colors.
etiqueta | Decimal (R,G,B) | Hexadecimal |
---|---|---|
aliceblue | rgb (240, 248, 255) | # F0F8FF |
antiquewhite | rgb (250, 235, 215) | # FAEBD7 |
aigua | rgb (0, 255, 255) | # 00FFFF |
aiguamarina | rgb (127, 255, 212) | # 7FFFD4 |
azure | rgb (240, 255, 255) | # F0FFFF |
beix | rgb (245, 245, 220) | # F5F5DC |
bisca | rgb (255, 228, 196) | # FFE4C4 |
negre | rgb (0, 0, 0) | # 000000 |
blanchedalmond | rgb (255, 235, 205) | #FFEBCD |
blau | rgb (0, 0, 255) | # 0000FF |
blauvioleta | rgb (138, 43, 226) | # 8A2BE2 |
marró | rgb (165, 42, 42) | # A52A2A |
burlywood | rgb (222, 184, 135) | # DEB887 |
cadetblue | rgb (95, 158, 160) | # 5F9EA0 |
chartreuse | rgb (127, 255, 0) | # 7FFF00 |
xocolata | rgb (210, 105, 30) | # D2691E |
coral | rgb (255, 127, 80) | # FF7F50 |
blau blau | rgb (100, 149, 237) | # 6495ED |
seda de blat de moro | rgb (255, 248, 220) | # FFF8DC |
carmesí | rgb (220, 20, 60) | # DC143C |
cien | rgb (0, 255, 255) | # 00FFFF |
blau fosc | rgb (0, 0, 139) | #00008B |
cian fosc | rgb (0, 139, 139) | # 008B8B |
darkgoldenrod | rgb (184, 134, 11) | # B8860B |
gris fosc | rgb (169, 169, 169) | # A9A9A9 |
verd fosc | rgb (0, 100, 0) | # 006400 |
gris fosc | rgb (169, 169, 169) | # A9A9A9 |
darkkhaki | rgb (189, 183, 107) | # BDB76B |
magenta fosc | rgb (139, 0, 139) | # 8B008B |
donarkoliegreen | rgb (85, 107, 47) | # 556B2F |
taronja fosca | rgb (255, 140, 0) | # FF8C00 |
foscor | rgb (153, 50, 204) | # 9932CC |
vermell fosc | rgb (139, 0, 0) | # 8B0000 |
darksalmon | rgb (233, 150, 122) | # E9967A |
verd marí fosc | rgb (143, 188, 143) | # 8FBC8F |
darkslateblue | rgb (72, 61, 139) | # 483D8B |
darkslategray | rgb (47, 79, 79) | # 2F4F4F |
darkslategrey | rgb (47, 79, 79) | # 2F4F4F |
darkturquoise | rgb (0, 206, 209) | # 00CED1 |
darkviolet | rgb (148, 0, 211) | #9400D3 |
rosa profund | rgb (255, 20, 147) | # FF1493 |
deepskyblue | rgb (0, 191, 255) | # 00BFFF |
dimgris | rgb (105, 105, 105) | # 696969 |
grisa | rgb (105, 105, 105) | # 696969 |
dodgerblue | rgb (30, 144, 255) | # 1E90FF |
maó de foc | rgb (178, 34, 34) | # B22222 |
floralwhite | rgb (255, 250, 240) | # FFFAF0 |
verd boscós | rgb (34, 139, 34) | # 228B22 |
fúcsia | rgb (255, 0, 255) | # FF00FF |
gainsboro | rgb (220, 220, 220) | #DCDCDC |
ghostwhite | rgb (248, 248, 255) | # F8F8FF |
or | rgb (255, 215, 0) | # FFD700 |
Goldenrod | rgb (218, 165, 32) | # DAA520 |
gris | rgb (128, 128, 128) | # 808080 |
verd | rgb (0, 128, 0) | # 008000 |
verd groc | rgb (173, 255, 47) | # ADFF2F |
gris | rgb (128, 128, 128) | # 808080 |
melia | rgb (240, 255, 240) | # F0FFF0 |
hotpink | rgb (255, 105, 180) | # FF69B4 |
vermell indi | rgb (205, 92, 92) | # CD5C5C |
anyil | rgb (75, 0, 130) | # 4B0082 |
ivori | rgb (255, 255, 240) | # FFFFF0 |
caqui | rgb (240, 230, 140) | # F0E68C |
lavanda | rgb (230, 230, 250) | # E6E6FA |
lavenderblush | rgb (255, 240, 245) | # FFF0F5 |
lawngreen | rgb (124, 252, 0) | # 7CFC00 |
lemonchiffon | rgb (255, 250, 205) | #FFFACD |
blau clar | rgb (173, 216, 230) | # ADD8E6 |
corall clar | rgb (240, 128, 128) | #F08080 |
lightcyan | rgb (224, 255, 255) | # E0FFFF |
color groc daurat clar | rgb (250, 250, 210) | # FAFAD2 |
gris clar | rgb (211, 211, 211) | # D3D3D3 |
Verd clar | rgb (144, 238, 144) | # 90EE90 |
gris clar | rgb (211, 211, 211) | # D3D3D3 |
Rosa clar | rgb (255, 182, 193) | # FFB6C1 |
lightsalmon | rgb (255, 160, 122) | # FFA07A |
lightseagreen | rgb (32, 178, 170) | # 20B2AA |
blau clar | rgb (135, 206, 250) | # 87CEFA |
lightslategray | rgb (119, 136, 153) | # 778899 |
lightslategrey | rgb (119, 136, 153) | # 778899 |
lightsteelblue | rgb (176, 196, 222) | # B0C4DE |
groc clar | rgb (255, 255, 224) | # FFFFE0 |
calç | rgb (0, 255, 0) | # 00FF00 |
limegreen | rgb (50, 205, 50) | # 32CD32 |
lli | rgb (250, 240, 230) | # FAF0E6 |
magenta | rgb (255, 0, 255) | # FF00FF |
granat | rgb (128, 0, 0) | # 800000 |
mediumaquamarine | rgb (102, 205, 170) | # 66CDAA |
blau mitjà | rgb (0, 0, 205) | # 0000CD |
mediumorquid | rgb (186, 85, 211) | # BA55D3 |
mediumpurple | rgb (147, 112, 219) | #9370D8 |
mediumseagreen | rgb (60, 179, 113) | # 3CB371 |
mediumslateblue | rgb (123, 104, 238) | # 7B68EE |
mediumspringgreen | rgb (0, 250, 154) | # 00FA9A |
turquesa mitjana | rgb (72, 209, 204) | # 48D1CC |
mediumvioletred | rgb (199, 21, 133) | #C71585 |
blau mitjanit | rgb (25, 25, 112) | # 191970 |
crema de menta | rgb (245, 255, 250) | # F5FFFA |
mistyrose | rgb (255, 228, 225) | # FFE4E1 |
mocassí | rgb (255, 228, 181) | # FFE4B5 |
blanc navajo | rgb (255, 222, 173) | #FFMORT |
marina de guerra | rgb (0, 0, 128) | # 000080 |
oldlace | rgb (253, 245, 230) | # FDF5E6 |
Oliva | rgb (128, 128, 0) | # 808000 |
olivedrab | rgb (107, 142, 35) | # 6B8E23 |
taronja | rgb (255, 165, 0) | # FFA500 |
en taronja | rgb (255, 69, 0) | # FF4500 |
orquídia | rgb (218, 112, 214) | # DA70D6 |
vara d'or pàl·lida | rgb (238, 232, 170) | # EEE8AA |
palegreen | rgb (152, 251, 152) | # 98FB98 |
paleturquoise | rgb (175, 238, 238) | #AFEEEE |
palevioletred | rgb (219, 112, 147) | #D87093 |
papaiawhip | rgb (255, 239, 213) | # FFEFD5 |
préssec | rgb (255, 218, 185) | # FFDAB9 |
Perú | rgb (205, 133, 63) | # CD853F |
rosa | rgb (255, 192, 203) | # FFC0CB |
pruna | rgb (221, 160, 221) | # DDA0DD |
blau pols | rgb (176, 224, 230) | # B0E0E6 |
porpra | rgb (128, 0, 128) | # 800080 |
vermell | rgb (255, 0, 0) | # FF0000 |
rosybrown | rgb (188, 143, 143) | # BC8F8F |
blau reial | rgb (65, 105, 225) | # 4169E1 |
marró sella | rgb (139, 69, 19) | # 8B4513 |
salmó | rgb (250, 128, 114) | # FA8072 |
marró sorrenc | rgb (244, 164, 96) | # F4A460 |
verd marí | rgb (46, 139, 87) | # 2E8B57 |
petxina de mar | rgb (255, 245, 238) | # FFF5EE |
terra de siena | rgb (160, 82, 45) | # A0522D |
plata | rgb (192, 192, 192) | # C0C0C0 |
cel blau | rgb (135, 206, 235) | # 87CEEB |
pissarra blava | rgb (106, 90, 205) | # 6A5ACD |
gris pissarra | rgb (112, 128, 144) | # 708090 |
slategrey | rgb (112, 128, 144) | # 708090 |
neu | rgb (255, 250, 250) | #FFFAFA |
verdós | rgb (0, 255, 127) | # 00FF7F |
steelblue | rgb (70, 130, 180) | # 4682B4 |
bronzejat | rgb (210, 180, 140) | # D2B48C |
verd blavós | rgb (0, 128, 128) | # 008080 |
card | rgb (216, 191, 216) | #D8BFD8 |
tomàquet | rgb (255, 99, 71) | # FF6347 |
turquesa | rgb (64, 224, 208) | #40E0D0 |
violeta | rgb (238, 130, 238) | #EE82EE |
blat | rgb (245, 222, 179) | #F5DEB3 |
color blanc | rgb (255, 255, 255) | #FFFFFF |
fum blanc | rgb (245, 245, 245) | # F5F5F5 |
groc | rgb (255, 255, 0) | # FFFF00 |
verd groc | rgb (154, 205, 50) | # 9ACD32 |
Coneixes més codis de colors? Et convidem que els posis als comentaris per així ampliar la llista.