¿Qué es Paleta Monocromática?

Elige un color base y genera tonos oscuros y claros a partir de él. Define el número de pasos y exporta como variables CSS, configuración de Tailwind, o copia valores hex/RGB individuales.

Elige cualquier HEX o usa el selector de color, define cuántos claros (más luz), tonos (mezclados con gris) y oscuros (más sombra) quieres, y la página interpola cada escala en espacio LAB para que los pasos se vean parejos. Cada muestra incluye HEX, RGB y HSL con copia de un clic, y Copiar todo se lleva la escala completa de una vez. Filtra la vista para ver solo claros, tonos u oscuros, o exporta toda la escala como variables CSS, un fragmento de Tailwind, variables SCSS, tokens de diseño JSON o una hoja de muestras PNG.

Cómo usar

1. Elige un color base con el selector, escribe un código hex o extrae el color dominante de un logo o foto con Desde imagen.
2. Ajusta cuántos claros (más luminosos), tonos (mezcla con gris) y oscuros (más sombríos) quieres, y luego usa el filtro Mostrar si solo necesitas una fila.
3. Copia valores de color individuales, pulsa Copiar todo para llevarte todos los HEX de una vez, o exporta toda la paleta como propiedades personalizadas CSS, un objeto de configuración de Tailwind, variables SCSS, tokens de diseño JSON o una muestra de imagen.

Cuándo usar

• Armar un sistema de diseño UI que necesita nueve pasos consistentes del color de marca para botones y estados.
• Diseñar una visualización de datos donde toda la serie debe salir del mismo tono (mapas de calor, barras secuenciales).
• Decidir combinaciones de texto y fondo: -100 de fondo con -900 de texto suele dar un contraste seguro.

Resultado

Estás creando un panel de control y necesitas una paleta azul para la visualización de datos. Eliges #3B82F6 como base, generas 9 pasos desde casi blanco (#EBF2FE) hasta casi negro (#1A2744). Exportas como variables CSS y usas --color-blue-100 hasta --color-blue-900 en todos tus gráficos.

Preguntas frecuentes

¿Qué es exactamente una paleta monocromática?

Es un conjunto de colores que comparten un mismo tono pero varían en saturación y luminosidad. El resultado se lee como una sola familia (matices y tintes del mismo azul, por ejemplo) y evita el ruido visual de mezclar tonos distintos.

¿Cuántos pasos conviene generar?

Para UI lo habitual son nueve (Tailwind, Material y IBM Carbon usan escalas 50-900). En visualización de datos suelen bastar 5-7 pasos. Más de 11 empieza a parecer un degradado y los tonos contiguos resultan difíciles de distinguir.

¿Qué formato me conviene exportar?

Las variables CSS se pegan en cualquier hoja de estilos. El fragmento Tailwind va en theme.extend.colors y habilita utilidades como bg-brand-500. SCSS te da las variables $brand-500 y un mapa de Sass. JSON exporta la escala como tokens de diseño estructurados para un style dictionary. La hoja PNG sirve para compartir en Figma o un manual de marca.

¿Por qué los tintes más claros se ven lavados?

Con luminosidad muy alta el ojo percibe casi cualquier color saturado como blanco. Si el -100 se ve igual al blanco puro, baja la cantidad de tintes o acerca el tope de luminosidad al color base; los matices vecinos volverán a diferenciarse.

¿Los colores generados cumplen accesibilidad?

Ahora puedes comprobarlo aquí mismo. Activa la insignia de contraste WCAG y cada muestra indica si el texto en negro o blanco supera AA o AAA sobre ella; la vista previa de visión del color recolorea la escala tal como la vería alguien con deuteranopía, protanopía o tritanopía. Como regla rápida, combina un paso -100/-200 con uno -700/-800 y normalmente cumplirás WCAG AA.

Herramientas relacionadas