Conversor de colores

Convierte colores entre HEX, RGB, HSL y OKLCH, encuentra cada color de un trozo de CSS y crea tonos y armonías, directamente en tu navegador.

Acerca de Conversor de colores

Qué es

Esta herramienta toma un color o todo un bloque de CSS, SVG o JSON y encuentra cada color que contiene. Para el color activo muestra todos los formatos habituales, una escala de tonos de 50 a 950, armonías complementaria y análoga y el contraste sobre blanco y negro. El resultado se exporta como variables CSS, configuración de Tailwind o JSON de Figma.

Funciones principales

  • Cada color encontrado en el CSS, SVG o JSON que pegas: HEX, rgb(), hsl(), oklch() y más.
  • El color activo en todos los formatos habituales, con cuentagotas.
  • Una escala de tonos de 50 a 950.
  • Armonías complementaria y análoga.
  • Contraste sobre blanco y negro con marcas AA y AAA; exportación como variables CSS, Tailwind o JSON de Figma.

Cómo usarlo

  1. Pega un color o un bloque de CSS, SVG o JSON, o pulsa «Ejemplo».
  2. Elige el color con el que quieres trabajar.
  3. Cópialo en el formato que necesites o mira los tonos y las armonías.
  4. Exporta los colores como código si estás montando un tema.

Cuándo es útil

  • Pasar los colores HEX de un diseño a OKLCH o HSL para tu CSS.
  • Sacar una escala completa de tonos a partir de un solo color de marca.
  • Reunir todos los colores usados en una hoja de estilos antigua.

Privacidad y limitaciones

Tus datos

Tus colores y tu código se procesan en el navegador y no se envían a ningún servidor: el sitio solo recibe un evento anónimo de «herramienta abierta», sin el contenido. Un resultado que envías a otra herramienta se queda 24 horas en este dispositivo, en «Actividad reciente».

Limitaciones

  • Las variables CSS como var(--brand) no se resuelven: solo se encuentran los valores de color escritos en el texto.
  • Algunos formatos redondean un poco los valores, así que ir y volver puede cambiar el último dígito.

Preguntas frecuentes

¿Qué formatos de color se admiten?

HEX (3, 6 u 8 dígitos), rgb(), hsl(), oklch(), oklab() y los nombres de color CSS como rebeccapurple. Cada formato que aparece en el texto se muestra junto a su valor en todos los demás.

¿Cómo se crea la escala de tonos?

A partir del color activo se generan pasos más claros y más oscuros de 50 a 950, con los nombres de las paletas de Tailwind, para llevarlos directamente a un tema.

¿Puedo convertir muchos colores a la vez?

Sí: pega un archivo CSS entero o un JSON de tokens de diseño y se encontrarán y listarán todos los colores que contiene.