Las mejores herramientas de color para diseñadores web

Montones de polvo de colores brillantes

Como diseñadores web, una de las elecciones más importantes que tomamos tiene que ver con nuestras selecciones de color. Elija los incorrectos y podría perder una oportunidad. Es cierto, los colores que elegimos pueden tener un impacto psicológico en quienes los ven.

Por ejemplo, el rojo generalmente se considera un color de alta energía, mientras que el azul implica calma y paz. Para ilustrar este punto, considere los colores que podría usar en un sitio web que vende juguetes para niños en comparación con un sitio para un bufete de abogados. Lo más probable es que elija colores brillantes y vibrantes para el primero y tonos apagados de azul y gris para el segundo.

Pero, ¿cómo saber qué colores funcionan bien juntos? Afortunadamente, no tienes que ser un maestro en teoría del color para armar una paleta de colores viable. Para ayudarlo con la importante tarea de la selección del color, estos son algunos de los mejores colores gratuitos. herramientas de diseño web (más un bono especial al final para usuarios de Mac).



01. HueSnap

herramienta de color de tono

Inspírate sobre la marcha y conviértelo en paletas de colores

La inspiración puede aparecer en cualquier momento. Puede que sea la decoración de una habitación de hotel o la luz del parque una noche lo que inspire la combinación de colores de su próximo sitio web. Para cuando eso suceda, HueSnap está aquí para ayudar. Puede tomar una foto y usar HueSnap para extraer los colores de la imagen y convertirlos en una paleta.

La aplicación está diseñada para uso móvil y puede guardar y compartir sus paletas con otros. Hay muchas funciones para ayudarlo a modificar una paleta, como opciones para elegir colores complementarios y compuestos, y sus paletas pueden tener hasta seis colores cada una.

02. Khroma

herramientas de color khroma

Khroma usa IA para sugerir colores que le gustarán

Khroma es una herramienta de color de IA que tiene como objetivo ayudarlo a buscar y comparar fácilmente combinaciones de colores originales. Con él, los usuarios entrenan un algoritmo de IA para que actúe como una extensión de su cerebro. Los usuarios comienzan eligiendo 50 colores que les gustan, y estos colores se utilizan para entrenar una red neuronal que puede reconocer cientos de miles de otros colores similares. Obtenga más información sobre Khroma y cómo usarlo aquí .

03. Coolors.co

Pantallas de portátiles, equipos de sobremesa y móviles que muestran paletas de colores

La sección Explorar incluye cientos, si no miles, de opciones de paleta.

Coolors ofrece una amplia variedad de herramientas para ajustar la paleta de la forma que desee. Además, puedes exportar tu creación final en muchos formatos diferentes para que puedas usarla virtualmente donde quieras.

Coolors no es solo una herramienta para crear una paleta de colores, también te permite ver otras creaciones completadas de otros usuarios para que puedas inspirarte. La sección Explorar tiene cientos (si no miles) de paletas que puede ver, guardar y editar usted mismo. Aún mejor, Coolors está disponible en computadoras de escritorio y como una aplicación de iOS, un complemento de Adobe Photoshop e Illustrator, e incluso una extensión de Google Chrome para un fácil acceso.

04. Adobe Color CC

Pantalla de selección de rueda de color con herramientas de ajuste

Esto ha existido por un tiempo, pero sigue siendo increíblemente útil.

La herramienta gratuita Adobe Color CC ha existido por un tiempo y es una de las mejores herramientas de color que existen para elegir una paleta de colores. No solo puede crear sus propios esquemas de color, sino que también puede explorar lo que otros han creado.

Seleccione un color de la rueda o de una imagen y aplique reglas de color, como usar solo colores complementarios, colores monocromáticos o tonos del color que seleccione, para generar una paleta de colores. O haga clic en cada color y explore la rueda de colores para personalizar la selección. Como beneficio adicional, puede guardar los temas que cree en su biblioteca de Adobe.

05. Colordot

Barras de colores con números de referencia

Use simples gestos del mouse para construir su paleta de colores

Colordot de Hailpixel es una excelente herramienta gratuita en línea para crear una paleta de colores. Con simples gestos del mouse, puede seleccionar y guardar colores. Mueva el mouse hacia adelante y hacia atrás para obtener matices; arriba y abajo para ligereza; desplácese para saturar y haga clic para guardar un color en su paleta. Haga clic en el icono de alternar para ver los valores RGB y HSL de cada color. También tiene un costo de $ 0.99 / £ 0.99 aplicación iOS que te permite capturar colores con tu cámara.

06. Gradientes

captura de pantalla eggradients

Inspiración en degradados y nombres que invitan a la reflexión

Eggradients ofrece ideas para hermosos degradados para usar en su trabajo de diseño, elaborados por alguien con un gran ojo para el color y un interesante sentido del humor. Cada degradado, que se muestra en forma de huevo, viene con su propio nombre que invita a la reflexión. Los ejemplos incluyen 'Wozniak's Broken Heart' para un azul pálido y 'Merciful Enemy' para una transición de amarillo a verde.

07. 147 colores

Cuadrícula de muestras multicolores

Esta herramienta gratuita incluye los colores CSS estándar

Cuando eres responsable de generar CSS fácil de leer , a veces, usar colores estándar y nombres de colores es el camino a seguir. Gracias a 147 colores de Brian Maier Jr, puedes echar un vistazo a todos y elegir los que te funcionen.

Contiene los 17 colores estándar, además de otros 130 nombres de colores CSS. Filtre los resultados por tonos de azul, verde, etc., o elija entre el arco iris completo de 147 colores.

08. Generador de paleta de colores Canva

Pantalla de selección de color de la herramienta de lienzo

Crea una paleta de colores basada en una imagen

El Generador de paleta de colores de Canva es perfecto si está buscando crear una paleta de colores basada en una imagen en particular. Aunque otras herramientas ofrecen opciones similares, Canva es súper simple de usar: subes una imagen y el generador te devolverá una paleta de los cinco colores principales que contiene. Puede hacer clic en los colores que desee y copiar el valor HEX a su portapapeles.

Desafortunadamente, aquí es donde termina la utilidad de la oferta de Canva, ya que esto es todo lo que puede hacer con su generador de paleta: no puede ajustar los colores de la paleta. Las únicas otras opciones que tiene son copiar los valores hexadecimales proporcionados o cargar otra foto.

09. Paleta de diseño de materiales

Pantalla de selección de paleta de diseño de materiales

Cree una paleta basada en los principios de Material Design de Google

Con la paleta de diseño de materiales puede seleccionar dos colores, que luego se convierten en una paleta de colores completa para descargar, con una vista previa.

La empresa también ofrece Colores de diseño de materiales , que permite a los diseñadores ver los diferentes tonos de un color, junto con sus correspondientes valores HEX.

10. Código de color

Barras de colores con valores HEX

Guarde y exporte paletas de colores como archivos SCSS, LESS o PNG

ColourCode de Tamino Martinius y Andreas Storm es similar a Colordot, pero ofrece un poco más de orientación. Esta herramienta gratuita te golpea directamente en la cara, mostrando un fondo que cambia de color con el movimiento del cursor. Además de eso, esta herramienta ofrece diferentes categorías para la paleta (analógica, tríada, cuádruple, monocromo, luz monocromática, etc.).

Con ColourCode, puede establecer diferentes opciones a lo largo de la rueda de colores para crear una combinación original. También puede guardar su paleta o exportarla como un archivo SCSS o LESS. Incluso puede exportar a PNG, si lo desea.

11. Calculadora de colores

Pantalla de instrucciones de la calculadora de color

Seleccione un color y una armonía de color, y esta herramienta generará una paleta de colores

La Calculadora de color es sencilla: selecciona un color y una opción de armonía de colores. A cambio, obtiene los resultados de su esquema de color recomendado.

Sin embargo, lo bueno de este sitio es que también incluye un poco de detalle sobre la teoría del color y cómo se relaciona con sus elecciones de color.

12. Código de color HTML

Pantalla de descarga de código de color HTML

Este conjunto de herramientas incluye una lista de nombres de colores estándar

Este abultado conjunto de herramientas gratuitas de Dixon & Moe incluye un selector de color en profundidad con muchas explicaciones de las reglas de color; una serie de tablas de colores con colores de diseño plano, el esquema de diseño de materiales de Google y la clásica paleta de colores segura para la Web; y una lista de códigos y nombres de colores HTML estándar.

Este sitio también ofrece tutoriales y otros recursos para diseñadores web, y opciones para exportar resultados de sus herramientas como códigos HEX, estilos HTML, CSS y SCSS.

13. W3Schools: Tutorial de colores

Pantalla de ejemplos de nombres del tutorial de colores

Este tutorial gratuito incluye enlaces a varias herramientas de color útiles

Si está buscando una solución todo en uno que incluya una guía de colores, así como varias herramientas diferentes, entonces el Tutorial de colores en W3Schools es la elección perfecta.

No solo puede aprender acerca de la teoría del color, las ruedas de color y los matices de color, sino que también podrá usar las otras herramientas que tiene, como el Convertidor de color . Con esta herramienta, puede convertir cualquier color hacia y desde nombres, códigos HEX, valores RGB, HSL, HWB y CMYK.

14. Medidor de color digital (Mac)

Ejemplo de medidor de color digital en acción

La herramienta incorporada de Mac te permite tomar colores de tu pantalla

De acuerdo, usuarios de Mac ... este es para ustedes. Con la herramienta Digital Color Meter incorporada en su máquina, puede 'tomar' un color desde cualquier lugar de la pantalla y luego obtener los valores de ese color como decimal, hexadecimal o porcentaje. Además, incluso puede 'copiar' el color seleccionado como texto o imagen.

Leer más: