HTML - Códigos de color

  »   HTML  »   Tutorial HTML - Códigos de color

Hay tres maneras distintas de definir un color. La manera más fácil es nombrar el color usando la palabra en inglés. Por ejemplo: black (negro), white (blanco), red (rojo), green (verde) y blue (azul). He juntado aquí los nombres de los colores que son soportados en HTML.

ColorHexaColorHexColorHexColorHex
aqua#00FFFFgreen#008000navy#000080silver#C0C0C0
black#000000gray#808080olive#808000teal#008080
blue#0000FFlime#00FF00purple#800080white#FFFFFF
fuchsia#FF00FFmaroon#800000red#FF0000yellow#FFFF00

HTML - El sistema de color RGB

Antiguamente, solo Internet Explorer tenia soporte para los valores RGB en HTML. Pero hoy en día todos los navegadores lo usan. Ademas los colores en formato RGB se pueden usar y se usan mucho en CSS.

RGB es el acrónimo de: Red, Green, Blue. Cada color de estos puede tener un valor entre 0 (falta de color) y 255 (el valor máximo del color). Esta es la manera de cómo se deben construir los colores RGB.

bgcolor="rgb(255,255,255)"White
bgcolor="rgb(255,0,0)"Red
bgcolor="rgb(0,255,0)"Green
bgcolor="rgb(0,0,255)"Blue

HTML - El sistema hexadecimal de color

El sistema hexadecimal parece bastante difícil a primera vista pero con todo esto te aseguro que con el paso del tiempo, y con un poco de práctica, podrás entenderlo en su totalidad. EL sistema de color hexadecimal es el sistema estándar para todos los navegadores. Es seguro y compatible no sólo en aplicaciones web.

El sistema hexadecimal es una representación de 6 caracteres de color. Los primeros dos caracteres (RR) representan el valor rojo, y los dos siguientes (GG) el verde, y los dos últimos (BB) el azul.

htmlbgcolor="#RRGGBB"

HTML - Código de color - Rompiendo el código

La siguiente tabla muestra, más concreto, cómo las letras están integradas en el sistema hexadecimal, ampliando así las posibilidades de hacer combinaciones.

Decimal

0123456789101112131415

Hexadecimal

0123456789ABCDEF

De esta manera las posibilidades son mayores y el sistema puede tener 16 valores.

Un ejemplo de un código hexadecimal sería:

htmlbgcolor="#FFFFFF"

La letra "F" es el valor máximo que puede tomar el sistema. Cuando un navegador ve este código mostrará el color blanco. En caso de que quieras aprender un poco mas sobre como se forman los colores hexadecimales, tenemos la siguiente fórmula:

html(15 * 16) + (15) = 255
htmlLa fórmula es muy simple. Tomamos el primer valor, "F" o 15 y ésta se multiplica por 16 y agregamos el segundo valor 15. El resultado es 255, el valor máximo que puede tener un color primario.
htmlbgcolor="#CC7005"

CC(RR - Red)
(12 * 16) + (12) = 204
70(GG - Green)
(7 * 16) + (0) = 112
05(BB - Blue)
(0 * 16) + (5) = 5

TrueColors - colores que no cambian

El sistema hexadecimal es bastante utilizado para crear páginas. Este es compatible con la mayoría de los navegadores, de esta manera los colores visualizados en una página web son siempre los mismos. Para estar seguro, usa los llamados colores TrueColors como: "#0011EE", "#44HHFF", o "#117788". Este tipo de colores no varían de un navegador a otro.

Aquí tenemos una lista de los colores TrueColors.

*000300600900C00*F00
*003303603903C03*F03
006306606906C06F06
009309609909C09F09
00C30C60C90CC0CF0C
*00F30F60F90FC0F*F0F
030330630930C30F30
033333633933C33F33
036336636936C36F36
039339639939C39F39
03C33C63C93CC3CF3C
03F33F63F93FC3FF3F
060360660960C60F60
063363663963C63F63
066366666966C66F66
069369669969C69F69
06C36C66C96CC6CF6C
06F36F66F96FC6FF6F
090390690990C90F90
093393693993C93F93
096396696996C96F96
099399699999C99F99
09C39C69C99CC9CF9C
09F39F69F99FC9FF9F
0C03C06C09C0CC0FC0
0C33C36C39C3CC3FC3
0C63C66C69C6CC6FC6
0C93C96C99C9CC9FC9
0CC3CC6CC9CCCCCFCC
0CF3CF6CF9CFCCFFCF
*0F03F0*6F09F0CF0*FF0
0F3*3F3*6F39F3CF3*FF3
*0F6*3F66F69F6*CF6*FF6
0F93F96F99F9CF9FF9
*0FC*3FC6FC9FCCFCFFC
*0FF*3FF*6FF9FFCFF*FFF

*Los colores aun mas seguros

Por otro lado, de estos a estos 216 seguros, solamente 22 se muestran igual en todos los monitores. Los monitores de 8-bits eran más comunes de lo que son hoy en día, cuando fue desarrollada la paleta de 216-colores. Se ha descubierto que sólo 22 de los 216 colores son realmente vistos sin una re-asignación en los monitores de 16-bits.

Aquí adjuntamos una tabla con esos 22 que comentamos que se ven igual en cualquier monitor:

*000*F00
*003*F03
*00F*F0F
*FF0*FF3
*CF6*FF6
*0F0*6F0
*3F3*6F3
*0F6*3F6
*0FC*3FC
*0FF*3FF
*6FF*FFF

Como puedes ver, hay muchos factores a tener en cuenta a la hora de elegir un color en la web. Estos dependen tanto del soporte electrónico donde se representa (monitor de ordenador de 8 bits o 16 bits, la luminosidad de esta, pantalla de un móvil, etc), como de la aplicación que los representa ( navegadores, aplicaciones de edición de fotos etc).