Generador de paletas de colores gratis
Generar paletas de colores armoniosas de un color base utilizando la teoría del color.
Cargando herramienta…
Cómo crear una paleta de colores a partir de un color base
Explora las armonías de color desde un color base. Compara las muestras y copia sus valores HEX para su diseño.
- Elige un color base.
- Selecciona armonía análoga, complementaria, triádica, tetrádica o monocroma.
- Comparar colores para fondos, acentos y elementos de soporte.
- Haz clic en una muestra para copiar su valor HEX.
¿Quién saca el máximo provecho de un generador de paletas
Un generador de paletas ayuda cuando ya tiene un color que debe guardar y necesita unos pocos más que se sienten bien al lado de él. Un dueño de una pequeña empresa con un color de logotipo puede construir un tema web simple alrededor de ella. Un estudiante que hace diapositivas puede elegir colores de acento para gráficos sin adivinar.
Los desarrolladores lo utilizan para dibujar colores de interfaz antes de que un diseñador los refina. Los artesanos e ilustradores lo utilizan para planificar un conjunto limitado de pinturas o hilos. En cada caso el color base se mantiene fijo y la herramienta sugiere tonos relacionados, por lo que se parte de un conjunto razonado en lugar de una pantalla en blanco.
Un ejemplo trabajado con una base de ternera
Digamos que su color base es #2A9D8F, un azulado silenciado. La herramienta lo lee como aproximadamente hsl(173, 58%, 39%). Con Analogous seleccionado, cambia el tono por -30, -15, 0, +15 y +30 grados y mantiene la saturación y la ligereza de la misma. Las cinco muestras son #2A9D56, #2A9D72, #2A9D8F, #2A8E9D y #2A729D, que van de verde a azul azul suave.
Cambiar a Monocromo y el tono se mantiene puesto mientras que la ligereza se mueve en pasos de 15 puntos. El resultado es #0B2825, #1A6158, #2A9D8F, #46CEBD y #82DED3. El paso más oscuro caería por debajo del 10 por ciento de ligereza, por lo que la herramienta lo mantiene en el 10 por ciento. Cada swatch también muestra sus valores HSL bajo el código HEX, lo que hace que el patrón sea fácil de ver.
Cómo se construye cada armonía
Cada esquema comienza convirtiendo su color HEX a tono, saturación y ligereza. Complementario añade 180 grados al tono, por lo que el azulado de arriba obtiene un rojo silenciado, #9D2A38. Triádico utiliza tonos de 120 y 240 grados de distancia. Tetradic utiliza pasos de 90 grados, dando cuatro tonos espaciados uniformemente alrededor de la rueda.
La herramienta siempre muestra cinco muestras. Para esquemas complementarios, triádicos y tetradicos, algunas muestras se repiten de modo que la base y sus socios aparecen en una fila equilibrada. Por ejemplo, la fila complementaria muestra la base dos veces y el color opuesto tres veces. Solo cambia el tono en estos esquemas, por lo que cada muestra comparte la saturación y ligereza del color base.
Debido a que la saturación y la ligereza se arrastran, una base muy pálida o muy oscura da una paleta pálida u oscura. Monocromo es la excepción, ya que varía la ligereza entre el 10 y el 90 por ciento y deja solo el tono.
Errores que debilitan una paleta
El error más común es usar cada muestra a la misma fuerza. La mayoría de los diseños funcionan mejor con un color dominante, un color de soporte y un pequeño acento. Otro supone que las muestras serán legibles como texto entre sí. La armonía del tono no dice nada sobre el contraste, así que revisa cada par de texto y fondo antes de publicar.
Escribir un código HEX a mano también es fácil de equivocarse. Usa el formulario completo de seis dígitos con el hash principal, como #2A9D8F, o elige el color con el selector de color. Finalmente, vea sus colores en más de una pantalla, porque las pantallas pueden representar los mismos valores de manera diferente.
Consejos útiles y limitaciones
- Harmony no garantiza un contraste de texto legible.
- Prueba la paleta con combinaciones de contenido real y de fondo.
- Prueba el mismo color base en los cinco esquemas antes de elegir, ya que el cambio toma un clic y las muestras se actualizan al instante.
- Anote los valores de HSL que se muestran en cada muestra si planea hacer variaciones más claras u oscuras más adelante.
Preguntas frecuentes
¿Se puede acceder automáticamente a las paletas?
No. Comprueba pares de texto/background en Color Contrast Checker.
¿Puedo usar muestras en CSS?
Sí. Copia los valores HEX en las declaraciones CSS adecuadas.
¿Qué significa complementario?
Utiliza relaciones de tonos opuestos en la rueda de color; el contexto, la saturación y la ligereza todavía afectan el resultado.
¿Por qué se repiten algunas muestras en los esquemas complementarios y triádicos?
La herramienta siempre muestra cinco muestras, por lo que los esquemas con sólo dos o tres tonos distintos repiten algunos de ellos para llenar la fila.
¿El generador cambia la saturación o la ligereza?
Sólo el esquema monocromo cambia la ligereza; los otros esquemas giran el tono y mantienen la saturación y ligereza del color base.
¿Qué formato de color me da la acción de copia?
Al hacer clic en un swatch copia tu código HEX, y los valores HSL se muestran debajo de él como referencia.
Su entrada se procesa en tu navegador sin una cuenta ToolWorld Online. Copia o descarga cualquier cosa que quieras guardar antes de salir de la página.
Lee nuestra política de privacidad · Acerca de ToolWorld Online