Generador de matices y sombras

A partir de un color, obtén sus matices (hacia el blanco), sombras (hacia el negro) y tonos (hacia el gris), además de una escala 50–950, con el código en HEX, RGB, HSL, CSS, SCSS, JSON o Tailwind.

Haz clic en una muestra para copiar su código HEX. La imagen PNG lleva una pequeña firma KSPNAI abajo a la derecha.

Todo se calcula en tu navegador: no se envía nada.

Gratis · sin registro

Sobre esta herramienta

El generador de matices y sombras lleva un color en tres direcciones: los matices, añadiendo blanco, las sombras, añadiendo negro, y los tonos, añadiendo gris. También obtienes una escala numerada de 50 a 950, práctica para un proyecto web o una identidad visual.

Elige el número de pasos (de 2 a 20) y el modo de mezcla: RGB, la mezcla clásica, u OKLab, que da pasos más regulares a la vista. Haz clic en una muestra para copiar su código y exporta el conjunto en HEX, RGB, HSL, variables CSS, SCSS, JSON o Tailwind, o como imagen PNG.

  • Matices, sombras y tonos de un mismo color
  • De 2 a 20 pasos por fila
  • Mezcla RGB u OKLab
  • Escala 50 a 950 al estilo Tailwind
  • Código HEX, RGB, HSL, CSS, SCSS, JSON, Tailwind v3 y v4
  • Copia de una muestra con un clic, imagen PNG y enlace para compartir

Cómo usarla

  1. Elige el color base o escribe su código HEX.
  2. Ajusta el número de pasos y el modo de mezcla.
  3. Haz clic en una muestra para copiar su código.
  4. Elige un formato de código y cópialo, o descarga la imagen PNG.

Preguntas frecuentes

¿Qué diferencia hay entre matiz, sombra y tono?

Un matiz es el color mezclado con blanco, una sombra el color mezclado con negro y un tono el color mezclado con gris.

¿Por qué elegir OKLab?

OKLab es un espacio de color pensado para la percepción humana: los pasos entre colores parecen más regulares que con una mezcla RGB.

¿En qué se diferencia del generador de tonos Tailwind?

Aquel solo crea la escala 50–950; aquí obtienes además filas completas de matices, sombras y tonos, con más formatos.

¿Se envían mis colores a algún sitio?

No, todo se calcula en tu navegador.

Herramientas relacionadas

Ver las 57 herramientas gratuitas →