Ú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.
Y aquí una pequeña escala de grises:
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:
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!.
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>
Donde dice Texto (tú sabes más que yo, jejeje) pones el código!.
Aaah, es una tabla hecha a las bravas... yo pense que era algo más sofisticado, jajaja.
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.
Publicar un comentario