Utilidad para crear esquemas de colores

Color Scheme Designer 3 es una pequeña y sencilla herramienta para generar paletas de color. Con una interfaz basada en web y una gran cantidad de opciones, nos permite crear esquemas de colores coherentes para nuestros desarrollos web.

La interfaz desarrollada en jQuery es muy simple y de aspecto profesional (similar a las herramientas de Macintosh).

Color Scheme Designer ofrece una amplia gama de herramientas para diseñar nuestro esquema de colores, entre ellas están:

• la rueda de colores que se puede utilizar para elegir la gama de colores que se incluirán en el esquema
• pestañas de opciones para afinar nuestra elección de la gama de colores
• controles para ajustar manualmente el tono y saturación
• selectores de varios modos predefinidos como ‘Contraste fuerte’, ‘pastel’, ‘pastel pálido “, etc

Interfaz de Color Scheme Designer

Ajustes de saturación del color, brillo, contraste, etc.

Una vez realizados los ajustes de contraste, brillo, saturación, etc. de nuestro esquema de colores, la herramienta nos ofrece la posibilidad de visualizar el resultado en el bloque a la derecha de los selectores. Entre otras opciones, podemos activar la visualización de texto para comprobar como contrasta con los colores de nuestra paleta y así aplicar criterios de usabilidad a nuestro diseño.

Opciones de visualización del esquema de colores

En este mismo bloque, podemos ver el efecto de la paleta de color diseñada sobre una página web de ejemplo. Para visualizar la aplicación del esquema podemos seleccionar que la utilidad nos presente una página web con el fondo más claro de nuestro diseño o con el más oscuro:

Visualización del efecto de nuestra paleta de color en una página con fondo claro

Visualización del efecto de nuestra paleta de color en una página con fondo oscuro

Una interesantísima utilidad para buscar la máxima accesibilidad de los contenidos de nuestra futura página es la opción “Vision Simulation” en la barra superior. Mediante esta opción, se pueden simular diversas deficiencias visuales de nuestros visitantes, a fin de hacernos una idea de como, si padecen una de ellas, verán modificado el esquema de color que estamos diseñando:

Opción "Vision Simulation": permite simular el efecto de deficencias visuales en la visualización de nuestra paleta de color

En concreto, en la simulación del daltonismo se muestra esto:

Simulación del daltonismo para el esquema de colores

Una vez finalizado el diseño de nuestro esquema de color, podemos utilizar las diferentes opciones de exportación para el mismo mediante el botón “Export”. Los formatos soportados son HTML – CSS, XML, texto o paletas de Photoshop y GIMP.

Opción "Export": permite exportar nuestra paleta en distintos formatos

Seleccionado la opción de exportación en HTML + CSS, obtenemos una página en nuestro navegador que podemos guardar para conservar los códigos de color de la paleta diseñada:

Fichero HTML+CSS obtenido de la exportación de la paleta

The Utilidad para crear esquemas de colores by AlmacenPlantillasWeb, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Spain License.