Generador de Paletas Monocromáticas
Los colores y las paletas se generan en este navegador. En el modo por pasos, el proyecto se conserva hasta 30 minutos en el almacenamiento de sesión de esta pestaña; ningún color se envía al servidor ni aparece en la URL.
Crea una escala monocromática
Introduce un color y elige la transformación, el espacio de interpolación y el número de muestras.
Formatos admitidos: #RGB, #RRGGBB, rgb(0–255) y hsl() con porcentajes. No se admiten canales alfa.
Se usa en las exportaciones de variables CSS, Tailwind, SCSS y tokens de diseño.
Elige un color base y el generador construye una paleta monocromática alrededor de él: matices (mezclados progresivamente con blanco para una escala más clara), sombras (mezclados progresivamente con negro para una escala más oscura) y tonos (mezclados con gris para reducir la saturación). Útil para sistemas de diseño que necesitan una escala coherente de un color de marca, como la escala 50–950 de Tailwind, pero ajustable, o para elegir estados de hover y activos sin salir de la paleta.
Cómo se genera la paleta
-
1
Ingresa un color base
Usa #RGB, #RRGGBB, canales rgb() enteros o porcentajes hsl().
-
2
Elige el tipo de paleta
Elige una escala completa clara y oscura, matices hacia blanco, sombras hacia negro o tonos hacia neutro.
-
3
Elige la cantidad de pasos
5, 9 u 11 pasos. Nueve usa las etiquetas 100–900 habituales al estilo de Material; 11 añade 50 y 950 para una escala al estilo de Tailwind.
-
4
Copia o exporta
Copia HEX, RGB, HSL u OkLCH, o exporta CSS, Tailwind, SCSS y JSON de Design Tokens Community Group.
Matices vs. sombras vs. tonos
- Matiz = color base + blanco. Más claro, más pastel.
mix(base, #fff, p%)donde p es el porcentaje de blanco. - Sombra = color base + negro. Más oscuro, más melancólico.
mix(base, #000, p%). - Tono = color base + gris. Mismo brillo, menor saturación, más apagado.
Las tres transformaciones producen diferentes caracteres visuales: los matices se sienten aireados y optimistas, las sombras se sienten sólidas y serias, los tonos se sienten discretos y sofisticados.
Una escala de 9 pasos desde una base
| Paso | Descripción | Uso típico |
|---|---|---|
| 100 | Muy claro | Superficies, fondos de chips |
| 200 | Claro | Estados deshabilitados |
| 300 | Medio claro | Bordes, divisores |
| 400 | Ligeramente apagado | Texto secundario (fondo claro) |
| 500 | Color base | Marca por defecto, tu base |
| 600 | Medio oscuro | Estados de hover en acciones primarias |
| 700 | Oscuro | Estados activos, encabezados |
| 800 | Muy oscuro | Texto fuerte en fondo claro |
| 900 | Sombra más oscura | Texto de máximo contraste |
Las etiquetas numéricas se inspiran en convenciones habituales de tokens; los colores generados no son valores oficiales de Material ni Tailwind.
Por qué lo monocromático funciona para interfaces
- Familiaridad. Cada elemento se ve inconfundiblemente relacionado.
- Coherencia. Reutilizar un solo matiz facilita reconocer relaciones, pero no convierte por sí solo una interfaz en accesible para el daltonismo.
- Simplicidad. Una decisión, el color base, impulsa toda la paleta.
Combinando con neutros
Una paleta monocromática también necesita grises. Patrón común:
- Escala primaria de tu color de marca (9 pasos).
- Escala neutra de una versión desaturada del primario (9 pasos).
- Tal vez un color de acento (un solo paso bien elegido para alertas y CTAs).
Tómalo como una estructura inicial, no como una regla fija. El número de paletas depende de los estados, la visualización de datos, los colores semánticos y la accesibilidad del producto.
Puntos de control de contraste
Para texto sobre un fondo, WCAG requiere 4.5:1 para texto normal y 3:1 para texto grande. Las etiquetas 100, 500 o 900 no implican una relación de contraste concreta; el resultado cambia con el color base, el tipo de paleta y el espacio de interpolación.
Siempre verifica las combinaciones específicas que planeas usar contra un verificador de contraste.
Exportando a tu sistema de diseño
Formatos de salida:
- Propiedades personalizadas CSS:
--primary-50: #f0f9ff; --primary-100: ... - Configuración de Tailwind: objeto JS listo para pegar en
tailwind.config.js → theme.extend.colors. - Mapa SCSS para proyectos Sass.
- JSON de tokens de diseño con la estructura
$typey$valuede Design Tokens Community Group.
Preguntas frecuentes
Los matices avanzan hacia blanco, por lo que una base muy saturada puede volverse pastel rápidamente. Compara HSL y OkLCH, usa menos muestras o elige una base menos saturada.
Puedes elegir HSL u OkLCH. HSL modifica sus ejes de luminosidad y saturación; OkLCH modifica la luminosidad perceptiva y el croma, y reduce el croma cuando hace falta para mantener el resultado dentro de sRGB.
En la escala completa, el color base ocupa el token 500 central. La escala de matices termina en la base, la de sombras empieza en ella y la de tonos termina en ella. Las etiquetas no garantizan una luminosidad concreta.
No existe una integración directa con Figma. Copia valores individuales o usa el texto CSS, Tailwind, SCSS o JSON de Design Tokens Community Group como punto de partida para tu flujo de trabajo.
Herramientas relacionadas
Creador de listas por niveles
Crea una lista privada con texto e imágenes locales, personaliza niveles, clasifica con arrastre o teclado y exporta JSON, PNG o SVG.
Comprimir GIF
Reduce el tamaño de un GIF animado en el navegador: baja dimensiones, conserva menos fotogramas y ajusta la calidad de codificación. Previsualiza el bucle antes de descargar.
WebP a JPG
Convierte imágenes WebP a JPG/JPEG directamente en el navegador. Elige la calidad, aplana la transparencia sobre un color de fondo y descarga sin subir archivos.
Vectorizador de PNG a SVG
Convierte imágenes raster PNG en rutas SVG desde el navegador. Ideal para logotipos, iconos y arte lineal. Controla el umbral, el número de colores y el suavizado.
Generador de códigos de barras
Crea en el navegador códigos de barras 1D en Code 128, EAN, UPC, ITF-14 y otros formatos compatibles. Descarga el resultado como SVG o PNG.
Generador de códigos QR
Genera un código QR localmente en el navegador a partir de una URL, texto plano o una carga QR correctamente formateada, y descárgalo como PNG.