▷ Que son los Colores ✅ Hexadecimal, Rgba y Hsla

Son aquellos colores que aparecen en una página web. Se pueden basar sobre los sistemas de color RGB o HSL. En el código CSS son especificados como valores numéricos, aunque hay algunos colores que son nombrados por nombres propios en inglés.

¿Para que sirven?

Sirve para mostrar una imagen digital y que el receptor la visualice igual que nosotros y al hacerlo no tendremos otra opción mas que usar los colores Hexadecimales.

¿Como Funciona?

Lo primero que hay que saber es que en los dispositivos electrónicos todos los colores se forman mediante la mezcla aditiva de los colores primarios rojo, verde y azul. Pues bien, el sistema hexadecimal se basa en este principio de un modo bastante fiel, ya que lo que estos códigos hacen no es otra cosa que especificar qué cantidad o intensidad de cada color primario hay que añadir a la mezcla.

Pues bien, cada par de caracteres perteneciente a cada color se basa en esta escala formada por 16 caracteres (10 números y 6 letras):

0 1 2 3 4 5 6 7 8 9 A B C D E F

Donde 0 es la mínima presencia del color, y F es 15 veces esa mínima presencia. Es decir, cuánto más arriba en la escala esté la cantidad de rojo, verde o azul seleccionada, ese color añadido a la mezcla será más brillante. Por el contrario, cuanto más abajo, el color estará más saturado.

¿Cómo visualizar los colores hexadecimales?

Como el primer carácter de cada par es el que más influye en la ecuación, para hacer una lectura a ojo, es más útil fijarnos en él que en el segundo. Así, tenemos que en este caso, de rojo hay poca intensidad (un 2 en la escala), mientras que de verde hay mucha intensidad (la e está casi al final de la escala), y de azul también hay bastante, aunque no tanta como de verde (una c en la escala).

Usos en diseño gráfico y web

Aparte de para visualizar el aspecto aproximado de un color y para variar su intensidad sin tener que abrir la paleta del editor de imagen, manejar el sistema hexadecimal con conocimiento de causa permite encontrar combinaciones de colores armónicas de manera sistemática y preservando valores similares.

Nombres de colores html

Existe una lista de 16 colores predefinidos, que además incluyen algunos de los más comunes, y a los que te puedes referir por su nombre mientras estás diseñando, porque forman parte de la especificación html. Es decir, todos los equipos que leen páginas web sabrán a qué color te refieres, porque tienen almacenada una lista de colores donde a cada nombre se le ha asignado un código hexadecimal que nunca cambian.

Alpha

Un color puede mostrarse con una opacidad determinada en pantalla, que se determina por el parámetro alpha, que, añadido a RGB y HSL, los convierte en RGBa y HSLa.

Tabla de Colores

Nombre HTML	Código hex	Valores RGB	Valores HSL	Valores HSV
Colores rojos
LightCoral	F08080	240 128 128	0° 79% 72%	0° 47% 94%
Salmon	FA8072	250 128 114	6° 93% 71%	6° 55% 98%
IndianRed	CD5C5C	205 92 92	0° 53% 58%	0° 55% 80%
Red	FF0000	255 0 0	0° 100% 50%	0° 100% 100%
Crimson	DC143C	220 20 60	348° 83% 47%	348° 91% 86%
FireBrick	B22222	178 34 34	0° 68% 42%	0° 81% 71%
Brown	964B00	150 75 0	8° 100% 29%	30° 100% 59%
DarkRed	8B0000	139 0 0	0° 100% 27%	0° 100% 54%
Maroon	800000	128 0 0	0° 100% 25%	0° 100% 50%
Colores rosas
MistyRose	FFE4E1	255 228 225	6° 100% 94%	6° 12% 100%
Pink	FFC0CB	255 192 203	350° 100% 88%	350° 24% 100%
LightPink	FFB6C1	255 182 193	351° 100% 86%	351° 28% 100%
HotPink	FF69B4	255 105 180	330° 100% 71%	330° 58% 100%
RosyBrown	BC8F8F	188 143 143	0° 25% 65%	0° 24% 74%
PaleVioletRed	DB7093	219 112 147	340° 60% 65%	340° 49% 86%
DeepPink	FF1493	255 20 147	328° 100% 54%	328° 92% 100%
MediumVioletRed	C71585	199 21 133	322° 81% 43%	322° 90% 78%
Colores naranjas
PapayaWhip	FFEFD5	255 239 213	37° 100% 92%	37° 16% 100%
BlanchedAlmond	FFEBCD	255 235 205	36° 100% 90%	36° 20% 100%
Bisque	FFE4C4	255 228 196	33° 100% 88%	33° 24% 100%
Moccasin	FFE4B5	255 228 181	38° 100% 85%	38° 30% 100%
PeachPuff	FFDAB9	255 218 185	28° 100% 86%	28° 28% 100%
NavajoWhite	FFDEAD	255 222 173	36° 100% 84%	36° 32% 100%
LightSalmon	FFA07A	255 160 122	17° 100% 74%	17° 52% 100%
DarkSalmon	E9967A	233 150 122	15° 72% 70%	15° 47% 92%
Orange	FF6600	255 165 0	39° 100% 50%	39° 100% 100%
DarkOrange	FF8C00	255 140 0	33° 100% 50%	33° 100% 100%
Coral	FF7F50	255 127 80	16° 100% 66%	16° 68% 100%
Tomato	FF6347	255 99 71	9° 100% 64%	9° 72% 100%
OrangeRed	FF4500	255 69 0	16° 100% 50%	16° 100% 100%
Colores marrones
Wheat	F5DEB3	245 222 179	39° 77% 83%	39° 27% 96%
BurlyWood	DEB887	222 184 135	34° 57% 70%	34° 39% 87%
Tan	D2B48C	210 180 140	34° 44% 69%	34° 33% 83%
SandyBrown	F4A460	244 164 96	28° 87% 67%	28° 60% 96%
Goldenrod	DAA520	218 165 32	43° 74% 49%	43° 85% 85%
Peru	CD853F	205 133 63	30° 59% 53%	30° 69% 81%
DarkGoldenrod	B8860B	184 134 11	43° 89% 38%	43° 94% 72%
Chocolate	D2691E	210 105 30	25° 75% 47%	25° 86% 82%
Sienna	A0522D	160 82 45	19° 56% 40%	19° 72% 62%
SaddleBrown	8B4513	139 69 19	25° 76% 31%	25° 86% 55%
Colores amarillos
LightYellow	FFFFE0	255 255 224	60° 100% 94%	60° 12% 100%
Cornsilk	FFF8DC	255 248 220	48° 100% 93%	48° 14% 100%
LemonChiffon	FFFACD	255 250 205	54° 100% 90%	54° 20% 100%
LightGoldenrodYellow	FAFAD2	250 250 210	60° 80% 90%	60° 16% 98%
PaleGoldenrod	EEE8AA	238 232 170	55° 67% 80%	55° 29% 93%
Khaki	F0E68C	240 230 140	54° 77% 75%	54° 41% 94%
Yellow	FFFF00	255 255 0	60° 100% 50%	60° 100% 100%
Gold	FFD700	255 215 0	51° 100% 50%	51° 100% 100%
DarkKhaki	BDB76B	189 183 107	56° 38% 58%	56° 43% 74%
Colores verdes amarillentos
GreenYellow	ADFF2F	173 255 47	84° 100% 59%	84° 82% 100%
Chartreuse	7FFF00	127 255 0	90° 100% 50%	90° 100% 100%
LawnGreen	7CFC00	124 252 0	90° 100% 49%	90° 100% 98%
YellowGreen	9ACD32	154 205 50	80° 61% 50%	80° 76% 81%
OliveDrab	6B8E23	107 142 35	80° 60% 35%	80° 75% 56%
Olive	808000	128 128 0	60° 100% 25%	60° 100% 50%
DarkOliveGreen	556B2F	85 107 47	82° 39% 30%	82° 56% 42%
Colores verdes
PaleGreen	98FB98	152 251 152	120° 93% 79%	120° 40% 99%
LightGreen	90EE90	144 238 144	120° 73% 75%	120° 39% 93%
MediumSpringGreen	00FA9A	0 250 154	157° 100% 49%	157° 100% 98%
SpringGreen	00FF7F	0 255 127	150° 100% 50%	150° 100% 100%
Lime	00FF00	0 255 0	120° 100% 50%	120° 100% 100%
DarkSeaGreen	8FBC8F	143 188 143	120° 25% 65%	120° 24% 74%
LimeGreen	32CD32	50 205 50	120° 61% 50%	120° 76% 81%
MediumSeaGreen	3CB371	60 179 113	147° 50% 47%	147° 67% 71%
SeaGreen	2E8B57	46 139 87	146° 50% 36%	146° 67% 54%
ForestGreen	228B22	34 139 34	120° 61% 34%	120° 76% 55%
Green	008000	0 128 0	120° 100% 25%	120° 100% 50%
DarkGreen	006400	0 100 0	120° 100% 20%	120° 100% 40%
Colores azul-verdes
LightCyan	E0FFFF	224 255 255	180° 100% 94%	180° 12% 100%
PaleTurquoise	AFEEEE	175 238 238	180° 65% 81%	180° 26% 93%
Aquamarine	7FFFD4	127 255 212	160° 100% 75%	160° 50% 100%
Aqua / Cyan	00FFFF	0 255 255	180° 100% 50%	180° 100% 100%
Turquoise	40E0D0	64 224 208	174° 72% 56%	174° 72% 88%
MediumTurquoise	48D1CC	72 209 204	178° 60% 55%	178° 66% 82%
DarkTurquoise	00CED1	0 206 209	181° 100% 82%	181° 36% 100%
MediumAquamarine	66CDAA	102 205 170	160° 51% 60%	160° 51% 80%
LightSeaGreen	20B2AA	32 178 170	177° 70% 41%	177° 82% 70%
CadetBlue	5F9EA0	95 158 160	182° 41% 63%	182° 39% 78%
DarkCyan	008B8B	0 139 139	180° 100% 27%	180° 100% 54%
Teal	008080	0 128 128	180° 100% 25%	180° 100% 50%
Colores azules
Lavender	E6E6FA	230 230 250	240° 67% 94%	240° 8% 98%
BlueWeb	CEE7FF	206 231 255	209° 100% 90%	209° 20% 100%
PowderBlue	B0E0E6	176 224 230	187° 52% 80%	187° 23% 90%
LightBlue	ADD8E6	173 216 230	195° 53% 79%	195° 25% 90%
LightSkyBlue	87CEFA	135 206 250	203° 92% 75%	203° 47% 98%
SkyBlue	87CEEB	135 206 235	197° 71% 73%	197° 42% 92%
LightSteelBlue	B0C4DE	176 196 222	214° 41% 78%	214° 21% 87%
DeepSkyBlue	00BFFF	0 191 255	195° 100% 50%	195° 100% 100%
CornflowerBlue	6495ED	100 149 237	219° 79% 66%	219° 58% 93%
DodgerBlue	1E90FF	30 144 255	210° 88% 100%	210° 0% 100%
SteelBlue	4682B4	70 130 180	207° 61% 71%	207° 40% 89%
RoyalBlue	4169E1	65 105 225	225° 73% 57%	225° 71% 88%
Blue	0000FF	0 0 255	240° 100% 100%	240° 0% 100%
MediumBlue	0000CD	0 0 205	240° 100% 80%	240° 40% 100%
DarkBlue	00008B	0 0 139	240° 100% 55%	240° 90% 100%
Navy	000080	0 0 128	240° 100% 50%	240° 100% 100%
MidnightBlue	191970	25 25 112	240° 78% 44%	240° 88% 78%
Colores violetas y púrpuras
Thistle	D8BFD8	216 191 216	300° 24% 80%	300° 11% 85%
Plum	DDA0DD	221 160 221	300° 47% 75%	300° 27% 87%
Violet	7F00FF	127 0 255	75° 100% 50%	270° 100% 100%
Orchid	DA70D6	218 112 214	302° 59% 65%	302° 48% 86%
Fuchsia / Magenta	FF00FF	255 0 255	300° 100% 50%	300° 100% 100%
MediumPurple	9370DB	147 112 219	260° 60% 65%	260° 49% 86%
MediumOrchid	BA55D3	186 85 211	288° 59% 58%	288° 60% 83%
MediumSlateBlue	7B68EE	123 104 238	249° 80% 67%	249° 57% 93%
SlateBlue	6A5ACD	106 90 205	248° 53% 58%	248° 55% 80%
BlueViolet	8A2BE2	138 43 226	271° 76% 53%	271° 81% 89%
DarkViolet	9400D3	148 0 211	282° 100% 41%	282° 100% 82%
DarkOrchid	9932CC	153 50 204	280° 61% 50%	280° 76% 81%
DarkMagenta	8B008B	139 0 139	300° 100% 27%	300° 100% 54%
Purple	6A0DAD	106 13 173	76° 86% 36%	275° 92% 68%
DarkSlateBlue	483D8B	72 61 139	248° 39% 39%	248° 56% 54%
Indigo	4B0082	75 0 130	275° 100% 25%	275° 100% 50%
Colores blancos
White	FFFFFF	255 255 255	—° 0% 100%	—° 0% 100%
WhiteSmoke	F5F5F5	245 245 245	—° 0% 96%	—° 0% 96%
Snow	FFFAFA	255 250 250	0° 2% 100%	0° 0% 100%
Seashell	FFF5EE	255 245 238	25° 100% 97%	25° 6% 100%
Linen	FAF0E6	250 240 230	30° 67% 94%	30° 8% 98%
AntiqueWhite	FAEBD7	250 235 215	34° 78% 91%	34° 14% 98%
OldLace	FDF5E6	253 245 230	39° 85% 95%	39° 9% 99%
FloralWhite	FFFAF0	255 250 240	40° 100% 97%	40° 6% 100%
Ivory	FFFFF0	255 255 240	60° 100% 97%	60° 6% 100%
Beige	F5F5DC	245 245 220	60° 56% 91%	60° 10% 96%
Honeydew	F0FFF0	240 255 240	120° 6% 100%	120° 0% 100%
MintCream	F5FFFA	245 255 250	150° 4% 100%	150° 0% 100%
Azure	F0FFFF	240 255 255	180° 6% 100%	180° 0% 100%
AliceBlue	F0F8FF	240 248 255	208° 100% 97%	208° 6% 100%
GhostWhite	F8F8FF	248 248 255	240° 100% 99%	240° 2% 100%
LavenderBlush	FFF0F5	255 240 245	340° 100% 97%	340° 6% 100%
Colores grises
Gainsboro	DCDCDC	220 220 220	—° 0% 86%	—° 0% 86%
LightGrey	D3D3D3	211 211 211	—° 0% 83%	—° 0% 83%
Silver	C0C0C0	192 192 192	—° 0% 75%	—° 0% 75%
DarkGray	A9A9A9	169 169 169	—° 0% 66%	—° 0% 66%
LightSlateGray	778899	119 136 153	210° 22% 60%	210° 26% 69%
SlateGray	708090	112 128 144	210° 22% 56%	210° 29% 66%
Gray	808080	128 128 128	—° 0% 50%	—° 0% 50%
DimGray	696969	105 105 105	—° 0% 41%	—° 0% 41%
DarkSlateGray	2F4F4F	47 79 79	180° 25% 25%	180° 40% 31%
Black	000000	0 0 0	—° 0% 0%	—° 0% 0%