Desarrollo

Conversor y selector de colores

Herramienta gratuita en línea para seleccionar colores y convertir entre los formatos HEX, RGB y HSL, con vista previa.

Gratis Sin registro Se ejecuta en tu navegador

Espacio de trabajo de la herramienta

HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217.22, 91.22%, 59.8%)
R
59
G
130
B
246

¿Qué es un convertidor de colores?

Un convertidor de colores traduce valores entre diferentes sistemas de notación usados en desarrollo web y diseño. Los tres formatos más comunes son HEX (hexadecimal, como #3b82f6), RGB (componentes rojo, verde y azul, como rgb(59, 130, 246)) y HSL (matiz, saturación y luminosidad, como hsl(217, 91%, 60%)). Esta herramienta permite insertar un color en cualquier formato compatible — o seleccionarla visualmente— y ver instantáneamente los valores equivalentes en todos los formatos, además de los valores individuales de los canales RGB.

Cómo usar el convertidor de color

  1. 1Haga clic en la muestra del selector para elegir un color visualmente o escriba un valor directamente en el campo de entrada.
  2. 2Introduzca colores en HEX (#3b82f6), RGB (rgb(59,130,246)), HSL (hsl(217,91%,60%)) o use nombres de colores CSS (blue, coral).
  3. 3Vea el color en la muestra grande de vista previa a continuación de la entrada.
  4. 4Consulte los valores convertidos en los formatos HEX, RGB y HSL.
  5. 5Copie cualquier formato usando el botón de copia al lado de cada valor.
  6. 6Consulte los valores individuales de los canales R, G y B en la parte inferior.

Casos de uso comunes

Desarrollo CSS

Convierta rápidamente códigos HEX de herramientas de diseño en valores RGB o HSL necesarios en hojas de estilo CSS o soluciones CSSin-JS.

Handoff de diseño

Convierta valores de colores de especificaciones de diseño como Figma y Sketch para el formato exacto requerido por su código.

Pruebas de accesibilidad

Extraa valores de colores precisos para verificar tasas de contraste y garantizar que sus elecciones atiendan a las directrices de accesibilidad WCAG.

Personalización de temas

Convierta colores de la marca a diferentes formatos al configurar propiedades personalizadas CSS, archivos de configuración de Tailwind o diseño tokens.

Preguntas frecuentes

¿Qué formatos de color se aceptan como entrada?

La herramienta acepta valores HEX (#rgb, #rrggbb), notación RGB (rgb(r, g, b)), notación HSL (hsl(h, s%, l%)) y nombres de colores CSS (red, colornflowerblue etc.).

¿Por qué el selector de colores muestra solo la salida HEX?

El selector de colores nativo de HTML trabaja con valores HEX. Después de seleccionar un color, la herramienta la convierte automáticamente a todos los formatos compatibles (HEX, RGB y HSL), que se muestran a continuación.

¿Hay soporte a canal alfa o transparencia?

En el momento, la herramienta está dirigida a colores opacos. Las entradas HEX con alfa (#rrggbbaa), RGBA y HSLA pueden interpretarse, pero el canal alfa no se muestra por separado.

¿Es necesario la conversión?

Sí. La herramienta utiliza la biblioteca cubrida, especializada en ciencia de los colores y conversiones de alta precisión según las especificaciones CSS Color Level 4.

¿Mis valores de color se envían a algún servidor?

No. La selección y la conversión de los colores ocurren localmente en su navegador.