Color de Tailwind más cercano
Nearest Tailwind Colour
Encuentra la entrada de la paleta de Tailwind más próxima a cualquier color y muestra la distancia perceptual.
Encuentra la entrada de la paleta de Tailwind más cercana a un color que tienes, medida como ΔE en OKLab y no como distancia en RGB. También responde a la pregunta distinta y a menudo más útil de a qué familia pertenece tu color.
Tu color
Cómo se mide esto
La distancia es ΔE en OKLab, no la distancia euclídea en RGB. En RGB el azul marino y el azul puro están a 128, y dos grises medios separados por dieciséis salen cuatro veces más cerca, para una diferencia mucho más visible. OKLab se construyó para que la distancia en línea recta se aproxime a la diferencia percibida, que es exactamente la pregunta de aquí.
- ≤ 0,001 — Idéntico: este es el color de Tailwind.
- ≤ 0,02 — Por debajo de la diferencia apenas perceptible. Un cambio seguro.
- ≤ 0,05 — Se nota lado a lado, pero está bastante cerca por separado.
- ≤ 0,1 — Un cambio que se nota. Vale para un fondo, no para una marca.
- > 0,1 — Un color distinto. Tailwind no tiene nada cerca de esto: mejor extiende el tema.
Paleta leída de Tailwind 4.3.3 tal como está instalado, y contrastada con él por una prueba en cada ejecución.
Coincidencia más cercana
indigo-600
#4f39f6Se nota lado a lado, pero está bastante cerca por separado.
ΔE OKLab
0,0319
Valor de Tailwind
oklch(51.1% 0.262 276.966)
Siguientes más cercanos
- indigo-700
#432dd7ΔE 0,0545 - blue-700
#1447e6ΔE 0,0580 - blue-600
#155dfcΔE 0,0698 - indigo-500
#6260ffΔE 0,0745 - violet-700
#7008e7ΔE 0,0810 - violet-600
#7f22feΔE 0,0925 - violet-800
#5d0ec0ΔE 0,1010
Familias más cercanas
- indigomejor paso 600ΔE 0,0319
- bluemejor paso 700ΔE 0,0580
- violetmejor paso 700ΔE 0,0810
- purplemejor paso 700ΔE 0,1132
- skymejor paso 700ΔE 0,1415
Una pregunta distinta de “el color más cercano”, y a menudo la más útil: a qué familia pertenece tu color de marca, puntuada por su mejor paso.
Si aquí nada está lo bastante cerca, la respuesta es extender el tema en vez de aceptar el más cercano: genera una rampa completa de 50 a 950 a partir de tu color y pégala en @theme.
Cómo se usa
Introduce tu color
Normalmente un hexadecimal de marca que alguien te envió. El token más cercano, su hexadecimal y el ΔE aparecen de inmediato.
Salta los neutros si estás buscando un tono
slate, gray, zinc, neutral y stone ganan toda consulta casi gris, lo que es correcto y rara vez la respuesta que querías.
Lee la lista de familias
Cada familia puntuada por su mejor paso. «Tu color de marca es un índigo» es más accionable que «la muestra más cercana es indigo-600».
Preguntas frecuentes
¿Por qué ΔE y no distancia RGB?
Porque la distancia RGB no coincide con lo que ves. Pone azul marino y azul puro a 128 de distancia mientras llama cuatro veces más cercanos a dos grises medios a dieciséis, para una diferencia que es mucho más visible. OKLab se construyó para que la distancia en línea recta aproxime la diferencia percibida.
¿Qué es un buen ΔE?
Por debajo de unos 0,02 en OKLab es en la práctica el mismo color; hasta 0,05 es una coincidencia que nadie cuestionará; pasado 0,1 estás eligiendo otro color y deberías decirlo en voz alta. Los umbrales están listados en la página.
¿Por qué una entrada está marcada como fuera de sRGB?
Porque Tailwind define ahora su paleta en OKLCH, y algunas entradas caen fuera de lo que sRGB puede mostrar. El hexadecimal es una aproximación con mapeo de gama; usar el valor `oklch()` conserva la saturación extra en una pantalla P3.
Nada está lo bastante cerca. ¿Y ahora?
Amplía el tema en lugar de aceptar el más cercano. Genera una rampa completa 50–950 a partir de tu color y pégala en `@theme`: un color de marca aproximado a la muestra de serie más cercana deja de ser el color de marca.
Puede recibir de
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Escala de tonos y sombras
Tint & Shade Scale
Genera una escala de luminosidad de 50 a 950 desde un solo color con pasos perceptualmente iguales, lista para usar como tokens de diseño.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Escala de tonos y sombras
Tint & Shade Scale
Genera una escala de luminosidad de 50 a 950 desde un solo color con pasos perceptualmente iguales, lista para usar como tokens de diseño.
Extractor de tokens de CSS
CSS Token Extractor
Saca los colores, espaciados, radios y tipografías de una hoja de estilos y propone un conjunto de propiedades personalizadas.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.
Generador de paletas
Palette Generator
Construye una paleta armónica a partir de un color base con reglas de complementarios, tríadas y análogos.