| Suscribir mediante RSS

Colores web, lo básico

22 septiembre 2009 Diseño web

Colores WebMe preguntan con frecuencia como cambiar los colores del texto o del fondo (background) de algunos elementos del Blog. Eso se puede hacer en WordPress abriendo el archivo style.css de nuestro Theme desde el editor de código.

Cada Theme es diferente pero modificar los colores se hace de la misma forma en todos y relativamente sencillo de realizar si se saben diferenciar los distintos elementos de las hojas de estilos CSS.

Antes hay que saber la paleta de colores web y cómo se interpreta.

No me voy a extender mucho, sólo decir que un color se representa con 6 caracteres en Hexadecimal, es decir, desde el 0 (cero) hasta la F. Al grupo de 6 cifras se le antepone el caracter # para que CSS sepa que se trata de un color. Por ejemplo, #452280.

Los colores son mezclas y combinaciones de 3 colores principales, rojo, verde y azul. Después del caracter #, los dos primeros dígitos de la izquierda corresponden al rojo, los dos centrales para el verde y los dos de la derecha para el azul. El 00 (cero) es ausencia de color por tanto color negro y FF es blanco. Hay más combinaciones entre estos valores. Cada par de color tiene 256 combinaciones.

Si el par de un mismo color tiene el mismo dígito se puede representar el color con 3 dígitos en vez de 6. Por ejemplo, #66AA55 es lo mismo que #6A5. De la misma forma #888888 es lo mismo que #888. Aconsejo que utilicen 6 cifras si creen que se pueden confundir.

Aquí va la lista de los 16 Colores básicos:
#FFFFFF blanco
#00FFFF cian (celeste)
#FF00FF fucsia (magenta)
#0000FF azul
#FFFF00 amarillo
#00FF00 verde (Lima)
#FF0000 rojo
#808080 gris oscuro
#C0C0C0 gris claro
#008080 verde azulado (Teal)
#800080 morado (Purpura)
#000008 azul marino (azul oscuro)
#808000 verde oliva
#008000 verde oscuro
#800000 marron rojizo
#000000 negro

Hay muchísimos más pero aquí pongo algunos colores interesantes.
#FF00CC rosa
#009900 verde oscuro
#66CC33 verde claro
#FF0033 rojo
#3300FF azul
#00CCFF azul claro, celeste
#9966CC violeta, lila
#CC3399 morado
#FFCC33 amarillo oscuro
#FFFF00 amarillo
#FF9933 naranja
#993300 marrón, canelo

Dejo un enlace interesante donde podrás elegir el color adecuado para tu web ColorsOnTheWeb

Otros artículos de Diseño web

Usar la misma plantilla para categorías y subcategorías
Entradas “pegajosas” Sticky Post
Trackbacks y Pingbacks
Guia de WordPress
Modelo de Cajas y Sidebar