Saltar al contenido
ToolFarmToolFarm
DiseñoPopular

Conversor de colores

Pega un color en HEX, RGB o HSL y obtén los demás formatos al instante.

2 min de lectura

Qué hace esta herramienta

Conversor de colores que pasa entre HEX, RGB y HSL al vuelo. Pega cualquier formato, los demás aparecen al instante. Perfecto para diseñadores y desarrolladores frontend.

Cuando ya tengas el color, llévalo a generador de paletas para una paleta armónica o a generador de gradientes para crear un degradado.

Para qué te sirve

  • Pasar un HEX de Figma a RGB para usarlo en una variable CSS.
  • Convertir un RGB exportado de Photoshop a HSL para ajustar saturación.
  • Comprobar el equivalente HSL de un color de marca.
  • Verificar que dos colores con notación distinta son realmente el mismo.

Cómo se usa

  1. Pega un color en cualquier formato: #ff5500, rgb(255, 85, 0) o hsl(20, 100%, 50%).
  2. Las demás representaciones aparecen automáticamente.
  3. Copia la que necesites con un clic.
  4. Cambia el valor y la conversión se actualiza al instante.

Todo el trabajo ocurre dentro de tu navegador, sin subir archivos a ningún servidor. Ver más herramientas del mismo campo.

Colores frecuentes con sus tres representaciones

Para que veas la equivalencia entre HEX, RGB y HSL, aquí tienes algunos colores de marca habituales y cómo se escriben en cada notación.

  • Verde Toolfarm

    HEX: #22C55E
    RGB: rgb(34, 197, 94)
    HSL: hsl(142, 71%, 45%)

  • Negro Spotify

    HEX: #191414
    RGB: rgb(25, 20, 20)
    HSL: hsl(0, 11%, 9%)

  • Azul Twitter

    HEX: #1DA1F2
    RGB: rgb(29, 161, 242)
    HSL: hsl(203, 89%, 53%)

  • Rosa Stripe

    HEX: #FF5996
    RGB: rgb(255, 89, 150)
    HSL: hsl(338, 100%, 67%)

  • Naranja Hacker

    HEX: #FF6600
    RGB: rgb(255, 102, 0)
    HSL: hsl(24, 100%, 50%)

  • Negro tinta

    HEX: #0F172A
    RGB: rgb(15, 23, 42)
    HSL: hsl(222, 47%, 11%)

Otras herramientas que la gente suele usar en el mismo flujo.

Diseño
Diseño

Generador de paletas

Construye paletas armónicas a partir de cualquier color base.

Diseño

Generador de gradientes

Crea gradientes CSS y míralos en directo mientras los ajustas.

Preguntas frecuentes

¿Qué formatos de color acepta?

Acepta HEX (con o sin almohadilla, 3 o 6 dígitos), RGB (rgb() y rgba()) y HSL (hsl() y hsla()). Si pegas un color con transparencia, se conserva en los demás formatos cuando es posible.

¿Cómo se convierten entre sí HEX, RGB y HSL?

HEX y RGB son la misma información en notación distinta: 8 bits por canal. HSL describe el color por matiz, saturación y luminosidad, y se calcula a partir de RGB con una fórmula reversible. La conversión es matemáticamente exacta.

¿Puedo usar la herramienta para revisar contrastes?

La conversión no calcula contraste WCAG, pero el formato HSL te ayuda a entender qué tan claro u oscuro es un color (componente L), lo que sirve para emparejar tonos accesibles.

¿Funciona con nombres de color CSS como «tomato»?

De momento la herramienta solo entiende notaciones numéricas. Para nombres CSS, busca su equivalente HEX en cualquier referencia y pégalo aquí.