HEX to Tailwind Converter

Esto es un conversor de HEX a Tailwind. Busca la clase por defecto más cercana con CIEDE2000. En v3, #3B82F6 es blue-500.

Ejemplos

Alternativas cercanas

Paleta Tailwind completa

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.

HEX to Tailwind Converter

Esto es un conversor de HEX a Tailwind: busca la clase por defecto más cercana con CIEDE2000. En v3, #3B82F6 es blue-500.

Cómo usar

  1. Pegue HEX, elija un color, pulse Aleatorio, un ejemplo o (si el navegador lo permite) el cuentagotas.
  2. Elija v4 o v3. Lea la clase más cercana, su HEX y ΔE00.
  3. Copie bg-, text-, border-, ring-, fill- o un valor arbitrario como bg-[#1D9BF0].
  4. Si el mejor no encaja, pulse una alternativa. La cuadrícula es la paleta completa de la versión elegida.
  5. Mostrar ejemplo usa #3B82F6. Copiar resultado copia la clase con el prefijo. El lote admite HEX o nombres de clase.

Cómo leer ΔE

ΔE ≤ 1 es el mismo color. ΔE ≤ 2 vale para UI. ΔE ≤ 5 para fondos. Por encima, use bg-[#hex] para conservar la marca.

Notas

Solo la paleta por defecto (slate…rose, 50–950, negro y blanco). Sin colores de tema propios. El contraste WCAG está en Color Converter. Relacionado: HEX to RGB.

Dónde usarlo

Pasar un HEX de maqueta a clase Tailwind, ver si hay un gemelo de marca, comparar v3 y v4.

Preguntas

¿Es v3 o v4?

Ambos. El valor inicial es v4. Use v3 si el proyecto aún usa la paleta HEX antigua. El mismo HEX puede caer en clases distintas.

¿Y si hay empate?

Gana el ΔE menor. Si empatan, el orden de la paleta.

¿Y si nada está cerca?

Copie el valor arbitrario, por ejemplo bg-[#1D9BF0].