Elegir colores «a ojo» es la forma más rápida de que un diseño se vea amateur. Una buena paleta no es una lista de colores lindos: es un sistema —unos pocos colores con roles claros y sus variantes— que hace que todo lo que armes se vea coherente. Esta guía te muestra cómo definir una paleta que funcione, cómo derivarla de una imagen que te guste y cómo dejarla lista para tu proyecto.
Mucha gente junta 8 o 10 colores que le gustan y los usa sin criterio. El resultado es ruido. Una paleta profesional se organiza por roles, no por gustos:
No hace falta inventar de cero. Las mejores paletas suelen derivar de una referencia: una foto, una obra de arte, un producto, un paisaje. Si ya tenés una imagen cuya combinación te encanta, extraé sus colores dominantes con un extractor de paleta: subís la imagen y obtenés los HEX exactos. A partir de ahí, asignás roles.
Un color no alcanza con una sola versión. Necesitás el primario claro
para un fondo suave, medio para un botón, oscuro para el texto sobre
claro. Por eso los sistemas de diseño (Material, Tailwind) usan
escalas: del 50 (casi blanco) al
900 (casi negro), conservando el tono. Con una escala por
rol tenés todas las variantes que vas a necesitar sin improvisar. La
herramienta de Color Studio puede generar estas escalas —y los tokens
semánticos— y copiarlas como CSS o Tailwind listas para pegar.
Una paleta linda que no se entiende no sirve. Dos chequeos rápidos: contraste suficiente entre texto y fondo, y que la información no dependa solo del color (cerca del 8% de los hombres tiene daltonismo). Podés simular cómo se ve tu diseño con daltonismo para asegurarte.
Un primario, uno o dos secundarios/acento, un neutro (grises) y colores de estado. Con 3 a 5 colores base y sus variantes alcanza para casi todo.
Con un extractor de paleta: subís la imagen y obtenés los colores dominantes con su HEX.
Variantes de un mismo color, del más claro (50) al más oscuro (900), conservando el tono. El estándar en sistemas de diseño.
Conviene revisarlo: si la información depende solo del color, parte de tus usuarios no la distingue. Simulá el daltonismo y cuidá el contraste.
Extraer una paleta de una imagen →Sacá los colores dominantes de una imagen, generá escalas 50–900 y copiá CSS o Tailwind.
Convertí una captura a dark mode o recoloreá con un esquema de referencia.
Revisá si tu diseño se entiende sin depender del color.