Conversor de colores por lotes

Pega una lista de códigos de color o texto CSS y convierte solo los colores de una vez

El conversor de colores en lote encuentra los colores del texto que pegas y los convierte todos a la vez al formato que elijas: HEX, RGB, HSL u OKLCH. Sirve una lista con un color por línea, pero también un archivo CSS o SCSS o un JSON de tokens de diseño, donde entre los colores hay nombres y símbolos. Si conviertes el ejemplo de arriba a RGB, el valor de la variable --brand, #3498DB, pasa a ser rgb(52, 152, 219), y el semitransparente #00000080 pasa a rgba(0, 0, 0, 0.5). Con el resultado en "Texto original", los nombres de variables, los comentarios y la sangría se conservan y solo cambian los valores de color. Con "Solo valores", los colores encontrados se escriben como una lista simple.

En el campo de entrada, cada línea lleva a la izquierda una muestra del color encontrado, y las líneas que no se pudieron leer llevan un signo de exclamación. La franja de paleta de arriba muestra de un vistazo todos los colores encontrados, y las tarjetas de color de abajo muestran un color en HEX, RGB, HSL y OKLCH a la vez, con cada valor copiable con un clic. Si cambias el orden a tono o claridad, o activas «Unir duplicados», las muestras de la paleta se desplazan a su nuevo lugar y se notan los duplicados y los colores casi iguales. El texto y los archivos que introduces no se envían a ningún servidor; todo se procesa en este navegador.

Cuándo hace falta convertir muchos códigos de color a la vez

• Pasar los colores de Tailwind CSS v4 a HEX: Tailwind CSS v4 define su paleta predeterminada con valores oklch(). Si necesitas los mismos colores en una plantilla de correo, un documento o una herramienta de diseño antigua que solo acepta HEX o RGB, pega las líneas de variables del tema tal cual y conviértelas a HEX.
• Pasar a código la lista de colores de un diseño: A veces el diseñador envía los colores de marca como lista HEX y el equipo de desarrollo los quiere como rgb() o hsl(), o al revés: valores rgb() del código que hay que poner como HEX en una herramienta de diseño. Las líneas con nombre conservan su nombre, así que nunca pierdes de vista de qué variable es cada color.
• Convertir CSS antiguo a OKLCH: OKLCH describe un color con claridad, croma y tono, lo que facilita igualar colores de la misma claridad o crear escalas de color. Pega un archivo CSS y conviértelo a OKLCH: los selectores y las propiedades quedan como están y solo los valores pasan a la nueva notación.
• Ordenar colores dispersos: Una hoja de estilos editada por varias personas suele mezclar el mismo color con notaciones distintas, como #3498db, #3498DB y rgb(52, 152, 219). Activa «Unir duplicados» para ver cuántas veces aparece cada uno y en qué líneas, y ordena por tono para que los colores casi idénticos queden juntos como candidatos a unificar.
• Convertir tres columnas R, G, B de una hoja de cálculo: Copia las celdas R, G y B de una tabla y pégalas: cada fila llega como tres números separados por tabulaciones. Estas líneas también se leen como colores, así que puedes obtener directamente una lista HEX.

Cómo se encuentran los colores

1. Cuando toda la línea es un solo valor: Se leen HEX con # (3, 4, 6 u 8 dígitos), rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch(), color() y los colores con nombre de CSS (148, como tomato y rebeccapurple). El HEX sin # y las tríadas R, G, B se leen solo cuando toda la entrada es una lista de un valor por línea, es decir, cuando el texto no contiene llaves, corchetes, dos puntos, signos igual ni punto y coma. En ese caso se aceptan 3 y 6 dígitos, y 8 dígitos solo si hay al menos una letra de la a a la f. Un valor de 8 dígitos solo numéricos, como 20241020, podría ser una fecha, así que no se trata como color. Tres enteros como 12, 34, 56, o separados por tabulaciones, se leen como R, G, B.
2. Cuando los colores están mezclados con texto: Dentro de una línea se encuentran todos los HEX que empiezan por # y todas las funciones de color. Aunque haya otros valores al lado, como en border: 1px solid #ddd;, solo se convierte la parte del color, y si una línea tiene más de un color, se convierte cada uno. Los colores con nombre se convierten cuando una cadena entre comillas contiene solo el nombre, como en "danger": "crimson", o cuando el nombre es una palabra dentro de un valor, como en border: 1px solid red !important;. Las palabras en comentarios, las claves de JSON y las partes de otras palabras (.red-button) no se convierten.
3. Solo cambian las posiciones de valor: Los selectores de ID formados solo por letras HEX, como #add, #bad y #face, tienen exactamente el aspecto de un color. En el texto con llaves (CSS, SCSS, JSON, archivos de configuración), solo cambian los valores con # en posición de valor: debe haber dos puntos (:) o un signo igual (=) después de la { , } o ; anterior más cercana. Los selectores y los preámbulos de @media que llegan a { sin dos puntos, y los valores dentro de url(#…), no se modifican. Por ejemplo, en a:hover #add { color: #fff; } solo cambia #fff.
4. Dar nombre a los colores: Si una línea empieza por un nombre, como en --brand: …, $brand: …, "brand": … o brand = …, ese nombre se muestra en la tarjeta de color y en la tabla. Los nombres de propiedades CSS como color, background y border no son nombres de color, así que no se usan.
5. Líneas que no se pueden leer: Un HEX con un número de dígitos incorrecto (#12345), números R, G, B fuera de rango (256, 0, 0) y funciones con una cantidad de valores o unidades equivocada se marcan como error, y el resultado conserva el texto original. Cuando toda la entrada es una lista, las líneas cortas de una o dos palabras sin símbolos de código se marcan como valores mal escritos. En el texto mezclado con código (CSS, JSON), las líneas @import, los comentarios y las líneas sin color, como margin: 0;, no son errores; simplemente se omiten.

Cómo se escribe cada formato

RGB y HSL se escriben con la notación antigua separada por comas. El CSS actual también lee la forma con espacios, como rgb(52 152 219), pero la forma con comas la entienden los navegadores antiguos y la mayoría de las herramientas de diseño. Los ceros finales se eliminan, como en hsl(32, 100%, 50%).

HSL y OKLCH no se redondean a enteros, porque un valor entero suele dar otro color al leerlo de nuevo. Por ejemplo, si escribes #3498DB como hsl(204, 70%, 53%) y lo vuelves a leer, obtienes #3398DB. Con los decimales de la tabla de arriba, los 16.777.216 colores sRGB de 8 bits vuelven al mismo HEX del que partieron. Al escribir el croma (C) de OKLCH con solo cuatro decimales, 94 de las 140.608 muestras se desviaban un paso, por eso se escribe con cinco.

Ejemplo: las diez líneas iniciales convertidas a RGB

En este ejemplo se encuentran 9 colores; las líneas 2 y 9 son el mismo color, así que hay 8 colores distintos. Con «Unir duplicados» activado, #3498DB aparece una sola vez en la paleta y en las tarjetas, con ×2 y los números de línea 2 y 9. Si cambias el resultado a "Solo valores", quedan únicamente los 9 valores rgb() (8 al unirlos), sin la línea de comentario ni los nombres de variables.

Los colores fuera de sRGB se ajustan al color más cercano

HEX y RGB solo pueden expresar valores del espacio de color sRGB. Los colores escritos en OKLCH, lab() o color(display-p3 …) pueden abarcar un rango más amplio que sRGB, así que un color muy vivo no se puede trasladar a HEX sin cambios. Para la salida en HEX, RGB y HSL, esta herramienta sigue el método de ajuste de gama de W3C CSS Color 4. Mantiene la claridad y el tono en OKLCH y reduce solo el croma por bisección, y se detiene cuando la diferencia (deltaEOK) respecto al color recortado a los límites de sRGB baja de 0.02, algo casi imperceptible a simple vista. El tono se desvía menos que con el método simple de recortar cada canal a 0 a 255.

Un color fuera de sRGB lleva en su tarjeta la marca "Fuera sRGB", y su muestra pinta el color original arriba y el color ajustado abajo. En una pantalla que admite una gama de color amplia, la mitad de arriba se ve más intensa. Al convertir a OKLCH no se ajusta nada y se escribe el valor original, así que para no perder un color de gama amplia, usa el resultado OKLCH y deja el HEX como valor de respaldo para pantallas sRGB.

El alfa se traslada como HEX de 8 dígitos y rgba()

Los dos últimos dígitos de un HEX de 8 dígitos, y el último dígito de un HEX de 4 dígitos, son el valor alfa (la opacidad). 00 es totalmente transparente y FF es opaco. Esta herramienta ajusta el valor alfa a niveles de 0 a 255 y luego elige el número que se escribe en rgba(), hsla() u oklch() como indica CSS Color 4. Si existe un entero de 0 a 100 que, multiplicado por 2.55 y redondeado, da ese nivel, escribe ese número dividido entre 100; si no, escribe hasta tres decimales. Por eso 80 (nivel 128) se escribe como 0.5 y no como 0.50196….

Errores frecuentes

• Rellenar con ceros por delante un HEX de 3 dígitos: #f80 no es #000F80; cada dígito se escribe dos veces y da #FF8800. Un #f808 de 4 dígitos se expande igual a #FF880088.
• Reducir HSL a enteros: Como se vio arriba, hsl(204, 70%, 53%) es #3398DB, no #3498DB. Si copias valores HSL enteros de otra herramienta, el HEX puede diferir en uno o dos pasos.
• Un valor rgb() fuera de rango: CSS no considera inválido rgb(300, 0, 0); lo recorta a 255 y dibuja rgb(255, 0, 0). Esta herramienta lo convierte igual y marca la tarjeta con "Recortado". Tres números separados por comas (256, 0, 0) no son sintaxis CSS, así que no se recortan y se consideran un error.
• Números sin '#': Un valor de 4 u 8 dígitos solo numéricos, como 2024, no se lee como color. Para usar un HEX de 4 dígitos, añade el #, como en #2024. Como el HEX sin # solo se lee en listas, números como 640 dentro de un texto JSON no se convierten en colores.
• Colores con nombre dentro de palabras: El red y el blue de .red-button o /* blue */ no se convierten. Los colores con nombre cambian solo cuando son toda la línea o una palabra en posición de valor.
• Pegar el resultado sin las líneas con error: Un resultado de "Solo valores" deja fuera las líneas que no se pudieron leer, así que el número de filas ya no coincide con la tabla original. Si las filas deben coincidir, corrige antes esas líneas con los números de línea de la barra de estado, o usa "Texto original".

Límites y precauciones

• Se convierten hasta 100.000 caracteres y 1.000 colores por vez. Divide los archivos más grandes. Al abrir un archivo solo se leen archivos de texto UTF-8.
• var(--brand) y color-mix() dependen de otros valores, así que se dejan sin cambios. Los colores escritos directamente dentro de color-mix(), como #fff, se convierten uno por uno; los colores relativos como rgb(from …) y las funciones de color que contienen var() o calc() se marcan como valores ilegibles. Las palabras clave como currentColor e inherit también quedan sin cambios.
• color() solo lee los espacios de color srgb, srgb-linear, display-p3 y xyz (xyz-d65, xyz-d50). a98-rgb, prophoto-rgb y rec2020 se marcan como error.
• Los valores HEX, RGB y HSL son colores redondeados a sRGB de 8 bits (0 a 255). El mismo HEX puede verse distinto según la configuración de color y el brillo de tu pantalla.
• Un HEX ajustado a partir de un color fuera de sRGB se calcula con el método de CSS Color 4. Puede diferir en uno o dos pasos de cómo un navegador dibuja ese color en una pantalla de gama amplia o de cómo lo recorta otra herramienta.
• No se tratan el CMYK de impresión ni los perfiles ICC. Para colores que se van a imprimir, usa el conversor de RGB a CMYK, y para ver un solo color con detalle, usa el conversor de HEX a RGB.
• Los resultados HEX siempre van en mayúsculas. En el archivo de Excel, las celdas de muestra se pintan sin alfa, y el alfa se anota en la columna de notas. El CSV pone un apóstrofo (') antes de las celdas que empiezan por =, +, - o @ para que no se ejecuten como fórmulas, así que un nombre como --brand se escribe como '--brand. Usa el archivo de Excel para conservar los nombres exactamente.
• El CSV exportado usa punto y coma como separador, para que las aplicaciones de hojas de cálculo configuradas con coma decimal lo abran en columnas.

Los valores de las tablas de este artículo se calcularon con esta herramienta el 20 de octubre de 2026. Las fórmulas de conversión y el ajuste de gama siguen el borrador de Candidate Recommendation de W3C CSS Color 4 (versión del 9 de octubre de 2026) y no cambian de un año a otro. Los valores de color de Tailwind se comprobaron en la documentación de Tailwind CSS el mismo día, por lo que pueden diferir si Tailwind cambia su paleta.

Fuentes

• 01W3C: CSS Color Module Level 4§5.1 los valores rgb() fuera de rango se recortan, §5.2 HEX de 3, 4, 6 y 8 dígitos, §6.1 148 colores con nombre, §9.4 referencia de porcentajes de oklch(), §14.2.2 ajuste de gama (JND 0.02), §16.1.1 serialización del alfa
• 02MDN: <hex-color>Las cuatro notaciones #RGB, #RGBA, #RRGGBB y #RRGGBBAA; un dígito suelto se repite dos veces
• 03MDN: oklch()Cómo escribir claridad, croma, tono y alfa; sintaxis de color relativo
• 04Tailwind CSS: Tailwind CSS v4.0La nueva paleta de colores P3 para pantallas de gama amplia
• 05Tailwind CSS: ColorsColores predeterminados definidos como variables de tema oklch(), como red-500 oklch(63.7% 0.237 25.331)
• 06Björn Ottosson: A perceptual color space for image processingLos objetivos de diseño del espacio de color Oklab y sus fórmulas de conversión

Preguntas frecuentes

Herramientas relacionadas