Conversor de colores

El convertidor admite HEX (3 dígitos, 6 dígitos y 8 dígitos con alfa), RGB y RGBA (sintaxis de coma o espacio), HSL y HSLA, OKLCH y cualquier CSS color con nombre válido, como cornflowerblue, rebeccapurple o tomato. El formato se detecta automáticamente a medida que escribe, por lo que puede pegar cualquiera de estos directamente en el campo de entrada sin seleccionar un modo primero.

OKLCH es un espacio de color polar perceptualmente uniforme definido por la luminosidad (L), la croma (C) y el tono (H). A diferencia de HSL, donde los colores con valores de luminosidad idénticos pueden verse visualmente muy diferentes en cuanto a brillo percibido, OKLCH utiliza un modelo subyacente que se adapta mejor a cómo la visión humana percibe las diferencias de color. Esto lo hace ideal para generar mediante programación escalas de colores accesibles, paletas de botones consistentes y tokens de diseño. CSS admite de forma nativa oklch() en todos los navegadores modernos a partir de 2023, y los principales sistemas de diseño lo han adoptado para esta precisión. Puede emparejar valores OKLCH directamente con CSS Gradient Generator para obtener gradientes perceptualmente suaves.

La relación de contraste utiliza la fórmula WCAG 2.1: (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia relativa del color más claro y L2 es la luminancia relativa del color más oscuro. La luminancia relativa se calcula a partir de valores de canal sRGB linealizados ponderados como 0,2126 R + 0,7152 G + 0,0722 B. La herramienta compara su color con el blanco puro (255, 255, 255) y casi negro (15, 23, 42) y muestra la proporción junto con la calificación WCAG para texto normal y grande.

WCAG 2.1 define dos niveles de conformidad para el contraste de texto. El nivel AA requiere una proporción de al menos 4.5:1 para texto normal y 3:1 para texto grande (18pt+ o 14pt+ negrita). El nivel AAA requiere 7:1 para texto normal y 4,5:1 para texto grande. AA es el mínimo legal en muchas normas de accesibilidad, incluidas EN 301 549 y Sección 508. Se recomienda AAA para documentos o interfaces donde es importante la máxima legibilidad, como contenido médico o legal.

La paleta convierte su color al espacio HSL, luego genera cinco tintes interpolando la luminosidad hacia el 95% (casi blanco) y cinco tonos interpolando hacia el 5% (casi negro), manteniendo constante el tono y la saturación. El resultado es una tira de 11 muestras: 5 tintes, tu color base (delineado en la paleta) y 5 tonos. Al hacer clic en cualquier muestra, se carga inmediatamente ese color en la entrada para su posterior conversión o inspección WCAG.

No. Todos los análisis de color, matemáticas de conversión y cálculos WCAG se ejecutan completamente en su navegador mediante JavaScript. PureTools no tiene un punto final de servidor para esta herramienta y nunca recibe los colores que ingresa. El último color que escribiste se guarda en sessionStorage bajo una clave de espacio de nombres para que persista al actualizar, pero sessionStorage se borra automáticamente cuando cierras la pestaña, por lo que los datos se borran cuando cierras la pestaña. Nunca se carga ni almacena nada de forma remota. Sus datos nunca se utilizan para entrenar modelos de IA ni mejorar sistemas de aprendizaje automático.

Sí. Figma normalmente copia colores como HEX, HSL o RGB. Browser DevTools copia los colores como hexadecimal, rgb() o hsl(). Todos estos se aceptan directamente. Si copia un valor oklch() de un archivo CSS o un token de diseño JSON, eso también es compatible. La herramienta detecta automáticamente el formato de la cadena pegada, por lo que no es necesario seleccionar nada antes de pegar. También puede utilizar JSON Formatter para extraer valores de color de archivos de token de diseño JSON antes de pegarlos aquí.

Tanto HSL (Tono, Saturación, Luminosidad) como HSV (Tono, Saturación, Valor) representan colores usando un ángulo de tono y dos ejes relativos, pero definen el tercer eje de manera diferente. En HSL, una luminosidad del 50% con saturación máxima da el tono puro. En HSV, un valor de 100% con saturación máxima también proporciona el tono puro, pero conceptualmente el valor está más cerca del brillo percibido. HSL refleja de manera más intuitiva cómo piensan los diseñadores sobre tintes y sombras, mientras que HSV se usa comúnmente en ruedas de selección de color y aplicaciones de edición de imágenes.

sRGB y OKLCH cubren gamas similares pero no idénticas. Cuando conviertes sRGB a OKLCH, los valores son matemáticamente exactos. Al volver a convertir, el redondeo de punto flotante en las multiplicaciones de matrices intermedias y el paso de raíz cúbica puede producir valores de canal con 0 o 1 de diferencia en el rango entero de 0 a 255, una diferencia visualmente imperceptible. Si su entrada utiliza un valor OKLCH de croma muy alto que queda fuera de la gama sRGB, la herramienta fija el canal de salida al valor sRGB válido más cercano en lugar de producir CSS no válido.

El selector de color nativo del navegador (input type="color") siempre almacena su valor como hexadecimal. Siempre que escribe un color válido en el campo de texto en cualquier formato, la herramienta lo convierte a hexadecimal y actualiza el valor del selector mediante programación. Por el contrario, al seleccionar un color de la muestra se escribe su valor hexadecimal en el campo de texto. Esta sincronización bidireccional significa que puedes usar el selector visual para exploración y el campo de texto para mayor precisión, y ambos siempre reflejan el mismo color.

Sí, dentro de la misma sesión del navegador. La herramienta guarda la última entrada válida en sessionStorage para que persista al actualizar. Cuando cierras la pestaña, el navegador borra automáticamente sessionStorage, por lo que el color se borra y tus datos permanecen solo en tu dispositivo. La herramienta no utiliza localStorage para datos de color, solo se almacena allí la preferencia del tema.

No. Conversor de colores mantiene archivos, valores y resultados temporales en tu dispositivo. PureTools no tiene una base de datos backend para guardar esas entradas y no las envía a un servidor de procesamiento. Los datos de la herramienta pueden existir en memoria o en sessionStorage durante la pestaña activa y se eliminan al cerrar la pestaña o restablecer la página.

Conversor de colores ejecuta los cálculos y el procesamiento directamente en el navegador con JavaScript del lado del cliente. La herramienta lee tus entradas, aplica las opciones visibles como Convertir HEX, RGB, HSL, HSV y OKLCH en un paso y actualiza el resultado sin enviar archivos ni valores a un servidor. Este funcionamiento mantiene la sesión local, reduce pasos innecesarios y permite usar la página de nuevo cuando los recursos quedan en caché tras la primera carga.

Al cerrar la pestaña, los valores temporales usados por Conversor de colores desaparecen con la sesión del navegador. Preferencias generales como el tema pueden permanecer en localStorage, pero archivos, resultados y contenido introducido en la herramienta no se guardan como historial a largo plazo. Esta separación mantiene una experiencia práctica sin crear una huella duradera de tus datos.