Generador de tintes y sombras HEX

Esto es un generador de tintes y sombras. A partir de un HEX mezcla hacia blanco y hacia negro, o recorre claridad, croma y matiz HSL.

Pulsa un valor para copiarlo

Ejemplos — pulsa una muestra

Convierte varios colores de una vez. Una por línea, o comas como #3B82F6, #FF573380. Cargar ejemplo rellena tres filas y la tabla de abajo.

Generador de tintes y sombras

Esto es un generador de tintes y sombras. Mezcla un HEX hacia blanco o negro para estados hover y bordes.

Cómo usar

  1. Pegue HEX, rgb() o hsl(), elija color, pulse Aleatorio, un ejemplo (#3B82F6, #171B45, #0074D9, #0F766E) o tome un píxel si el navegador lo permite.
  2. El eje Mezcla (blanco / negro) es el inicial. Claridad, Croma y Matiz fijan los otros canales HSL. El paso 5%, 10%, 20% o 25% marca los cortes; Personalizado usa 2–20 divisiones.
  3. La escala completa lleva sombras a la izquierda, la base al centro y tintes a la derecha. El HEX va bajo el bloque. Pulse un paso para copiarlo y actualizar las pastillas.
  4. El token (brand) rellena --brand-tint-10 y un fragmento Tailwind. Copiar resultado copia el CSS. Mostrar ejemplo recarga #3B82F6 al 10% en Mezcla.
  5. El lote admite varios HEX. Rellenar ejemplo carga #3B82F6, #171B45 y #0074D9. Cada fila muestra base, tinte medio y sombra media.

Notas

La mezcla es sRGB lineal hacia #FFFFFF o #000000. Un 50% de tinte de #3B82F6 es superponer ese azul al 50% sobre blanco. Claridad / Croma / Matiz usan HSL, no OKLCH. Un HEX no válido muestra error. Borrar todo vacía las rampas. Relacionado: HEX a Tailwind, opacidad, HEX a RGBA.

Dónde usarlo

  • Hover, pulsado y borde desde un HEX de marca.
  • Una rampa al 10% para tokens 100–900.
  • Rellenos apagados bajando el croma.
  • Matices compañeros girando el matiz.

Preguntas

¿El tinte al 50% es opacidad 50% sobre blanco?

En Mezcla, sí: el color al 50% sobre #FFFFFF.

¿El 10% es Tailwind 50–950?

Nueve pasos a cada lado más la base. Son porcentajes de mezcla, no OKLCH. Para una clase por defecto use HEX a Tailwind.

¿Varios colores a la vez?

Sí. Uno por línea, o comas fuera de paréntesis. rgb(22, 163, 74) sigue siendo un ítem.