Elegí un color, subí tu logo o partí de tu rubro, y armá una paleta con armonías, tonos del 50 al 900 y el chequeo de contraste para que los textos se lean bien.
Tu logo no sale de tu dispositivo: los colores se calculan en tu navegador.
Es un punto de partida, no una regla: lo más importante es que tu marca se distinga de la competencia.
Elegí un color, subí tu logo o elegí tu rubro y la paleta se arma sola.
Tocá cualquier color para copiar su código.
El 500 es tu color. Los claros sirven para fondos y los oscuros para textos y estados de botones.
| Tono | Con texto blanco | Con texto negro |
|---|
AA: el mínimo para texto normal (4,5:1). AAA: lo ideal (7:1). Títulos: alcanza para textos grandes (desde 24 px, o 18,5 px en negrita), pero no para párrafos. No: no se lee bien.
Las variables CSS sirven para que quien haga tu web use exactamente estos colores.
Armonías: se calculan girando el tono del color en el círculo cromático. Complementaria: tono + 180°. Análoga: tono ± 30°. Triádica: tono + 120° y + 240°. La monocromática mantiene el tono y cambia la luminosidad.
Escala 50–900: el 500 es tu color. Hacia el 50 se mezcla con blanco y hacia el 900 con un oscuro del mismo tono. Los claros sirven para fondos y los oscuros para textos o para el botón al pasar el mouse.
Contraste (WCAG 2.2): (L1 + 0,05) ÷ (L2 + 0,05), donde L1 y L2 son la luminancia relativa del color más claro y del más oscuro. Texto normal: nivel AA desde 4,5:1 y AAA desde 7:1. Títulos grandes (24 px o más, o 18,5 px en negrita): AA desde 3:1.
Colores de tu logo: se agrupan los píxeles parecidos con el método k-means y te mostramos hasta 5 colores con su porcentaje. Se ignoran las partes transparentes y, si querés, el fondo. Tu logo no se sube a ningún lado: se analiza en tu navegador.
Gratis, sin registro y sin guardar tus datos: todo se calcula en tu navegador. ·
Los que salen del círculo cromático: el complementario (el opuesto), los análogos (los vecinos) y la tríada. La tríada son tres colores a la misma distancia.
da contraste y llama la atención
combinación suave y armónica
variada y equilibrada
texto normal, según WCAG
Verde: sus análogos son el turquesa y el verde lima; su complementario, el magenta o el rosado. Rojo: combina con el verde azulado (su opuesto) y con el naranja y el magenta (sus vecinos). Azul: su complementario es el naranja; sus análogos, el violeta y el turquesa.
Gris: es neutro y combina con casi todo. Un acento saturado (naranja, amarillo o azul eléctrico) le da vida. Una regla práctica para repartir los colores es 60-30-10: 60 % el dominante, 30 % el secundario y 10 % el acento.
Point Web es una agencia de diseño web y marketing digital de Buenos Aires. Diseñamos sitios con tu identidad: los colores de tu marca aplicados con criterio, textos que se leen bien en el celular y una estructura pensada para que te contacten.
Con 3 a 5 alcanza: un principal, uno o dos secundarios y neutros para fondos y textos. La regla 60-30-10 ayuda a repartirlos.
Subí la imagen en la pestaña «Mi logo»: la herramienta detecta los colores que más se repiten y te da su código HEX exacto.
Es la diferencia de luminosidad entre el texto y el fondo. Las pautas de accesibilidad WCAG piden al menos 4,5:1 para texto normal y 3:1 para textos grandes: con menos, cuesta leer, sobre todo en el celular.
Casi todos, porque el gris es neutro. Un color saturado como acento, por ejemplo naranja, amarillo o azul eléctrico, le da vida sin pelearse con el fondo.
Copiá las variables CSS o los códigos HEX y pasáselos a quien te arme el sitio. En WordPress con Elementor se cargan como colores globales y se aplican en todo el sitio.
Para seguir leyendo: Cómo crear una página web en Argentina. Ver todas las herramientas gratis →
Point Web — Nicaragua 5812, Palermo, CABA · WhatsApp 11 6792-8752 · proyectos@pointwebglobal.com
