La mayoría de las paletas comienzan con un color que ya le gusta a alguien: un azul de marca, el verde de un logotipo, una muestra de tela para una boda. La parte difícil es todo después de esa primera elección. ¿Qué colores lo acompañan, cuántos necesitas y por qué un conjunto que parece equilibrado en una herramienta de diseño se desmorona una vez que el texto se coloca encima?
La armonía del color responde a las dos primeras preguntas con geometría simple en una rueda de colores. El contraste responde a la tercera y es la que la gente omite. Esta guía cubre ambos, con valores HEX reales que puedes verificar y muestra cómo funciona gratis generador de paleta de colores convierte un color base en seis tipos de paleta.
TL;Dr: Un generador de paleta de colores gira un color base 's tono alrededor de la rueda de colores HSL en ángulos fijos (180 grados para complementario, 120 para triádico, 90 para tetrádico, 30 y 60 para análogo) o mueve su ligereza para crear tonos, tintes y monocromáticos. El generador de paleta de colores Toolz hace esto del lado del cliente, gratis, sin registro: elija una base, elija uno de seis modos, haga clic en una muestra para copiar su código HEX o copie todo el conjunto como propiedades personalizadas de CSS. HSL no es perceptualmente uniforme, así que verifique cualquier par de texto y fondo con las relaciones de contraste WCAG antes de enviarlo.
¿qué es un generador de paletas de colores?
Un generador de paleta de colores es una herramienta que toma un color inicial y calcula colores relacionados utilizando reglas fijas, de modo que el conjunto se vea coordinado sin prueba ni error. Las reglas provienen de la rueda de colores: los colores opuestos contrastan, los colores uno al lado del otro se mezclan y los colores espaciados uniformemente alrededor del equilibrio de la rueda.
El generador Toolz funciona en HSL, que describe un color como tono, saturación y ligereza. El tono es un ángulo de 0 a 360 grados alrededor de la rueda (rojo a 0, verde a 120, azul a 240). La saturación es lo vivo que es el color, del 0% gris al 100% a todo color. La luminosidad va del 0% negro al 100% blanco. HSL está definido para la web en el Módulo de color CSS Nivel 4 especificación y cada navegador la convierte a los mismos valores RGB.
Trabajar en HSL hace que las reglas de armonía sean fáciles de expresar. Un color complementario es la misma saturación y ligereza con 180 añadidos al tono. Esa es una adición en lugar de jugar mucho con los controles deslizantes RGB.
¿Cuáles son los seis modos de armonía?
Cada modo es una receta para alejarse del color base. Esto es exactamente lo que hace el generador Toolz en cada uno, tomado de su código fuente.
| modo | que cambia | Muestras | Posiciones de tono |
|---|---|---|---|
| Sombras y amplificador; Tintes | Sólo ligereza, establecida en 90, 75, 60, el valor base, 35, 22 y 12 | 7 | Tono base |
| monocromo | Ligereza y saturación juntas | 5 | Tono base |
| complementario | El tono se voltea 180 grados, con una base más clara y un complemento más oscuro | 4 | Base, base + 180 |
| análogo | El tono sube 30 grados en cada sentido | 5 | -60, -30, base, +30, +60 |
| triádico | Hue espació un tercio del círculo | 3 | Base, +120, +240 |
| Tetrádico | Hue espació un cuarto del círculo | 4 | Base, +90, +180, +270 |
Dos detalles importan en la práctica. Análogos, triádicos y tetrádicos mantienen el color base y la luminosidad en cada muestra, por lo que solo cambian de tono. Sombras y amplificador; Los tintes y monocromáticos mantienen el tono y cambian la luminosidad, por lo que producen versiones claras y oscuras de un color.
Un ejemplo trabajado: todos los modos desde #4466ee
El generador se abre con #4466ee, un azul medio. Convertido a HSL es tono 228, saturación 83%, ligereza 60%. Esto es lo que devuelve cada modo para esa base. Estos son los códigos HEX que imprime la herramienta y puede reproducirlos con la conversión estándar de HSL a RGB en la especificación CSS.
triádico agrega 120 y 240 al tono: 228, luego 348, luego 108 (468 se ajusta a 108).
#4466ee hsl(228, 83%, 60%) blue
#ee4466 hsl(348, 83%, 60%) pink-red
#66ee44 hsl(108, 83%, 60%) green
Observe el patrón. Con la misma saturación y ligereza, girar exactamente un tercio de la rueda reorganiza los mismos tres valores del canal RGB: 44, 66 y ee lugares comerciales.
complementario agrega 180, que aterriza en el tono 48, un amarillo cálido. El modo también incluye una versión más clara de la base y una versión más oscura del complemento, por lo que obtienes cuatro muestras: #8aa0f4, #4466ee, #eecc44 y #d2ac14.
análogo pasos de 30 grados a la vez de 168 a 288: #44eecc, #44bbee, #4466ee, #7744ee, #cc44ee. Se lee como una banda que va desde verde azulado hasta azul y violeta.
Tetrádico agrega 90, 180 y 270: #4466ee, #ee44bb, #eecc44, #44ee77.
monocromo mantiene el tono 228 e intercambia saturación por ligereza en ambas direcciones: #c4cded, #879ae8, #4466ee, #0936ec, #0225b1.
Sombras y amplificador; Tintes establece la ligereza en 90, 75, 60, el valor base, 35, 22 y 12: #d0d9fb, #8aa0f4, #4466ee, #4466ee, #0f2da3, #0a1c67, #050f38.
El último muestra una peculiaridad que vale la pena conocer. La escala de tono utiliza pasos de ligereza fijos más la propia ligereza de la base '. Cuando la base se ubica exactamente en 90, 75, 60, 35, 22 o 12 por ciento de ligereza, como lo hace #4466ee en 60, dos muestras salen idénticas. Empuja la ligereza base un paso si quieres siete colores distintos.
¿Cómo se elige la armonía adecuada para un trabajo?
Elija la armonía según el contraste que necesite el diseño. Los esquemas de bajo contraste se sienten tranquilos y son fáciles de mantener consistentes; Los esquemas de alto contraste llaman la atención y son fáciles de exagerar.
| portería | Buen modo de inicio | porque |
|---|---|---|
| Una escala de colores de interfaz de usuario (100 a 700) | Sombras y amplificador; Tintes | Pasos de un tono, predecibles de claro a oscuro |
| Una marca mínima y cohesiva | monocromo | Todo comparte tono, nada choca |
| Un llamado a la acción que se destaca | complementario | El tono opuesto es el contraste más fuerte |
| Un aspecto suave y natural | análogo | Los tonos vecinos se mezclan |
| Un conjunto lúdico y equilibrado | triádico | Tres tonos espaciados uniformemente, ninguno dominante |
| Gráficos con varias series | Tetrádico | Cuatro tonos distintos que aún se relacionan |
Una regla general común para los diseños es dejar que un color cubra la mayor parte del área, un segundo tome una parte más pequeña y un acento aparezca con moderación. Funciona bien con paletas complementarias y triádicas, donde dar a todos los colores el mismo espacio tiende a parecer ruidoso.
¿Por qué una paleta parece equilibrada pero mal leída?
Una paleta puede verse equilibrada en HSL y aún fallar en la pantalla porque la luminosidad de HSL no es lo brillante que parece un color para una persona. HSL trata cada tono con un 60% de ligereza como igualmente ligero. La visión humana no.
El ejemplo complementario anterior hace que esto sea concreto. #4466ee y #eecc44 tienen una luminosidad HSL del 60%. Su luminancia relativa, la medida que utilizan las Pautas de accesibilidad al contenido web para el brillo percibido, es muy diferente: aproximadamente 0,17 para el azul y aproximadamente 0,62 para el amarillo. El amarillo es varias veces más brillante a la vista.
Esa brecha aparece como contraste. Usando la fórmula WCAG, relación de contraste = (L1 + 0.05) / (L2 + 0.05), donde L1 es el color más claro's luminancia:
| Pareja | Relación de contraste | WCAG AA para texto normal (4.5:1) |
|---|---|---|
| Texto en blanco en #4466ee | aproximadamente 4,77:1 | Pasa |
| Texto en blanco en #eecc44 | aproximadamente 1,57:1 | FALLAS |
| Texto negro en #eecc44 | sobre 13.4:1 | Pasa |
El propio generador ya reacciona a esto: cada muestra selecciona texto de etiqueta oscuro o blanco a partir de una estimación de brillo, razón por la cual las muestras amarillas obtienen etiquetas oscuras. Para diseños reales, ejecute los pares de texto y fondo que planea usar a través de a comprobador de contraste de color. Los umbrales provienen de WCAG 2.2: 4,5:1 para texto normal y 3:1 para texto grande en el nivel AA. El guía de contraste de color recorre las matemáticas de luminancia paso a paso.
¿cómo se exporta una paleta como variables CSS?
Haga clic en Copiar CSS y el generador colocará la paleta actual en su portapapeles como propiedades personalizadas de CSS :root. Los nombres están numerados en pasos de 100 en orden de muestra. Para el ejemplo triádico:
:root {
--color-100: #4466ee;
--color-200: #ee4466;
--color-300: #66ee44;
}
Pegue eso en la parte superior de una hoja de estilo y haga referencia a los colores en cualquier lugar:
.button-primary {
background: var(--color-100);
color: #ffffff;
}
La numeración sigue el orden de las muestras, no la luminosidad. En Sombras y amplificador; Modo de tintes que se ejecuta de claro a oscuro, entonces --color-100 es el tinte más claro. En modo triádico o análogo los números son sólo posiciones. Cambie el nombre de las variables a algo significativo como --brand, --accent y --surface una vez que hayas elegido, porque --color-200 no significa nada para la siguiente persona que lea su CSS.
Para copiar un solo color, haga clic en su muestra. El código HEX va al portapapeles y la muestra muestra "Copied" por un momento.
¿puedes hacer una paleta de bodas o pastel con él?
Sí, siempre y cuando traigas el color inicial. No hay ajustes preestablecidos de boda ni temas seleccionados, por lo que la paleta es tan buena como la base que elijas.
Para una boda, toma un color de algo real: las flores, la tarjeta de invitación, la tela de un vestido de dama de honor. Ingrese su código HEX y pruebe cada modo. A partir de un verde salvia, #9caf88, devoluciones complementarias #c2ceb6, #9caf88, una lavanda polvorienta #9b88af y un #755e8d más profundo. Esa lavanda contra la salvia es una combinación clásica y las matemáticas la encontraron con un solo clic.
Para los pasteles, comience desde una base pálida y suavemente saturada como #a7c7e7. Análogos, triádicos y tetrádicos mantienen esa ligereza y saturación en cada muestra, por lo que todo el conjunto permanece suave. Sombras y amplificador; Los tintes y monocromáticos mueven deliberadamente la ligereza, por lo que agregan colores oscuros, hasta #0d1f30 para ese azul. No hay un control deslizante de ligereza separado; el color base es el control.
Los colores de la pantalla y los colores impresos difieren. Un monitor mezcla luz roja, verde y azul, mientras que una impresora coloca tinta cian, magenta, amarilla y negra sobre papel, y algunos colores brillantes de la pantalla no tienen un equivalente exacto de tinta. Si una paleta va a ser papelería, solicite una prueba impresa antes de ejecutarla por completo.
¿Cuáles son los errores y casos de error comunes?
La mayoría de los problemas de paleta provienen de la entrada o de confiar demasiado en las matemáticas.
La paleta se vuelve azul mientras escribes. Hasta que el cuadro de texto contenga un código HEX válido, el generador vuelve a #4466ee. Un valor medio escrito como #9c investigaciones operacionales #9caf8 muestra la paleta azul predeterminada. El campo acepta tres o seis dígitos hexadecimales, con o sin #, entonces #9ca en camino a #9caf88 muestra brevemente una paleta para #99ccaa.
La muestra base está a un paso de distancia. Los colores se redondean a números HSL completos antes de volver a convertirlos, por lo que algunas bases no regresan exactamente de ida y vuelta. #c08081, por ejemplo, vuelve como #c18182. La diferencia es una unidad por canal e invisible, pero importa si coincide exactamente con un código de marca: mantenga el HEX oficial para la base y use los generados para el resto.
Usando todos los colores en todas partes. Una paleta análoga de cinco colores es una gama para elegir, no cinco colores que necesitan un trabajo.
Saltarse el contraste. Como se muestra arriba, dos colores con la misma luminosidad HSL pueden diferir más de tres veces en luminancia. Verifique los pares de texto.
Esperando uniformidad perceptiva. Los pasos de sombra son uniformes en cuanto a ligereza HSL, no en cuanto a su apariencia. Si necesita una escala que se vea uniforme, ajuste los pasos individuales a simple vista o trabaje en un espacio de percepción como OKLCH, que también define CSS Color 4.
¿Cómo se compara esto con otras herramientas de color?
La generación de paletas es un paso en un flujo de trabajo más largo. La tabla muestra qué herramienta se adapta a cada paso.
| Tarea | herramienta | Lo que te da |
|---|---|---|
| Encuentre o pruebe un color inicial | Selector de color | HEX, RGB y HSL para cualquier color |
| Construya un conjunto coordinado | Generador de paleta de colores | Seis modos de armonía, exportación CSS |
| Haz una escala de grano fino de un color | Generador de tonos de colores | Una rampa dedicada al tinte y la sombra |
| Mezcla dos colores | Mezclador de colores | Colores intermedios entre dos entradas |
| Verifique la legibilidad del texto | Comprobador de contraste de color | Relación WCAG y pasa o falla |
Si la escala importa más que la armonía, el guía para generar matices y tintes profundiza en la construcción de 50 a 900 rampas. Cada herramienta de color aparece en el centro de herramientas de color.
¿El generador es privado y funciona sin conexión?
Sí. Todas las matemáticas y renderizados HSL se ejecutan en su navegador con JavaScript. No se carga nada de lo que escribe y después de que la página se carga generador de paleta sigue funcionando sin conexión de red. Copiar una muestra o el CSS cuenta para un límite de uso diario, que registra el modo en el que se encontraba, no sus colores.
