devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Herramientas de color

Conversor de colores

Pega cualquier color CSS —HEX, rgb(), hsl(), hwb(), oklch() o un nombre como tomato— y obtén al instante todos los demás formatos, además de una paleta 50–950 lista para usar.

Funciona en tu navegador · no se sube nada
#4f46e5
Prueba:

Todos los formatos

Tintes y sombras (50–950)

Opciones
¿Te ha resultado útil esta herramienta?Sé el primero en valorar

Cómo usar: Conversor de colores

  1. Escribe o pega un color en Valor de color (funciona cualquier formato CSS) o elígelo con el selector de color.
  2. Ajusta la Opacidad si necesitas transparencia; los valores HEX de 8 dígitos y / alpha se actualizan automáticamente.
  3. Haz clic en Copiar junto al formato que necesites. Cambia a la sintaxis Legacy si tu código usa rgba(…, …) con comas.
  4. Desplázate hasta la paleta para obtener 11 tintes y sombras; elige la salida en variables CSS, Tailwind v4, SCSS o JSON, y cópiala o descárgala.

¿Qué es un conversor de colores?

Un conversor de colores traduce un color a las distintas notaciones que usan CSS y las herramientas de diseño. El mismo índigo puede escribirse como #4f46e5, rgb(79 70 229), hsl(243.4 75.4% 58.6%) o oklch(51.06% 0.2301 276.97); todos describen un mismo color sRGB. Los diseñadores entregan valores HEX desde Figma, una librería de componentes necesita canales HSL y un sistema de diseño moderno puede estar escrito en OKLCH, así que convertir rápido y bien es una tarea del día a día.

Formatos compatibles

FormatoEjemploIdeal para
HEX (3, 4, 6, 8 dígitos)#4f46e5, #4f46e580El formato más habitual para pasar colores. El par de dígitos opcional (4.º/8.º) es el alpha: 80 ≈ 50 %.
RGB / RGBArgb(79 70 229 / 0.5)Cálculos por canal, canvas y código heredado con rgba().
HSL / HSLAhsl(243 75% 59%)Ajustes manuales rápidos tono, saturación y luminosidad.
HWBhwb(243 27% 10%)Mezclar un tono puro con blanco y negro; intuitivo para selectores de color.
OKLCHoklch(51% 0.23 277)Paletas perceptualmente uniformes y tokens de diseño (Tailwind CSS v4 distribuye su paleta en OKLCH).
CMYKcmyk(66%, 69%, 0%, 10%)Un punto de partida aproximado para impresión; mira la nota de abajo.
Colores con nombretomato, rebeccapurpleSe reconocen las 148 palabras clave de CSS; la herramienta también muestra el nombre más cercano a cualquier color.

Por qué merece la pena aprender OKLCH

En HSL, un amarillo con «50 % de luminosidad» se ve mucho más brillante que un azul al 50 %, porque HSL es una simple transformación geométrica de RGB. OKLCH se basa en el modelo OKLab, diseñado para que pasos iguales en L (luminosidad) se perciban como pasos iguales, C es el croma (intensidad del color) y H es el ángulo del tono. Eso lo hace ideal para generar sombras consistentes, estados hover y pares de color accesibles. OKLCH también puede describir colores fuera de sRGB (por ejemplo, Display P3); si introduces uno, esta herramienta lo ajusta a sRGB y te lo indica.

Cómo se genera la paleta 50–950

La paleta conserva el tono de tu color y trabaja en OKLCH: cada paso tiene un objetivo de luminosidad fijo (desde el muy claro 50 hasta el muy oscuro 950) y una parte del croma de tu color, que se reduce cuando hace falta para que cada muestra quede dentro de sRGB. Con Mantener mi color exacto activado, tu color sustituye al paso cuya luminosidad sea más cercana, así que el color de marca aparece sin cambios en la escala. ¿Necesitas comprobar la accesibilidad de algún par de la paleta? Usa el Verificador de contraste.

Una nota sobre CMYK

La conversión de pantalla a impresión depende de la tinta, el papel y el perfil ICC que use tu imprenta. Los valores CMYK de aquí usan la fórmula estándar sin calibrar (K = 1 − max(R, G, B)), que sirve para maquetas, pero no para trabajos de impresión críticos para la marca; pide a tu imprenta una conversión con perfil.

Usar los colores en Webflow

Pega el valor HEX en el selector de color de Webflow o en una Variable de color (panel de Variables). Crear una variable por paso de la paleta, por ejemplo Marca 50 … Marca 950, te da la misma estructura de tokens que la salida en variables CSS, así que las clases pueden referenciar sombras en lugar de valores fijos.

Preguntas frecuentes

¿Cómo convierto HEX a RGB a mano?
Divide los seis dígitos en tres pares y convierte cada uno de base 16 a base 10. Para #4F46E5: 4F = 79, 46 = 70, E5 = 229, así que el color es rgb(79 70 229). Un código de 3 dígitos como #f60 primero duplica cada dígito (#ff6600).
¿Qué significa un color HEX de 8 dígitos?
Los dos últimos dígitos son el canal alpha (opacidad), desde 00 (totalmente transparente) hasta ff (opaco). #4f46e580 es el índigo con 128/255 ≈ 50 % de opacidad. Todos los navegadores modernos admiten HEX de 4 y 8 dígitos.
¿Debo usar OKLCH en lugar de HEX o HSL?
Para tokens de diseño y sombras generadas, OKLCH suele ser mejor porque su luminosidad es perceptualmente uniforme y puede expresar colores de gama amplia. Es compatible con todos los navegadores principales actuales. HEX sigue siendo el formato más portable para entregas y herramientas antiguas.
¿Por qué cambia un poco mi valor HSL después de convertirlo?
Los colores en pantalla se almacenan como RGB de 8 bits (0–255 por canal), así que muchos valores HSL se redondean al mismo color RGB. La herramienta muestra HSL con un decimal para que al convertir de nuevo se obtenga el mismo HEX.
¿Cuál es la diferencia entre HSL y HWB?
Ambos usan un ángulo de tono. HSL después define la saturación y la luminosidad, mientras que HWB indica cuánto blanco y negro mezclar con el tono puro: hwb(0 0% 0%) es rojo puro y hwb(0 50% 0%) es rojo mezclado con 50 % de blanco (rosa). HWB suele ser más fácil de entender en los selectores de color.
¿Puedo instalar Conversor de colores como aplicación web y utilizarla sin conexión?
Sí. Conversor de colores es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.

Herramientas relacionadas

Generador de Gradientes CSSDiseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un pre…Generador de Box ShadowApila varias capas de sombra, ajusta desplazamientos, difuminado, extensión y opacidad sobre una tarjeta en…Conversor de Bases NuméricasEscribe un número en cualquier base y verlo al instante en todas las demás. Revisa el complemento a dos con…