Convertidor de HEX a RGB

Convierte códigos de color HEX y hexadecimales a valores RGB, RGBA, HSL y CSS al instante en tu navegador.

Privado por defecto — la conversión de color se realiza en tu navegador

Espacio de trabajo del convertidor de color

Introduce o edita un color

Admite #RGB, #RGBA, #RRGGBB y #RRGGBBAA.

Vista previa del color #FF8C42
preview.html

Un color se vuelve útil cuando puedes verlo en contexto.

Valores de color convertidos

Listo — introduce o edita un color.

Vista previa de contraste

El texto debe leerse con claridad sobre el fondo.

Relación de contraste 7.75:1
Texto normal AA Cumple Texto grande AA Cumple

El contraste se calcula después de aplicar la transparencia sobre el fondo.

Convertir colores HEX y hexadecimales a RGB

Usa este conversor de HEX a RGB cuando un diseño te proporciona un código de color hexadecimal, pero tu flujo de trabajo de CSS, JavaScript, canvas o gráficos necesita los canales rojo, verde y azul. Introduce un valor HEX de 3, 4, 6 u 8 dígitos y la conversión de color de hexadecimal a RGB aparece al instante. El canal alfa se conserva cuando el código incluye transparencia. Por ejemplo, #ff8c42 se convierte a rgb(255, 140, 66) y hsl(23, 100%, 63%).

Cómo usar este conversor HEX

  1. Introduce un color HEX, RGB(A) o HSL(A), o elige un color visualmente.
  2. Edita cualquier campo; los valores de HEX, RGB, HSL, alfa, la vista previa y el contraste se mantienen sincronizados.
  3. Copia un valor, la propiedad personalizada de CSS, todos los formatos o un enlace para compartir.

Como todos los formatos son editables, la página también funciona como un conversor de RGB cuando empiezas con rgb() o rgba(). Úsala como un conversor de códigos hexadecimales para fragmentos de CSS o como un conversor de códigos de color más general al mover valores entre herramientas de diseño y desarrollo.

Convierte de HEX a HSL sin perder la transparencia

HSL describe el mismo color por matiz, saturación y luminosidad, lo que puede ser más fácil de ajustar que los canales RGB individuales. El resultado de la conversión de HEX a HSL conserva el alfa de las entradas #RGBA o #RRGGBBAA y produce HSLA cuando la transparencia es inferior al 100 %. Editar HSL actualiza los valores HEX y RGB correspondientes del mismo estado de color, evitando desviaciones de conversión entre los campos.

HEX, RGB y HSL: ¿qué formato deberías usar?

HEX es compacto y común en variables de CSS y especificaciones de diseño. RGB expone los canales individuales rojo, verde y azul para JavaScript, canvas y API de gráficos. HSL es práctico al ajustar el matiz, la saturación o la luminosidad. Estos formatos describen el mismo color usando una notación diferente, aunque los números mostrados pueden diferir ligeramente debido al redondeo.

Cómo funcionan los códigos de color hexadecimales

Un código de color hexadecimal es la forma compacta en que se escribe RGB en programación: dos dígitos hexadecimales por canal, de 00 a FF (de 0 a 255 en decimal), así que #FF8C42 es rojo FF, verde 8C y azul 42. Los valores hexadecimales usan los dígitos 0-9 y las letras A-F, los números hexadecimales no distinguen entre mayúsculas y minúsculas, y los colores en hexadecimal también pueden llevar un cuarto par para el alfa. Una pequeña tabla hexadecimal ayuda a leer RGB en hexadecimal: #000000 es negro, #FFFFFF es blanco, #FF0000 es rojo, #00FF00 es verde, #0000FF es azul y #808080 es gris medio. El conversor muestra el código hexadecimal, el código de color RGB y el HSL uno al lado del otro, por lo que la conversión de color de RGB a hexadecimal y de hexadecimal a RGB no necesita una tabla de consulta.

Comprueba el contraste del texto antes de usar un color

La vista previa compara el color de primer plano seleccionado con un fondo e informa de su relación de contraste después de la composición alfa. Úsala como una comprobación rápida al convertir un color, no como una auditoría de accesibilidad completa: el tamaño de fuente, el grosor, los estados de interacción, los bordes, los iconos, los degradados y la página renderizada todavía necesitan revisión. Para los umbrales AAA, de texto grande y de elementos no textuales con alternativas accesibles, abre el verificador de contraste de color completo.

Conversión de color privada en tu navegador

El análisis, la conversión, el cálculo de contraste y las acciones de copia se realizan en esta pestaña del navegador. No se sube ningún color a una API de conversión y no es necesario registrarse. Si creas un enlace para compartir, el color seleccionado se incluye intencionadamente en ese enlace para que se pueda reabrir el mismo estado.

Preguntas frecuentes

¿Cómo convierto un color HEX a RGB?

Introduce el color en el campo HEX. El RGB, HSL, alfa, la variable CSS y la vista previa correspondientes se actualizan inmediatamente. Por ejemplo, #ff8c42 se convierte en rgb(255, 140, 66).

¿Qué formatos de color HEX son compatibles?

El conversor admite #RGB, #RGBA, #RRGGBB y #RRGGBBAA. Los formatos de 4 y 8 dígitos incluyen la transparencia alfa en el último dígito o par de dígitos.

¿Puedo convertir de RGB o HSL a HEX?

Sí. Edita el campo RGB, RGBA, HSL o HSLA y el valor HEX equivalente se actualiza automáticamente. Cada formato mostrado se deriva del mismo color RGBA subyacente.

¿Cómo se convierte de HEX a HSL?

El conversor primero resuelve el valor HEX en canales RGB, luego calcula el tono, la saturación y la luminosidad a partir del rango de los canales. Solo se redondean los valores mostrados, lo que mantiene todos los campos sincronizados.

¿Se suben o se almacenan mis códigos de color?

No se sube ningún color a un servicio de conversión. La conversión y la copia se ejecutan localmente en tu navegador. Un enlace para compartir incluye el color seleccionado en el propio enlace solo cuando lo creas explícitamente.

¿Qué significa RGB en un código HEX?

RGB significa rojo, verde y azul, los tres canales de luz que una pantalla mezcla para mostrar un color. Un código HEX de seis dígitos escribe esos mismos tres canales en hexadecimal, dos dígitos cada uno, en orden rojo-verde-azul; un código HEX de ocho dígitos añade un cuarto par para el alfa (opacidad).

Añade el color a una página web

Phoenix Code te ofrece edición de HTML y CSS, búsqueda en todo el proyecto, Git y Vista Previa en Vivo en un editor de código completo para navegador o escritorio.