La construcción de un sitio web puede venir con algunos contratiempos inesperados, uno de los cuales es el color. Comprender las opciones de color y cómo se pueden representar los colores en diferentes computadoras es el primer paso para asegurarse de que su sitio tenga el aspecto deseado.
Además de encontrar y seleccionar colores que funcionen para usted, es aconsejable desarrollar y administrar una combinación de colores para su proyecto. Es sencillo crear un conjunto de muestras en el software de imagen común, como Photoshop o Illustrator de Adobe, y organizar los colores de manera que sean fáciles de encontrar y usar.
¿Te gusta el artículo? Asegúrese de suscribirse a nuestro feed RSS y síganos en Twitter para mantenerse al día con el contenido reciente.
Entendiendo el color de la web
Los colores en la web se hacen mezclando combinaciones de tonos rojo, verde y azul; esta forma de mezcla de colores se llama color RGB. Cada tono está representado por un valor numérico de 0 a 255 y cada color único tiene un valor para rojo, verde y azul. El negro, por ejemplo, no tiene un valor de color que le dé un valor RGB de color de 0, 0, 0. El primer dígito siempre se refiere al valor de rojo, el segundo a verde y el tercero a azul.
Debido a que hay 256 variantes de cada tono, 16 millones de combinaciones de colores son posibles usando esquemas RGB. La mayoría de las computadoras de hoy pueden manejar los 16 millones de valores de color y mostrarlos con precisión. Hay algunos, sin embargo, que todavía se adhieren a la antigua lista de 216? Web safe? colores que se desarrollaron para que los colores se renderizaran con precisión en máquinas que utilizan una paleta de 256 colores. Este estándar prácticamente ha desaparecido con los avances en tecnología de pantalla y color.
Al crear colores, puede tener la opción de crear cada tono usando un valor RGB o usando una notación hexadecimal o valor HEX. Los valores HEX de color se identifican con seis caracteres precedidos por un signo #. Los valores HEX utilizan una combinación de números y letras; 0 es el valor más bajo y FF (255) es el más alto. Cada uno de los seis caracteres en el valor HEX corresponde a los números en el valor RGB. El negro tiene un valor HEX de # 000000.
Además, 147 colores se definen por nombre para las aplicaciones HTML y CSS, de acuerdo con w3schools.com, que tiene una tabla que detalla cada color por nombre y valor. Hay 17 colores estándar: aqua, negro, azul, fucsia, gris, gris, verde, lima, granate, azul marino, oliva, púrpura, rojo, plata, verde azulado, blanco y amarillo. Cada uno tiene un valor RGB y HEX específico. Maroon, por ejemplo, tiene un valor RGB de 128, 0, 0 y un valor HEX de # 800000; la plata es 192, 192, 192 o # C0C0C0.
Crear muestras de color
A veces, crear un esquema de color suena más fácil de lo que es. Dependiendo de la complejidad del diseño de un sitio, puede ser necesario un puñado a un arco iris de colores para obtener el efecto deseado. Algunos diseñadores tienen una habilidad especial para la combinación de colores y crearán un esquema desde cero; otros encontrarán inspiración en otros sitios o fuentes externas (como navegar por las fichas de pintura en una ferretería o combinar los colores que se encuentran en la naturaleza).
Los esquemas de color se desarrollan de muchas maneras diferentes en función de los procesos de pensamiento del diseñador. Mientras que algunos tienen el ojo para crear colores sobre la marcha, hojear un libro de colores o usar el color de una foto son formas comunes de desarrollar un esquema. Al crear una combinación de colores, asegúrese de anotar las combinaciones de colores para cada parte de su sitio web, como el encabezado, el fondo, la barra de navegación, la barra lateral, los colores de texto y los enlaces.
Para usar los colores que ha encontrado en otros lugares, tome una foto digital y ábrala en un software de edición de fotos como Adobe Photoshop. Amplíe la imagen hasta que los píxeles sean claramente visibles y use la herramienta de cuentagotas para seleccionar los tonos que desee y escriba sus valores de color.
Importar muestras de color
No todos los diseñadores comienzan desde cero con un esquema de color. Hay una variedad de herramientas gratuitas en línea que permiten a los usuarios desarrollar, descargar e importar una paleta de colores en cuestión de minutos. Los esquemas de color se pueden crear usando un solo color que encuentre tonos complementarios o al usar una foto u otra imagen. Busque una herramienta que ofrezca las mezclas de colores exactas para descargar y que sea compatible con el software de su computadora. Aquí hay algunas opciones simples para su próximo proyecto.
ColorBlender
ColorBlender crea una paleta instantánea de seis colores que los diseñadores pueden descargar como Photoshop Color Table, Illustrator EPS o enviar como un correo electrónico para mezclar manualmente y usar en otros programas. Los colores se combinan utilizando una herramienta de diapositiva para cada valor RGB. Las mezclas son agradables y tienen mucho rango. También puede ingresar un valor para un color que le guste como punto de partida. Nada está preestablecido, puede editar cada opción de color e incluso hacer coincidir con los colores PANTONE.
ColorCombos.com
ColorCombos.com tiene una vasta biblioteca de combinaciones de colores preestablecidas que vienen en forma de esquemas de cinco colores que se pueden buscar por matiz. Cada muestra los valores HEX, RGB e incluso CMYK (para proyectos de impresión) para cada color. Los esquemas se pueden descargar como un archivo .png. Utilice la herramienta Cuentagotas para extra y guardar cada valor de color. El sitio también permite a los usuarios crear combinaciones de colores personalizados.
Generador de paleta de colores
Color Palette Generator es la versión automatizada de cómo crear una combinación de colores a partir de una foto o imagen. Los usuarios pueden seleccionar una de las imágenes preestablecidas o cargar sus propias imágenes para obtener una paleta personalizada de nueve colores de la imagen. Las combinaciones de colores son agradables, pero no se pueden descargar. Mueva el mouse sobre cada tono para obtener su valor HEX. No se proporcionan valores RGB.
Diseñador de esquemas de color
Color Scheme Designer puede ser la herramienta más visual que existe. Crea un esquema de cuatro colores como muchos otros programas, pero también permite a los usuarios obtener una vista previa de cómo se puede usar ese esquema en su sitio, basándose en ejemplos de páginas claras y oscuras. El sitio permite a los usuarios mezclar colores utilizando una gran rueda de colores y los esquemas se desarrollan utilizando varias opciones para paletas mono, complementaria, tríada, tétrada, analógica y acentuada.El sitio también tiene la mayoría de las opciones para el formato de descarga, incluidas las opciones de HTML, XML, texto y paleta de Photoshop. Cada valor de color tiene valores HEX y RGB disponibles.
Organización Swatch
La forma más sencilla de administrar y organizar las muestras en Adobe Photoshop e Illustrator es a través de las bibliotecas de muestras. Puede configurar esquemas de color específicos y guardarlos y abrirlos para ciertos proyectos. (Los productos de Adobe también vienen de la caja con algunas bibliotecas preestablecidas que son bastante buenas, incluyendo algunos conjuntos de muestras de Pantone para aplicaciones CMYK).
Para agregar sus nuevos colores a una biblioteca de muestras, abra la paleta Muestras en el menú Ventana. Lo que se abre es la paleta de muestras predeterminada. (Puede ver otras opciones haciendo clic en la pestaña de expansión. Cada opción abrirá otra ventana). ¿Seleccionar? ¿Nueva muestra? para agregar una mezcla de colores personalizada o? cargar muestras? para importar un esquema de color descargado. Organice los colores en la paleta de muestras de la forma que mejor le convenga y guárdelas. Después de guardar, las nuevas muestras de color se pueden cargar y utilizar en cualquier momento.
Tener una plétora de muestras de color puede ser engorroso. Piense en crear un nuevo archivo para cada proyecto al que volverá repetidamente. Mantenga las paletas pequeñas y elimine los colores que no va a utilizar. Nombra los colores de manera que te resulte fácil recordar sus aplicaciones. Por ejemplo, en la biblioteca de muestras? Mi sitio web? asigne un nombre a cada muestra de color según la forma en que se use, en lugar de los valores RGB.
No guarde muestras de color en una biblioteca para aplicaciones únicas. Requiere tiempo innecesario; Las bibliotecas se utilizan mejor para proyectos o colores recurrentes. Recuerde eliminar los colores no utilizados de las bibliotecas de colores para los proyectos que entregue a los clientes para mantener sus archivos limpios y organizados.
Conclusión
El primer paso para crear un gran color para su próximo proyecto, en la web o en la impresión, es comprender cómo funciona el color y cómo crear un esquema que tendrá tonos complementarios. Saber lo que significan los números asociados con los colores le ayudará a crear (o incluso a robar) muestras con facilidad.
Juega con el color para crear combinaciones que sean apropiadas para el proyecto. Una vez que tenga un conjunto de colores para trabajar, es imprescindible mantener sus muestras organizadas para mejorar su flujo de trabajo. Utilice las herramientas de organización en Adobe Creative Suite para aprovechar al máximo su sistema de gestión de color integrado. Agrupe y nombre los colores de manera que se sincronicen con la forma en que se utilizarán.
Fuentes de imagen: alikins e IvanWalsh.com.