Color
Generador de paletas de colores
Un color de partida y sale todo: la escala del 50 al 900 como la de un sistema de diseño, y las combinaciones clásicas —complementaria, análoga, triádica, tetrádica y monocromática—. Listo para copiar como variables CSS, configuración de Tailwind, JSON o una imagen.
Tus imágenes y tus colores no salen de esta página.
Por qué importa que esto no se suba
Dos de estas cuatro herramientas trabajan con imágenes, y lo que se arrastra aquí casi nunca es una foto cualquiera: es el logotipo de un cliente antes del lanzamiento, una captura de un panel interno o una foto de producto sin publicar. Mandarla al servidor de un desconocido para sacarle un color es un intercambio malo, y encima innecesario: leer los píxeles de una imagen no necesita ningún servidor, lo hace el propio navegador con el lienzo que ya trae. Aquí no hay a dónde enviarla.
Para qué la usa la gente
- Arrancar un sistema de diseñoDiez pasos coherentes desde el color de marca, ya con los nombres que espera el código.
- Rellenar los huecos de una marcaTienes el color principal y te faltan los tonos de apoyo para fondos y bordes.
- Elegir un color de acentoLa complementaria dividida da un acento que contrasta sin pelearse con el principal.
- Pasar la paleta a TailwindEl objeto de configuración ya escrito, con las claves numéricas que espera.
- Enseñársela a alguienLa imagen PNG con los diez pasos y sus valores, para pegarla en una presentación.
- Salir de un atascoEl botón de azar propone un punto de partida cuando no se sabe por dónde empezar.
La escala del 50 al 900, y por qué se usa así
Es la forma en que los sistemas de diseño modernos organizan un color: en vez de tener «el azul», se tienen diez azules numerados del 50 —casi blanco— al 900 —casi negro—. El 500 suele ser el color de marca, y el resto son los que hacen falta alrededor: el 50 para un fondo suave, el 100 para el fondo de un aviso, el 700 para el texto sobre ese fondo, el 900 para un titular.
La gracia es que los números son una promesa: si en todo el proyecto el fondo suave es el 50 y el texto encima es el 700, cambiar el color de marca es cambiar una línea y no revisar cien pantallas. Por eso la exportación viene ya en el formato que espera cada sitio.
Aquí el matiz se conserva en los diez pasos y la luminosidad recorre la escala completa; la saturación baja un poco en los extremos, que es lo que evita que los tonos claros salgan chillones y los oscuros, sucios. El paso marcado con un borde es el más parecido a tu color de partida.
Las combinaciones, en una frase cada una
Complementaria: el color de enfrente en la rueda. Máximo contraste. Va bien para lo que tiene que destacar —una llamada a la acción— y mal para superficies grandes, porque vibra.
Análoga: los dos vecinos. Tranquila y coherente; es lo que se usa cuando se quiere que todo pertenezca a la misma familia.
Triádica: tres colores repartidos por igual. Viva y equilibrada, pero hay que dejar que mande uno y que los otros dos acompañen.
Tetrádica: dos parejas complementarias. La más rica y la más difícil de manejar: con cuatro colores fuertes hace falta mucha disciplina.
Complementaria dividida: en vez del opuesto exacto, sus dos vecinos. Casi todo el contraste de la complementaria con bastante menos tensión. Suele ser la apuesta segura.
Monocromática: un solo matiz en cinco luminosidades. Imposible que quede mal, y por eso también es la menos memorable.
Un aviso que conviene tener presente
Una paleta bonita no es una paleta legible. Que dos colores queden bien juntos no significa que un texto en uno se lea sobre el otro: son dos cosas distintas y se miden distinto. Cuando tengas la paleta, pasa los pares que vayas a usar para texto por el comprobador de contraste; suele haber alguna sorpresa, sobre todo con los amarillos y los cianes.
Para qué se usa cada paso
| Paso | Dónde se usa normalmente |
|---|---|
| 50 | Fondos muy suaves: la fila alterna de una tabla, el fondo de una sección destacada. |
| 100 | Fondo de un aviso o de una etiqueta. Sigue siendo casi blanco. |
| 200 | Bordes suaves, separadores, el estado deshabilitado de un control. |
| 300 | Bordes visibles y elementos decorativos. Aquí ya no se lee texto oscuro encima con comodidad. |
| 400 | Iconos y elementos gráficos secundarios. |
| 500 | El color de marca. Fondos de botón principal, enlaces sobre blanco. |
| 600 | El estado sobre el que se pasa el ratón del 500. Y el color de un enlace si el 500 se queda corto de contraste. |
| 700 | Texto de color sobre un fondo del 50 o del 100. Es el que suele cumplir AA. |
| 800 | Titulares y textos destacados en color. |
| 900 | Fondos oscuros y texto sobre claro cuando hace falta el máximo contraste. |
Preguntas frecuentes
¿Qué significan los números del 50 al 900?
Son la luminosidad, no la intensidad. El 50 es el más claro, casi blanco; el 900 el más oscuro. El 500 suele ser el color de marca.
La convención viene de los sistemas de diseño y su utilidad es que los números sean una promesa en todo el proyecto: si el fondo suave siempre es el 50 y el texto encima siempre el 700, cambiar de color de marca es tocar una línea.
¿Puedo usar esta paleta directamente en mi web?
Sí: la exportación te da las variables CSS listas para pegar en el :root, el objeto de Tailwind con sus claves numéricas, o el JSON si tu sistema lee de ahí.
Con una advertencia importante: una paleta bonita no es una paleta legible. Pasa por el comprobador de contraste los pares que vayas a usar para texto antes de darlos por buenos.
¿Cuál de las combinaciones es la mejor?
Para empezar, la complementaria dividida: da casi todo el contraste de la complementaria con bastante menos tensión, y es difícil que quede mal.
La complementaria pura funciona muy bien en cosas pequeñas que tienen que destacar y muy mal en superficies grandes, donde vibra. La triádica y la tetrádica son más ricas pero piden disciplina: hay que dejar que mande uno.
¿Por qué mi color no es exactamente el 500?
Porque la escala usa unos valores de luminosidad fijos para que todas las paletas sean comparables entre sí, y tu color puede caer entre dos pasos. El que aparece marcado con un borde es el más parecido al tuyo.
Si necesitas que tu color sea exactamente uno de los pasos, ajusta un poco su luminosidad en el selector hasta que coincida.
¿La imagen PNG se sube a algún sitio?
No. Se dibuja en el lienzo del propio navegador y se descarga directamente a tu equipo. Como todo lo demás de estas herramientas, no hay ninguna petición que lleve nada a ningún servidor.
Las otras herramientas de color
Selector y conversor
Rueda de color y los valores en HEX, RGB, HSL, HSV, CMYK y nombre CSS, sincronizados. Con lector desde una foto.
Comprobador de contraste
La razón de contraste, los niveles AA y AAA, y el color más parecido que sí cumple cuando el tuyo no llega.
Extraer de una imagen
Los colores dominantes de una foto con el porcentaje que ocupa cada uno. La imagen no sale del navegador.