WerklyTools
Esc
↑↓ navegar↵ abrir
ES
Invítame a un café

Generador de paletas de colores

Parte de tu color de marca y obtén una escala completa de 50 a 950 perceptualmente uniforme, lista para tu sistema de diseño, junto con combinaciones armónicas. El color original se conserva exacto en el paso que le corresponde.

Procesado 100% en tu navegador

¿Cómo lo compruebo?

Tus archivos no se suben: se procesan en tu dispositivo. Puedes comprobarlo tú mismo: carga la página, desconecta el WiFi y la herramienta seguirá funcionando. O abre las herramientas del navegador (F12), pestaña «Red», y verás que no sale ningún archivo.

Escala 50–950
Armonías
Exportar
Ctrl + Enter ejecutarCtrl + C copiar resultado
Cómo usar
  1. 1Escribe tu color base en cualquier formato o pulsa «Aleatorio» para inspirarte.
  2. 2Dale un nombre a la paleta (por ejemplo «brand» o «primary»).
  3. 3Elige una armonía para ver colores que combinan con tu base.
  4. 4Exporta la escala como variables CSS, Tailwind, SCSS o JSON, o haz clic en un tono para copiarlo.
Casos de uso
  •  Crear la escala de color de un sistema de diseño o de un tema de Tailwind CSS.
  •  Generar estados hover, fondos suaves y bordes a partir de un único color de marca.
  •  Encontrar colores secundarios y de acento que combinen.
  •  Compartir una paleta con tu equipo mediante un enlace.
Preguntas frecuentes
¿Por qué la escala se calcula en OKLCH y no en HSL?
En HSL, un amarillo y un azul con la misma «luminosidad» se ven muy distintos. OKLCH es perceptual: cada paso de la escala tiene la misma claridad aparente sea cual sea el tono, como en las paletas de Tailwind CSS v4.
¿Qué significan los números 50 a 950?
Es la convención de los sistemas de diseño modernos: 50 es el tono más claro (fondos), 500–600 suelen ser los principales (botones) y 900–950 los más oscuros (texto).
¿Mi color original aparece en la paleta?
Sí. Se coloca exactamente en el paso cuya luminosidad es más parecida, marcado con un punto, y el resto de tonos se generan a su alrededor con el mismo tono.
¿Cómo uso la paleta en Tailwind CSS?
Con Tailwind v4 pega el bloque @theme en tu CSS; con Tailwind v3 añade el objeto a theme.extend.colors en tailwind.config.js. Después usa clases como bg-brand-500 o text-brand-900.
Herramientas relacionadas
Generador de border-radius CSSAjusta el redondeo de cada esquina con deslizadores y mira el resultado en directo. Puedes usar un único radio, uno por esquina o radios elípticos para formas orgánicas, en px, % o rem. Copia el CSS cuando te guste.
Generador de box-shadow CSSDiseña sombras realistas combinando varias capas, como hacen los mejores sistemas de diseño. Ajusta desplazamiento, desenfoque, expansión, color y opacidad de cada capa y copia el resultado en CSS o como clase de Tailwind.
Comprobador de contraste de color WCAGElige el color del texto y el del fondo y obtén al instante la relación de contraste y si cumple los niveles AA y AAA de las pautas de accesibilidad WCAG. Si no cumple, la herramienta te propone un color parecido que sí pasa. Todo ocurre en tu navegador.
Conversor de colores (HEX, RGB, HSL, CMYK, OKLCH)Escribe un color en cualquier formato —#hex, rgb(), hsl(), hwb(), oklch() o un nombre como «tomato»— y obtén al instante todas sus equivalencias, su contraste con blanco y negro según WCAG y una escala de tintes y sombras.
Generador de degradados CSSDiseña fondos con degradado arrastrando paradas de color sobre una barra, elige el tipo (lineal, radial o cónico) y copia un CSS listo para producción, con color de respaldo y versión moderna en OKLCH sin zonas grises.
Generador de CSS GridConfigura columnas, filas y espacios con controles deslizantes y ve el resultado en directo. Copia el CSS y el HTML listos para pegar en tu proyecto.