MT
My Toolbox

Selector de Color — Convierte Colores entre HEX, RGB y HSL

Ingresa un código HEX, ve el color, obtén RGB y HSL al instante. O genera colores aleatorios para inspiración. Copia con un clic en cualquier formato. Para desarrolladores y diseñadores que necesitan conversiones rápidas sin abrir Figma.

Selecciona y convierte colores en diferentes formatos

tools.colorPicker.hex

#3498db

tools.colorPicker.rgb

rgb(52, 152, 219)

tools.colorPicker.hsl

hsl(204, 70%, 53%)

tools.colorPicker.hex
tools.colorPicker.rgb
tools.colorPicker.hsl

Selecciona y convierte colores en diferentes formatos

tools.colorPicker.hex

#3498db

tools.colorPicker.rgb

rgb(52, 152, 219)

tools.colorPicker.hsl

hsl(204, 70%, 53%)

Formatos de Color Explicados

Tres formatos, mismos colores. HEX (#FF5733) es el estándar web — compacto, fácil de pegar en CSS. RGB (255, 87, 51) es lo que las pantallas usan — tres canales, 0-255 cada uno, mezclando luz roja, verde y azul. HSL (14°, 100%, 60%) es cómo los humanos piensan sobre el color — tono es la posición en la rueda de color, saturación es intensidad, luminosidad es claro vs oscuro.

Por qué HSL importa para desarrolladores: si necesitas una versión más oscura de un color, solo reduce la luminosidad. ¿Versión apagada? Reduce la saturación. Con HEX/RGB tendrías que hacer matemáticas en los tres canales. CSS soporta los tres: color: #FF5733, color: rgb(255, 87, 51), color: hsl(14, 100%, 60%).

El canal alfa (transparencia) agrega un 4to valor: rgba(255, 87, 51, 0.5) o hsla(14, 100%, 60%, 0.5) para 50% de opacidad. En CSS moderno también puedes escribir rgb(255 87 51 / 50%) — la nueva sintaxis separada por espacios.

Cómo Usar

  1. Escribe o pega un código HEX (con o sin #) — la vista previa se actualiza al instante.
  2. Lee los equivalentes RGB y HSL debajo de la vista previa.
  3. Haz clic en el botón aleatorio para generar un nuevo color.
  4. Copia cualquier formato con un clic — listo para pegar en CSS, Figma o código.

Cuándo Lo Usarás

Convertir el HEX del diseñador a RGB para código

El diseñador te da #3B82F6 de Figma. Necesitas rgb() para una variante con opacidad dinámica en tu componente. Pega el HEX, toma los valores RGB, agrega tu canal alfa.

Crear variaciones de color (más claro/oscuro/apagado)

Tienes un color de marca y necesitas estados hover, disabled o tintes de fondo. Convierte a HSL, ajusta luminosidad (+20 más claro, -20 más oscuro) o saturación (-30 apagado). Mucho más fácil que adivinar valores HEX.

Depurar problemas de color en CSS

Un color se ve mal en pantalla y no estás seguro si es el valor correcto. Pega el HEX de DevTools aquí, ve la vista previa, compara con lo esperado.

Generar colores aleatorios para prototipos

¿Construyendo un gráfico, sistema de tags o placeholder de avatar? Presiona el botón aleatorio varias veces para encontrar colores que funcionen.

Tips y Errores Comunes

1.

Usa HSL para manipulación programática de colores

¿Necesitas 5 tonos de azul para un design system? Empieza con tu azul base en HSL, genera variantes escalonando luminosidad: 90%, 70%, 50%, 30%, 10%. Tailwind CSS hace exactamente esto internamente.

2.

HEX no distingue mayúsculas/minúsculas

#ff5733, #FF5733 y #Ff5733 son el mismo color. La mayoría de herramientas producen mayúsculas, pero CSS acepta ambas.

3.

Verifica ratios de contraste para accesibilidad

WCAG requiere ratio de contraste 4.5:1 para texto normal, 3:1 para texto grande. Un color hermoso no sirve si los usuarios no pueden leer el texto sobre él.

4.

HEX de 3 dígitos es abreviación, no un formato diferente

#F00 se expande a #FF0000 (cada dígito se duplica). Solo funciona cuando cada par es idéntico: #AABBCC → #ABC, pero #A1B2C3 no tiene abreviación.

Ejemplos

Tailwind Blue 500 en todos los formatos

El azul por defecto de Tailwind CSS — conversión entre formatos.

Input

#3B82F6

Output

RGB: rgb(59, 130, 246) | HSL: hsl(217, 91%, 60%)

Ajuste HSL de rojo puro

Empezar con rojo, oscurecer reduciendo luminosidad de 50% a 30%.

Input

hsl(0, 100%, 50%) → hsl(0, 100%, 30%)

Output

#FF0000 → #990000 (rojo más oscuro sin cambiar tono)

Características

  • Conversión instantánea entre HEX, RGB y HSL
  • Área grande de vista previa de color
  • Generador de colores aleatorios para inspiración rápida
  • Copia con un clic para cada formato
  • Soporta HEX de 3 y 6 dígitos, con o sin #
  • Funciona 100% en tu navegador — no se envían datos

Preguntas Frecuentes

¿Cuál es la diferencia entre HEX, RGB y HSL?

HEX (#RRGGBB) es notación hexadecimal — compacta, estándar CSS. RGB (r, g, b) especifica intensidad rojo/verde/azul 0-255 — lo que los monitores muestran. HSL (tono, saturación, luminosidad) mapea la percepción humana del color. Los tres describen el mismo espacio de color sRGB, solo diferentes sistemas de coordenadas.

¿Qué formato usar en CSS?

Colores estáticos: HEX es más común y compacto. Colores con opacidad: rgb(r g b / alpha) o hsl(h s l / alpha). Design systems con generación programática de tonos: HSL, porque ajustar luminosidad/saturación es intuitivo.

¿Por qué el mismo color se ve diferente en distintas pantallas?

Calibración de pantalla, perfiles de color y diferencias de gamut. Un color en sRGB (#FF0000) se ve diferente en un display P3 de amplio gamut vs un panel TN barato. Para trabajo web, diseña en sRGB y acepta que la reproducción exacta en todos los dispositivos es imposible.

¿Cómo hago un color más claro o más oscuro programáticamente?

Convierte a HSL, ajusta el valor L (luminosidad). 50% es el color "puro"; aumentar hacia 100% para más claro (acercándose al blanco), disminuir hacia 0% para más oscuro (acercándose al negro). Mantén H y S iguales para preservar el carácter del color.

¿Cuál es la diferencia entre opacidad y un color más claro?

Opacidad (alpha) hace el elemento transparente — lo de atrás se ve a través. Un color más claro (mayor luminosidad HSL) sigue siendo opaco pero mezclado con blanco. Se ven similares en fondo blanco pero muy diferentes en fondos de color o imagen.

Consejos y flujos de trabajo relacionados