Color Palette Generator
Generate color palettes
Generate color palettes Se ejecuta localmente en su navegador
Complementary
#4ecdc4
#cd4e57
Analogous
#4ecd85
#4ecdc4
#4e96cd
Triadic
#4ecdc4
#c44ecd
#cdc44e
Split complementary
#4ecdc4
#cd4e96
#cd854e
Tetradic
#4ecdc4
#844ecd
#cd4e57
#97cd4e
Tints (towards white)
c3eeeb
88ddd7
4cccc3
2d9f97
1c635e
Shades (towards black)
278b84
1f6f6a
18544f
103835
081c1a
#4ecdc4 #cd4e57 #4ecd85 #4e96cd #c44ecd #cdc44e #cd4e96 #cd854e #844ecd #97cd4e #c3eeeb #88ddd7 #4cccc3 #2d9f97 #1c635e #278b84 #1f6f6a #18544f #103835 #081c1a
About the
El Generador de paleta de colores toma un color base y deriva los esquemas de armonía estándar de él: complementario, análogo, triádico, complementario dividido y tetrádico, además de una rampa de tintes hacia el blanco y sombras hacia el negro. Las armonías se calculan en HSL rotando el tono mientras se mantiene la saturación y la luminosidad, razón por la cual los resultados permanecen relacionados con su base en lugar de variar. La rampa es la parte que la mayoría de las paletas realmente necesitan, porque una interfaz de trabajo necesita varios valores del mismo tono para los estados de desplazamiento, activo y deshabilitado, no solo un color de acento.
Where people use the
- Construir una paleta en torno a un único color de marca.
- Produciendo variantes flotantes, activas y deshabilitadas desde un solo acento.
- Explorar alternativas a un color que no pasó la prueba de contraste.
- Generando una rampa neutra para superficies y bordes.
How to use the
- 1
Elige un color base
Ingrese un valor hexadecimal como 4ECDC4 o use el selector. Todo lo demás se deriva de este color.
- 2
Leer los esquemas de armonía.
Cada esquema es una rotación de tono diferente. El complementario es de 180 grados, el triádico es de 120 y 240, y así sucesivamente.
- 3
Tome la rampa de tinte y sombra
Cinco tonos hacia el blanco y cinco tonos hacia el negro le brindan los estados y elevaciones que necesitará en una interfaz real.
- 4
Copia los valores
La lista completa de valores hexadecimales generados está en un bloque, lista para pegar en una hoja de estilo o en un archivo de token de diseño.
- 5
Comprueba el contraste antes del envío.
Ejecute cualquier par de texto y fondo de la paleta a través del Comprobador de contraste. Armonioso no es lo mismo que legible.
Consejos y mejores prácticas
- Elija el color base de la marca y luego ajuste la luminosidad solo para los estados.
- Reserva el color complementario para la acción que quieras que se note.
- Siempre realice una verificación de contraste en el emparejamiento final antes del envío.
Preguntas frecuentes
¿Cuál es la diferencia entre los esquemas?
Complementario utiliza el tono opuesto, que proporciona el contraste más fuerte y se adapta a un llamado a la acción. Análogo utiliza vecinos a 30 grados a cada lado, lo que es tranquilo y seguro. Triadic distribuye tres tonos de manera uniforme, lo que es más vivo y más difícil de controlar. La división complementaria suaviza el choque complementario al usar los dos tonos a cada lado del opuesto. Tetradic utiliza cuatro tonos en ángulo recto, lo que se adapta a tableros complejos.
¿Por qué los colores generados comparten la misma saturación y luminosidad?
Porque rotar sólo el tono es lo que los mantiene reconociblemente relacionados. Variar la luminosidad al mismo tiempo produce colores que parecen no estar relacionados, lo que anula el objetivo de una paleta.
¿Los tintes son solo el color mezclado con blanco?
Efectivamente sí, pero se calcula en HSL aumentando la luminosidad mientras se mantiene el tono y la saturación. Esto mantiene el tono estable, mientras que la mezcla ingenua en RGB se inclina hacia el gris.
¿Cuantos colores debe tener una paleta?
Para la mayoría de las interfaces, dos o tres tonos más una rampa neutra son suficientes. Un esquema con cinco tonos saturados es difícil de usar de manera consistente y generalmente termina pareciendo accidental.
¿Comprueba la accesibilidad?
No, solo genera colores. Utilice el Comprobador de contraste en cualquier combinación que desee utilizar para texto.