Colores HTML

Últimamente estoy trabajando en una plantilla nueva y a menudo se me presenta la necesidad de consultar una tabla de colores en HTML, con lo que me he animado a hacer una para tenerla más a mano y compartirla con vosotros por si os ayuda.

Bueno, imagino que ya sabran que toda la escala cromática se puede obtener combinando los tres colores primarios aditivos: Red, Green y Blue. Pues empleando esta idea, podemos codificar todos los colores en un número hexadecimal de 6 bits #RRGGBB, donde cada par de bits representa la saturación del color primario correspondiente.

Y el resultado es el siguiente, espero que os resulte útil.

#FFCCCC#FF9999#FF6666#FF3333#FF0000#CC0000#990000#660000#330000
#FFC9CC#FFAB99#FF8366#FF5B33#FF3300#CC2900#991F00#661500#330B00
#FFDECC#FFC099#FFA266#FF8433#FF6600#CC5200#993E00#662A00#331600
#FFE9CC#FFE099#FFC146#FFAC33#FF9900#CC7B00#995C00#663F00#332100
#FFF4CC#FFEA99#FFE066#FFD633#FFCC00#CCA400#997C00#665C00#332C00
#FFFFCC#FFFF99#FFFF66#FFFF33#FFFF00#CCCC00#999900#666600#333300
#F4FFCC#EAFF99#E0FF66#D6FF33#CCFF00#A4CC00#7C9900#5C6600#2C3300
#E9FFCC#E0FF99#C1FF66#A2FF33#99FF00#7BCC00#5C9900#3F6600#213300
#DEFFCC#C0FF99#A2FF66#84FF33#66FF00#52CC00#3E9900#2A6600#163300
#C9FFCC#ABFF99#8CFF66#5BFF33#33FF00#29CC00#1F9900#156600#0B3300
#CCFFCC#99FF99#66FF66#3C1F33#00FF00#00CC00#009900#006600#003300
#CCFFC9#99FFAB#66FF83#3C1F5B#00FF33#00CC29#00991F#006615#00330B
#CCFFDE#99FFC0#66FFA2#3C1F84#00FF66#00CC52#00993E#00662A#003316
#CCFFE9#99FFE0#66FFC1#3C1FAC#00FF99#00CC7B#00995C#00663F#003321
#CCFFF4#99FFEA#66FFE0#3C1FD6#00FFCC#00CCA4#00997C#00665C#00332C
#CCFFFF#99FFFF#66FFFF#3C1FFF#00FFFF#00CCCC#009999#006666#003333
#CCF4FF#99EAFF#66E0FF#33D6FF#00CCFF#00A4CC#007C99#005C66#002C33
#CCE9FF#99E0FF#66C1FF#33A2FF#0099FF#007BCC#005C99#003F66#002133
#CCDEFF#99C0FF#66A2FF#3384FF#0066FF#0052CC#003E99#002A66#001633
#CCC9FF#99ABFF#668CFF#335BFF#0033FF#0029CC#001F99#001566#000B33
#CCCCFF#9999FF#6666FF#3333FF#0000FF#0000CC#000099#000066#000033
#C9CCFF#AB99FF#8366FF#5B33FF#3300FF#2900CC#1F0099#150066#0B0033
#DECCFF#C099FF#A266FF#8433FF#6600FF#5200CC#3E0099#2A0066#160033
#E9CCFF#E099FF#C146FF#AC33FF#9900FF#7B00CC#5C0099#3F0066#210033
#F4CCFF#EA99FF#E066FF#D633FF#CC00FF#A400CC#7C0099#5C0066#2C0033
#FFCCFF#FF99FF#FF66FF#FF33FF#FF00FF#CC00CC#990099#660066#330033
#FFCCF4#FF99EA#FF66E0#FF33D6#FF00CC#CC00A4#99007C#5C6600#33002C
#FFCCE9#FF99E0#FF66C1#FF33AC#FF0099#CC007B#99005C#66003F#330021
#FFCCDE#FF99C0#FF66A2#FF3384#FF0066#CC0052#99003E#66002A#330016
#FFCCC9#FF99AB#FF6683#FF335B#FF0033#CC0029#99001F#660015#33000B

Y aquí una pequeña escala de grises:

#FFFFFF#E0E0E0#C0C0C0#A0A0A0#808080#606060#404040#202020#000000

Sen máis...

5 comentarios:

Birdelo dijo...

Hola Kaka.

Vaya, esto es muy importante. Muchas gracias por el dato. A veces uno anda tan rápido, que incluso he llegado a consultar con la fuente de Blogger, jejeje, vaya trabajoso!.

Birdelo dijo...

A ver si por acá llega:

<center>

<style type="text/css">
table.sample {
border-width: 0px;
border-spacing: 5px;
border-style: none;
border-color: gray;
border-collapse: separate;
background-color: #101921;
}

table.sample td {
border-width: 1px;
padding: 5px;
border-style: solid;
border-color: #888899;
align: center;
padding: 10px;
}
</style>


<table class="sample">
<tbody>

<tr>
<td>
Texto 1
</td>
<td>
Texto 2
</td>
</tr>

<tr>
<td>
Texto 3
</td>
<td>
Texto 4
</td>
</tr>

<tr>
<td>
Texto 5
</td>
<td>
Texto 6
</td>
</tr>

<tr>
<td>
Texto 7
</td>
<td>
Texto 8
</td>
</tr>

<tr>
<td colspan="2">
Texto 9
</td>
</tr>

<tr>
<td>
Texto 10
</td>
<td>
Texto 11
</td>
</tr>

<tr>
<td>
Texto 12
</td>
<td>
Texto 13
</td>
</tr>

<tr>
<td>
Texto 14
</td>
<td>
Texto 15
</td>
</tr>

<tr>
<td>
Texto 16
</td>
<td>
Texto 17
</td>
</tr>

<tr>
<td>
Texto 18
</td>
<td>
Texto 19
</td>
</tr>

<tr>
<td>
Texto 20
</td>
<td>
Texto 21
</td>
</tr>

</tbody>
</table>
</center>

Birdelo dijo...

Donde dice Texto (tú sabes más que yo, jejeje) pones el código!.

kaka dijo...

Aaah, es una tabla hecha a las bravas... yo pense que era algo más sofisticado, jajaja.

Birdelo dijo...

Si, juaaa. Es solo una simple tabla.

Con respecto a las clases, ya las he encontrado, ya me dí cuenta como es que se hace!.

Saludines.

 
Fogar do Chimpín, 2008
Plantilla de diseño propio.