Saltar al contenido
AldeaCode Logo
en
Desarrollador100% local · 0 bytes enviados

Convertidor de Color (Hex / RGB / HSL)

Escribe un color en cualquier notación CSS habitual (hex con o sin #, 3 o 6 dígitos, rgb / rgba / hsl / hsla) y ve las tres representaciones principales más la vista previa en vivo. Se conserva el canal alfa. Pulsa un ejemplo rápido para cargarlo al instante.

Loading…

Cómo funciona

Parseamos hex (3 / 6 / 8 dígitos), rgb(), rgba(), hsl() y hsla() con regex pequeñas. Las conversiones RGB↔HSL usan las fórmulas estándar. La vista previa es un div con backgroundColor al hex parseado.

Cómo usarla

  1. Pega el valor del color

    Pega un hex (con o sin #, 3/6/8 dígitos), un rgb(), rgba(), hsl() o hsla(). Se admiten las notaciones CSS habituales.

  2. Inspecciona cada formato

    El mismo color se muestra como hex, rgb() y hsl() lado a lado, con alfa conservado. Un swatch en vivo previsualiza el color.

  3. Ajusta vía HSL o RGB

    Modifica luminosidad, tono o saturación editando el valor HSL, o cambia canales editando la fila RGB. El hex se actualiza al instante.

  4. Copia el formato que necesites

    Cada fila tiene su botón de copiar. Coge hex para diseño, rgb() para variables CSS, hsl() para ajustes de tonalidad.

Casos de uso

Convertir un hex de diseño a rgb() para una variable CSS.

Ajustar la luminosidad de un color de marca sin salir del navegador.

Inspeccionar cómo se ve un hex antes de pegarlo al código.

Encontrar una tonalidad cercana mediante ajustes HSL.

Cuándo NO usarlo

  • Como referencia de color de Photoshop / Figma. CSS HSL y los modelos HSV de diseño son distintos. El tono coincide, saturación y luminosidad no.
  • Para comprobar contraste accesible. Esta herramienta da los valores del color, no el ratio de contraste contra un fondo. Usa un checker WCAG dedicado.
  • Para renderizar colores wide-gamut. La salida es sRGB; si tu origen es P3 o Rec.2020 se recorta.

Tus datos nunca salen de tu navegador

Cada utilidad se ejecuta íntegramente en tu dispositivo. No se sube nada, no se almacena nada en un servidor. Puedes desconectarte de internet y siguen funcionando.

Preguntas frecuentes

Herramientas relacionadas

Generadores

Generador de Slugs para URLs

Convierte cualquier texto en un slug seguro para URL. Unicode-aware, modo lote por línea.

Desarrollador

Generador de Hashes SHA

Calcula hashes SHA-1, SHA-256, SHA-384 y SHA-512 en local con Web Crypto.

Formato

Formateador y Validador JSON

Pretty-print, minifica o valida JSON en tu navegador.