Sí. #39f se expande a #3399ff (cada dígito se duplica). Usa Sample para verlo. Las formas con alfa (#rgba / #rrggbbaa) se rechazan.

No. Solo colores opacos. Para rgba()/hsla() o hex de 8 dígitos, usa otra herramienta o escribe el alfa en CSS.

¿Puedo copiar HEX, RGB y HSL por separado?

Sí. Hay copiar por formato y Copy principal (HEX). El selector y los deslizadores se sincronizan en vivo.

No. La conversión solo ocurre en el navegador.

Utill.net

Selector de color

HEX, RGB y HSL

Selecciona cualquier color visualmente y convierte entre formatos HEX, RGB y HSL. Copia valores al instante para usar en CSS y herramientas de diseño.

Esta conversión se ejecuta solo en tu navegador; no se sube nada.

Color

Hex

R59

G130

B246

HEX#3b82f6
RGB59,130,246
HSL217, 91%, 60%

Solo colores opacos (HEX / RGB / HSL). Sin canal alfa — pega #rgb corto o #rrggbb completo.

¿Qué es esta herramienta?

Convierte una selección visual (o HEX escrito) en valores HEX, RGB y HSL listos para CSS. Los tres formatos describen el mismo color opaco con coordenadas distintas.

HEX es compacto para tokens; RGB muestra canales 0–255; HSL facilita ajustar estados de UI. Se acepta el atajo CSS #rgb y se expande a seis dígitos.

Sirve para copiar un único swatch a CSS o documentación. Para armonías desde un color base, usa el generador de paletas.

Casos de uso comunes

Copiar HEX/RGB/HSL de un mock a CSS o un design system
Expandir #rgb antiguo a #rrggbb
Ajustar deslizadores RGB viendo HEX y HSL sincronizados

Cómo usar

Usa el control nativo o los deslizadores RGB; el swatch grande se actualiza al instante.
O escribe HEX (#39f / #3399ff). HEX inválido o con alfa muestra error.
Sample carga #39f → #3399ff. Clear restaura el azul por defecto.
Copia HEX en la barra o RGB/HSL en cada fila.

Ejemplos

Entrada / ajuste	Salida	Notas
`#3b82f6` (defecto)	`rgb(59, 130, 246)` · `hsl(217, 91%, 60%)`	Azul por defecto.
`#39f` (Sample)	`#3399ff` · `rgb(51, 153, 255)`	Atajo `#rgb` expandido.
`#000`	`#000000` · `hsl(0, 0%, 0%)`	Negro.
`#ffffff`	`rgb(255, 255, 255)` · `hsl(0, 0%, 100%)`	Blanco; saturación HSL 0.

Errores prácticos

Sin alfa: #rgba, #rrggbbaa, rgba() y hsla() quedan fuera—escribe la opacidad en CSS aparte.
HEX y HSL se redondean; cerca del gris (poca saturación) el tono HSL puede saltar.
No calcula contraste WCAG; verifícalo en tu herramienta de diseño o accesibilidad.

Referencias

Última revisión: 2026-07-27

Preguntas frecuentes

¿Funciona el atajo: Sí. #39f se expande a #3399ff (cada dígito se duplica). Usa Sample para verlo. Las formas con alfa (#rgba / #rrggbbaa) se rechazan.
¿Hay canal alfa?: No. Solo colores opacos. Para rgba()/hsla() o hex de 8 dígitos, usa otra herramienta o escribe el alfa en CSS.
¿Puedo copiar HEX, RGB y HSL por separado?: Sí. Hay copiar por formato y Copy principal (HEX). El selector y los deslizadores se sincronizan en vivo.
¿Se sube algo?: No. La conversión solo ocurre en el navegador.