Los colores juegan un papel muy importante en el diseño web. Para elegir correctamente el esquema de color para el sitio, existen servicios especiales. Estoy seguro de que todos los diseñadores web tienen al menos uno en sus favoritos.
A veces te sientas y piensas qué tono de azul elegir como principal para el sitio, un poco más claro o un poco más brillante, o tal vez más oscuro ... Y aún necesitas elegir otros adicionales. Por supuesto, puede hacerlo a simple vista, pero es mejor usar uno de los servicios especiales.
No voy a hablar de teoría del color (esta es una información demasiado voluminosa), sino que simplemente publicaré aquí los servicios que tengo en mis marcadores y que uso.
Soy amigo de este instrumento desde hace muchos años. La herramienta más conveniente para elegir colores (en mi opinión). Tiene muchas características adicionales. Por ejemplo, puede ver un ejemplo de una página clara y oscura con colores seleccionados.
Es posible evaluar cómo las personas con daltonismo y otras discapacidades visuales verán su combinación de colores. Puede elegir colores seguros para la Web.
Adobe Kuler es la segunda herramienta web que utilizo con bastante frecuencia. La selección del esquema de colores es casi la misma que en el sitio anterior, pero no me encanta por eso. Además de poder crear esquemas de color usted mismo, puede ver y utilizar esquemas creados por otras personas.
Para hacer esto, haga clic en el botón en el menú superior izquierdo "Ver". Y verás una galería de todo tipo de combinaciones de colores.
Esta herramienta es un poco similar a Colorscheme, pero tiene menos funciones, pero es posible ver cómo se verán los bloques de colores.
Casi no uso este sitio, pero como ya lo tengo en mis marcadores, decidí agregarlo.
Los siguientes dos sitios generan una paleta a partir de una imagen de su elección. Es magia :)
Eliges cualquier imagen cuyos colores te gusten, el servicio la analiza y te da una paleta de colores. Estos dos sitios difieren solo en cómo proporcionarles una imagen.
Este sitio necesita descargar imagen de su computadora.
Un selector de color muy útil. Basado en el principio de "Me gusta - No me gusta".
Como su nombre lo indica, aquí puede elegir colores para el diseño moderno y plano. El sitio es interesante porque al elegir una paleta, puede descargarla para los programas Corel y Photoshop.
Otra tendencia de moda es el diseño de materiales. Este sitio ayuda a elegir combinaciones de colores para UI (interfaz de usuario). Además, el sitio tiene un gran conjunto de iconos.
Y por último, la interfaz de usuario de nuevo. Esto es solo un conjunto de colores para el diseño de la interfaz de usuario. Al hacer clic en cualquier color, puede ver cómo se leerá el texto blanco sobre un fondo determinado.
Estas son las herramientas que tengo en mis favoritos.
Escriba en los comentarios qué sitios de combinación de colores para el diseño web utiliza.
¿Necesita un sitio web con los colores correctos? vamos a hacerlo :)
¿Encontraste un error? Resalte un fragmento de texto y haga clic en CTRL+ENTRAR
Elegir un esquema de color para un sitio web es uno de los pasos más importantes en el proceso de diseño. Elegir una combinación de colores es un proceso bastante complejo y creativo. Afortunadamente, hay muchos servicios que pueden brindar un apoyo significativo para tomar la decisión correcta.
Algunos de los recursos mencionados en esta descripción general le permiten elegir entre una gran cantidad de esquemas de color listos para usar, mientras que otros le permiten crear su propio esquema de forma interactiva.
Küler
Adobe Kuler contiene una gran biblioteca de esquemas de color prefabricados. Puede ver el diagrama en línea y descargarlo para utilizarlo en los productos de Adobe Creative Suite.
Color Lovers actualmente tiene casi 2 millones de esquemas de color creados por los usuarios. Puede verlos ordenados por fecha, calificación, número de visitas.
ColoRotate tiene una biblioteca de esquemas de color prefabricados. También puede crear su propio esquema con la exclusiva herramienta 3D. El esquema de color se puede usar directamente en Photoshop y Fireworks usando el complemento ColoRotate.
El Diseñador de esquemas de color le permite seleccionar el tipo de esquema de color (mono, complementario, tríada, tétrada, analógico). Entonces será posible ajustar los colores y ver el efecto del esquema en un ejemplo.
ColorSchemer tiene una gran biblioteca de esquemas de color creados por el usuario. Puede ordenarlos por fecha de publicación, clasificación o número de descargas.
Pictaculous es una sencilla herramienta de generación de esquemas de color en línea. Puede cargar una imagen y el servicio generará un diagrama para usar con la imagen.
Aguja de color
Color Spire es un servicio muy fácil de usar. Eliges un color base y sugiere un esquema de color. También puede ver la apariencia del esquema en una plantilla simple.
Un selector de color pequeño, elegante y ordenado para el diseño de páginas HTML y otras tareas que requieren colores coincidentes.
Veamos qué puede hacer este programa.
Configuración del punto de color
Dado que el programa no requiere instalación, simplemente guarde el archivo en su disco duro, descomprímalo en una ubicación conveniente, abra la carpeta y ejecute el archivo con la extensión .exe. Por defecto, el programa comienza como un pequeño botón:
Trabajando con el programa
Hacemos clic en este icono y la ventana del programa se abre frente a nosotros:
Pantalla
En esta pestaña, el programa te permite "tomar" cualquier color directamente de la pantalla. Es decir, desde cualquier parte de la pantalla que estuviera visible en el momento del lanzamiento del programa. La pantalla completa se muestra en un tamaño reducido en la ventana Seleccionar área.
Si hace clic en cualquier parte de esta ventana, aparecerá en la siguiente ventana más pequeña "Seleccione un color". Aquí ya puedes apuntar con más precisión y tomar el color desde un punto específico.
También en la parte derecha de esta ventana hay botones auxiliares para copiar al portapapeles, y debajo de los botones "Actualizar" (actualiza el contenido de la pantalla) y "Aplicar" (guarda el color seleccionado y cambia la ventana a la "Selección " pestaña).
Selección
Estas son las principales herramientas para una fácil combinación de colores: "Mosaico", "Círculo", "Web" y "Ganar", que se cambian mediante pestañas adicionales.
Trabajar con estas herramientas no es difícil. Simplemente haga clic en el color que desee, ajústelo con los controles deslizantes RGB (o HSV, si le gusta este formato) y vea si se adapta o no.
Si le gusta el color seleccionado, puede copiar su código desde la línea "Representación de texto". Además, el código también se puede seleccionar en cualquiera de los formatos estándar haciendo clic en la flecha pequeña para expandir la lista.
Además, preste atención a la ventana del tercer color en la esquina superior derecha. Además del color seleccionado (raya vertical), muestra tres colores más que combinan bien con el seleccionado.
Así, el programa sugiere inmediatamente varios colores a juego que se pueden aplicar a otros elementos del diseño diseñado.
El programa tiene muchos botones auxiliares diferentes. Para averiguar su propósito, simplemente desplace el mouse sobre ellos y lea los consejos que aparecen en la parte inferior de la ventana del programa.
Ajustes
Aquí puede ajustar algunos parámetros como el tipo y tamaño de fuente y algunas propiedades cosméticas del programa. Será más conveniente trabajar con el programa si desmarca las casillas "Abrir en la pestaña "Pantalla"" y "Ejecutar en modo mini ventana".
Sobre el programa
En esta última pestaña, puede encontrar los contactos del desarrollador y ver si se ha lanzado una nueva versión del programa ingresando a su sitio web.
Ventajas y desventajas del programa.
- hay muchas herramientas diferentes para la selección de colores (círculo, mosaicos, etc.);
- le permite comparar colores convenientemente acercando la ventana del programa a otros elementos de la pantalla;
- hay sugerencias para todos los botones.
- interfaz un poco complicada;
- ejecutar minimizado y en la pestaña "Pantalla" no es muy conveniente (aunque puede desactivarlo en la configuración);
- no a todos les gustará el color de la ventana del programa.
recomendaciones
El programa es bastante poderoso para ser gratuito, proporciona casi todo lo que necesita para seleccionar convenientemente los colores al crear un diseño de sitio web. Hay algunos defectos menores, como el color de la ventana del programa (lila, no para todos), pero no interfieren con el trabajo.
PD Se permite copiar y citar libremente este artículo, siempre que se indique un enlace activo abierto a la fuente y se conserve la autoría de Ruslan Bogdanov.
P.P.D. Si el programa te parecía complicado, hay opciones más sencillas:
El color es uno de los elementos más importantes en el trabajo de un diseñador. Pero como concepto, es bastante difícil de dominar: las muchas combinaciones de paletas a menudo dificultan decidir cuál es el mejor estilo para la interfaz de las páginas web y las aplicaciones. Anteriormente, publicamos revisiones de herramientas de elección y. Y hoy queremos ampliar el tema publicando una traducción del artículo Essential Color Tools for UX Designers de Nick Babich en el blog.
Esta publicación contiene una lista de los mejores servicios de combinación de colores para sitios web y diseño de UX que le ahorrarán mucho tiempo. A través de estos proyectos, aprenderás:
- de dónde sacar inspiración;
- cómo crear tu propia paleta;
- cómo hacer que el diseño sea accesible para las personas con problemas de visión cromática.
1. Buscando inspiración
colores de la naturaleza
Dibuja del mundo que te rodea. Todo lo que necesitas es mirar alrededor. Ropa de moda, portadas de libros, diseño de interiores... hay tantas cosas increíbles a tu alrededor. Pero las mejores combinaciones de colores son los colores de la naturaleza. Capture un momento hermoso e intente crear su propia selección basada en una imagen específica.
Las mejores combinaciones de colores se encuentran en la naturaleza. Puede obtener un esquema de color de cualquier foto.
comportamiento
En el popular servicio encontrarás interesantes trabajos incluidos en los mejores portfolios online de verdaderos profesionales en su campo. Este sitio es también una gran fuente de inspiración. Para ver nuevos ejemplos dignos de proyectos, simplemente seleccione el color que desee.
Colores de regate
Dribbble es uno de los mejores que será útil al crear una interfaz de usuario. Si desea comprender visualmente cómo otros han usado un color en particular, vaya a dribbble.com/colors e ingrese el valor que desea.
Al elegir un color para el sitio, aquí puede establecer su porcentaje mínimo; experimente, por ejemplo, intente establecer un 30% de azul.
Intente establecer un porcentaje mínimo de un determinado color en Dribbble
inspiración de diseño
Designspiration es una herramienta útil principalmente para aquellos que ya tienen ideas de combinación de colores y quieren ver ejemplos de tales combinaciones. Elija de 1 a 5 opciones y encontrará imágenes que coincidan con los parámetros especificados.
En Designspiration encontrarás diferentes ejemplos de combinaciones de colores
Tineye Multicolor
Con el servicio de igualación de color Tineye Multicolr, puede determinar la gama de imágenes deseada e incluso establecer el porcentaje de cada uno de ellos (ratio). El sitio está integrado con una base de datos de 20 millones de fotos Creative Commons de Flickr. Esta es definitivamente una de las formas más rápidas de encontrar la paleta perfecta.
Colorzilla
ColorZilla es una extensión para instalar en los navegadores Chrome y Mozilla Firefox. Incluye herramientas como cuentagotas, exploración de paletas, creación y más.
Extensión ColorZilla disponible en Chrome y Firefox
Espectro de Shutterstock
Una de las mejores maneras de tener una idea de cómo se verá el esquema de color es mirar las imágenes correspondientes. La mayoría de las soluciones que ofrecen selección de color para el diseño de sitios web incluyen esta función, pero Shutterstock Spectrum tiene una interfaz y una vista previa increíblemente fáciles de usar, que realmente pueden ser útiles.
Además, no necesita una suscripción, ya que una evaluación preliminar de la imagen será suficiente (incluso a pesar de que tiene una "marca de agua").
W3Escuelas
Recientemente, un blog revisó una selección de W3Schools. Contiene mucha información sobre el tema, que va desde sus nombres/códigos de sombras, la teoría de combinaciones de paletas y termina con una descripción de diferentes formatos: HEX, RGB, CMYK, HWB, etc. También encontrarás generadores simples, convertidores y "mini-servicios" similares. En definitiva, interesante de ver.
2. Crea una paleta de colores
Herramienta de color de diseño de materiales
El servicio de selector de color del sitio web Material Design Color Tool le permite crear, compartir y previsualizar esquemas de color para sus selecciones. Una de sus útiles funciones es medir el nivel de accesibilidad de cualquier combinación de colores.
enfriadores
Coolors es un sitio para crear una paleta multicolor. Simplemente corrija un cierto color y presione la barra espaciadora. La herramienta también es buena porque obtendrá más de un resultado, pero puede generar varias opciones cambiando solo los datos iniciales.
Esquema de color en Coolors basado en foto
adobe color cc
El servicio de combinación de colores Adobe Color CC (anteriormente Kuler) ahora es bastante popular. Está disponible gratuitamente en Internet, pero también hay una versión descriptiva. Con esta aplicación web, harás tu paleta usando la rueda de colores:
O puede obtener un resultado específico de la imagen final:
Selección de color para el sitio según la imagen.
Hay cientos de combinaciones preparadas aquí, búscalas en la sección "Ver":
Si usa la versión de escritorio, puede exportar el sistema de color que creó a InDesign, Photoshop e Illustrator con un solo clic.
paleta
A menudo se compara con el Adobe Color CC anterior, ya que estos diseños son muy similares. La única diferencia es que en Paletton no está limitado a cinco opciones, sino que puede experimentar con tonos de interfaz adicionales.
Además, puede consultar. Junto con otras, la aplicación le permite trabajar en cualquier lugar, simplemente usando su teléfono inteligente. Además de crear/exportar paletas de colores directamente, aquí puede seleccionar ciertos colores de las imágenes o usar opciones básicas.
3. Hacer que la paleta sea accesible
Actualmente, los trastornos de la percepción del color son mucho más comunes de lo que pensamos. Alrededor de 285 millones de personas en el mundo experimentan problemas de visión. Siempre debe verificar si el que elige está disponible para dichos usuarios.
Comprobador de contraste de color WebAIM
Algunos tonos se combinan a la perfección entre sí, mientras que otros son todo lo contrario. Una gran cantidad de proyectos no pasan la prueba A/A, y esto es un hecho. Es muy importante revisar el diseño visual de la interfaz y el contraste de tonos, especialmente si hay mucho texto en la página. A estos efectos, utilice al elegir los colores del sitio.
WebAIM Color Contrast Checker es una herramienta basada en la web que verifica los códigos de color en valores hexadecimales.
enfriadores
Ya hemos mencionado este servicio anteriormente. Entre otras cosas, Coolors también lo ayudará a verificar su paleta inventada para detectar daltonismo.
Tipo de daltonismo en un esquema.
En lugar del modo "Normal", seleccione el tipo de problema de visión que desea simular. Como resultado, comprenderá exactamente cómo una persona que no puede distinguir entre ciertos colores verá su diseño.
Así ve una paleta una persona con protanomalía
Simulador de visión NoCoffee para Chrome
Con la ayuda del sitio web NoCoffee Vision Simulator, puede ver cómo las personas con daltonismo o baja visión perciben ciertas páginas web. Por ejemplo, al especificar la opción "Acromatopsia" en la sección "Deficiencia de color", verá la página web en gris.
Así luce un proyecto de CNN para una persona con deuteranopía
Conclusión
Todos los servicios de combinación de colores para sitios web y diseño de UX mencionados en el artículo definitivamente lo ayudarán en su búsqueda de un rango interesante y efectivo. Pero recuerda, la mejor manera de aprender a crear paletas asombrosas es practicar y experimentar mucho.
La combinación de colores es uno de los pasos más importantes en el proceso de creación de un buen diseño.
Para ponértelo más fácil, hemos decidido recopilar una selección de los mejores servicios para crear esquemas de color. Ayudarán a ahorrar tiempo y, al mismo tiempo, a obtener un resultado decente.
01. Adobe ColorCC
Adobe ha cambiado el nombre de su proyecto Kuler a Color
Es posible que esté familiarizado con esta herramienta por su nombre anterior, Adobe Kuler. Sin embargo, Adobe recientemente cambió el nombre de una de sus populares aplicaciones web a Adobe Color CC.
Le permite seleccionar, crear y guardar diferentes esquemas de color, cada uno de los cuales puede contener hasta cinco colores. La herramienta está disponible en versiones de navegador y de escritorio. Si está utilizando la versión de escritorio, podrá exportar el esquema de color directamente a Photoshop, Illustrator e InDesign.
02. Esfera de color Mudcube
Si no está seguro de su combinación de colores, entonces Mudcude tiene su propia galería de activos prefabricados.
Mudcube Color Sphere es un recurso en miniatura muy útil para diseñadores que no solo ofrece códigos hexadecimales para colores seleccionados, sino que también le permite crear esquemas de color para sus propios proyectos. También vale la pena señalar que Mudcube tiene su propia galería de recursos listos para usar que también puede usar.
03. Revisa mis colores
Check my Colors está diseñado específicamente para evaluar y hacer coincidir la combinación de colores de fondo y de primer plano para todos los elementos DOM. Y también para averiguar si los elementos son lo suficientemente armoniosos entre sí. Todas las pruebas se basan en algoritmos recomendados por el World Wide Web Consortium ( W3C).
04. La aplicación de color
La aplicación te ayudará a conocer los valores RGB, HEX y HSLA de los colores seleccionados
Herramienta de iOS La aplicación de color le permite definir colores fácil y simplemente usando una paleta de colores grande. Le permite averiguar los valores de colores RGB, HEX y HSLA, así como crear sus propios esquemas de color para el sitio.
05. Cazador de colores
Color Hunter genera un esquema de color basado en la imagen seleccionada
Esta es una herramienta muy útil, especialmente si necesita encontrar un color específico. Seleccione una imagen y cárguela en Color Hunter. La herramienta creará una paleta de colores basada en la imagen seleccionada. Este es un gran método para crear sus propios esquemas de color.
06. Ojo de hojalata
Si necesita obtener un color específico, simplemente ingrese el valor HEX en la URL
Este sitio utiliza una base de datos de 10 millones de imágenes disponibles de forma gratuita bajo un acuerdo de licencia Creative Commons, cuidadosamente seleccionadas por los creadores de Flickr. Se pueden utilizar para generar esquemas de color apropiados.
07 colores
Conveniente aplicación web en miniatura. Pase el mouse sobre la pantalla y determine el color que desea, luego desplácese un poco para elegir el tono. Después de eso, la herramienta te dará todos los códigos HEX necesarios que puedes usar en tus propios proyectos. Una de las herramientas más fáciles de usar.
08 SpyColor.com
Un generador de esquemas de color gratuito que proporciona información de color y también le permite convertirlo a cualquier esquema ( RGB, CMYK otro ). Aquí hay disponible una variedad de formatos de combinación de colores, incluidos triádicos, monocromáticos y más.
09.Inspiración de diseño
Se pueden seleccionar hasta cinco tonos en Designspiration con una práctica paleta de página completa que facilita encontrar exactamente los esquemas de color HTML que está buscando. Luego, el sitio generará una página con todas las imágenes en la base de datos que usan una combinación de colores similar. También proporcionará valores HEX que puede usar en sus propios proyectos. Y las imágenes se pueden guardar en colecciones en el sitio.
Explorador de 10 colores
Una de las herramientas web más inteligentes que ofrece muchas funciones relacionadas con el diseño, la personalización y el análisis de esquemas de color. Aquí hay algunas herramientas para ayudarlo a determinar Validez WCAG de los esquemas de color, así como generar tus propias paletas de colores.
11. Generador de esquemas de colores hexadecimales
Una pequeña herramienta útil para generar combinaciones de colores basadas en un solo tono seleccionado. Pegue el valor hexadecimal del color y la herramienta proporcionará un conjunto de colores adecuados para usar con el color base.
12. Amantes del COLOR
COLOURlovers es una comunidad para compartir combinaciones de colores. Aquí puede inspirarse en los conjuntos de colores de otros usuarios, así como crear y compartir los suyos propios.
13. Diseñador de esquemas de color
Esta herramienta en línea ofrece formas interesantes de generar esquemas de color, permitiéndole ajustar su brillo y contraste. Aquí puede crear varios modelos matemáticos populares de esquemas de color, incluido el monocromo.
14. COPASO
Una de las herramientas de la web COLOURlovers. Pero COPASO merece una atención especial, ya que es una increíble solución todo en uno y facilita la generación de esquemas de color listos para usar para el sitio. Hay muchas herramientas para la combinación de colores, y todas ellas están ubicadas en una interfaz conveniente y simple. Además, se pueden agregar notas a las paletas, se pueden cargar imágenes, etc.
15. Modo de color
Colourmod es un software que le permite seleccionar colores individuales del área de widgets, ya sea que esté usando una Mac o Konfabulator en Windows. No es precisamente una herramienta sencilla para trabajar con paletas de colores, pero te ayudará a determinar los colores de forma rápida y sencilla sin tener que descargar pesados programas.
16. Color Zilla
ColorZilla está disponible para Chrome y Firefox
Este proyecto comenzó como un complemento para Firefox, pero hoy también está disponible para Google Chrome. ColorZilla es una extensión que incluye varias herramientas para trabajar con el color, incluida una paleta, un generador de degradados css y un cuentagotas.
17. Colormunki
Una práctica herramienta en línea para seleccionar esquemas de color de los creadores de Colormunki. Facilita la creación de atractivas paletas de colores a partir de muestras basadas en Pantone utilizando múltiples técnicas.
18.colr.org
Colr.org le permite establecer la gama de colores de cualquier imagen
Esta herramienta le permite realizar un análisis de color detallado de una imagen, que generalmente se automatiza en otras herramientas. Esto le permitirá elegir el color más adecuado. Recomendamos conocer esta herramienta, aunque su interfaz no está tan bien pensada como en otras aplicaciones.
19. Captura de color
Esta práctica herramienta crea paletas de colores a partir de cualquier imagen. Inserta la dirección de la imagen que deseas analizar y el servicio generará automáticamente un gráfico 3D con información sobre los colores utilizados. Aunque esta aplicación no es exactamente adecuada para elegir un esquema de color para un sitio, puede usarse para estudiar imágenes y sus características de color.
Mezclador de 20 colores
ColorBlender genera una paleta de cinco colores coincidentes
Una de las herramientas más simples que le permite ajustar el color y obtener cinco colores iguales en tiempo real. La paleta generada se puede descargar en Photoshop o Illustrator como un archivo EPS.
21. Bit gris
GrayBit te permite analizar sitios web para ver cómo se verían en escala de grises
Esta herramienta lo ayudará a ver cómo se ve su sitio en escala de grises. Un excelente servicio que le permitirá identificar áreas problemáticas en contraste.
22. CORD
Una herramienta que se puede utilizar como inspiración o para compartir esquemas de color. Por supuesto, este recurso no ayudará con la generación de circuitos, pero definitivamente debe tenerse en cuenta.
23 Espectro de Shutterstock
Las imágenes se pueden filtrar por balance de color y brillo.
A veces, es más fácil verificar si un esquema de color coincidirá mirando imágenes de archivo. Casi todos los principales recursos de acciones ofrecen tales herramientas, pero Shutterstock Spectrum tiene una interfaz muy fácil de usar. Después de usar el control deslizante para determinar el color, puede ingresar palabras clave que determinarán el tema de las imágenes. Además, puede filtrar imágenes por balance de color y brillo.
