miguelkp
Member
- Messages
- 304
- Reaction score
- 7
- Points
- 18
Elegir esquema de colores para tu web
Hice este tutorial en la sección en inglés pero siempre tuve en mente hacerlo también en castellano, así que aquí va... (la traducción no es demasiado literal que digamos, sino más bien interpretada).
Casi todos hemos tenido problemas más de una vez a la hora de escoger un buen esquema de colores para nuestra web. Pues bien, he encontrado una herramienta tan poderosa como útil que nos ayudará a tomar esta decisión:
Color Scheme Designer « link
Como la aplicación está en inglés, intentaré explicar algunas de sus características (aunque es bastante intuitiva).
Color Scheme Designer es una herramienta online así que no hace falta descargarse nada para que funcione. Es, como ya dicho, muy potente y tiene un montón de características. He hecho una captura de pantalla (ver aquí). En la captura podréis observar varias partes en las que he dividido el diseño de la herramienta. Iré explicando de una en una ahora estas partes:
Lo primero de todo, podemos ver en la esquina superior izquierda algunos "círculos" con marcas (1). Con estos controles, podremos elegir entre varios tipos de paletas dependiendo del número y disposición de los colores. Recomiendo jugar con estos controles y ver uno mismo lo que puede obtener. Como recomendación personal, me gustan "triad" y "analog", ya que tres colores suelen ser más que suficientes para una web... Más colores pueden saturar el sitio y menos pueden dar sensación de vacío.
Debajo de estos controles, tenemos el círculo cromático en sí mismo (2). Dependiendo de la paleta que elijas, podrás ver círculos pequeños que puedes mover para seleccionar una paleta más amplia o más estrecha. En la imagen he elegido una paleta triad así que tenemos tres círculos. El más oscuro (a) es el "color principal". Puedes mover este color y los otros dos colores (b) y (c) se moverán conjuntamente. Estos otros dos colores son los complementarios. Mueve uno y el otro se moverá simétricamente dejando fijo el color principal. Como he dicho, juega con diferentes paletas para ver qué puedes obtener.
Bajo el círculo cromático podemos ver tres pestañas (3). La primera es la seleccionada por defeto. Es decir, el círculo cromático. Con la segunda, "Adjust theme", podemos ajustar la saturación, brillo y contraste del esquema entero. Podemos también cambiar colores individuales. Hay un montón de opciones preprogramadas entre las que podemos elegir también. De nuevo, juega con estos controles. La tercera pestaña es "Color list". Esta es la lista completa de colores con el código hexadecimal correspondiente a cada uno (ideal para HTML).
Luego, en la parte superior derecha, tenemos una especie de barra de herramientas (4). Las opciones son evidentes (quizás a excepción de "Simulación de visión" que resulta incluso sorprendente... podemos simular problemas de visión como daltonismo). Cabe destacar que tenemos la opción de exportar la paleta de color tanto en formato Photoshop como formato Gimp.
Debajo hay un listado detallado de los colores del esquema (5).
Y, finalmente, tenemos un menú de previsualización (6). El botón "Light page example" hará emerger una ventana con una página genérica usando los colores del esquema. Tendrá un fondo claro con fuentes y botones oscuros. Puedes hacer clic en cualquier sitio de la página previsualizada para intercambiar los colores secundarios o complementarios (en caso de paletas de uno y dos colores no estará disponible, evidentemente).
Por otro lado, "Dark page example" hará lo mismo pero la página tendrá fondos oscuros y fuentes claras. Del mismo modo, puedes intercambiar colores secundarios si el tipo de paleta lo permite.
Hice este tutorial en la sección en inglés pero siempre tuve en mente hacerlo también en castellano, así que aquí va... (la traducción no es demasiado literal que digamos, sino más bien interpretada).
Casi todos hemos tenido problemas más de una vez a la hora de escoger un buen esquema de colores para nuestra web. Pues bien, he encontrado una herramienta tan poderosa como útil que nos ayudará a tomar esta decisión:
Color Scheme Designer « link
Como la aplicación está en inglés, intentaré explicar algunas de sus características (aunque es bastante intuitiva).
Color Scheme Designer es una herramienta online así que no hace falta descargarse nada para que funcione. Es, como ya dicho, muy potente y tiene un montón de características. He hecho una captura de pantalla (ver aquí). En la captura podréis observar varias partes en las que he dividido el diseño de la herramienta. Iré explicando de una en una ahora estas partes:
Lo primero de todo, podemos ver en la esquina superior izquierda algunos "círculos" con marcas (1). Con estos controles, podremos elegir entre varios tipos de paletas dependiendo del número y disposición de los colores. Recomiendo jugar con estos controles y ver uno mismo lo que puede obtener. Como recomendación personal, me gustan "triad" y "analog", ya que tres colores suelen ser más que suficientes para una web... Más colores pueden saturar el sitio y menos pueden dar sensación de vacío.
Debajo de estos controles, tenemos el círculo cromático en sí mismo (2). Dependiendo de la paleta que elijas, podrás ver círculos pequeños que puedes mover para seleccionar una paleta más amplia o más estrecha. En la imagen he elegido una paleta triad así que tenemos tres círculos. El más oscuro (a) es el "color principal". Puedes mover este color y los otros dos colores (b) y (c) se moverán conjuntamente. Estos otros dos colores son los complementarios. Mueve uno y el otro se moverá simétricamente dejando fijo el color principal. Como he dicho, juega con diferentes paletas para ver qué puedes obtener.
Bajo el círculo cromático podemos ver tres pestañas (3). La primera es la seleccionada por defeto. Es decir, el círculo cromático. Con la segunda, "Adjust theme", podemos ajustar la saturación, brillo y contraste del esquema entero. Podemos también cambiar colores individuales. Hay un montón de opciones preprogramadas entre las que podemos elegir también. De nuevo, juega con estos controles. La tercera pestaña es "Color list". Esta es la lista completa de colores con el código hexadecimal correspondiente a cada uno (ideal para HTML).
Luego, en la parte superior derecha, tenemos una especie de barra de herramientas (4). Las opciones son evidentes (quizás a excepción de "Simulación de visión" que resulta incluso sorprendente... podemos simular problemas de visión como daltonismo). Cabe destacar que tenemos la opción de exportar la paleta de color tanto en formato Photoshop como formato Gimp.
Debajo hay un listado detallado de los colores del esquema (5).
Y, finalmente, tenemos un menú de previsualización (6). El botón "Light page example" hará emerger una ventana con una página genérica usando los colores del esquema. Tendrá un fondo claro con fuentes y botones oscuros. Puedes hacer clic en cualquier sitio de la página previsualizada para intercambiar los colores secundarios o complementarios (en caso de paletas de uno y dos colores no estará disponible, evidentemente).
Por otro lado, "Dark page example" hará lo mismo pero la página tendrá fondos oscuros y fuentes claras. Del mismo modo, puedes intercambiar colores secundarios si el tipo de paleta lo permite.
Last edited:
