Gigi Tools

Conversor de Códigos de Color

Ingrese un código de color en formato HEX, RGB o HSL para convertirlo instantáneamente a otros formatos y previsualizar el color.

Vista Previa del Color
HEX: #3B82F6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
HEX

Admite formatos #RGB y #RRGGBB

RGB
HSL
Colores Comunes

Cómo Usar

  1. Ingrese un código de color en cualquier campo HEX, RGB o HSL; los otros formatos se actualizan automáticamente.
  2. HEX admite formatos de 3 dígitos (#RGB) y 6 dígitos (#RRGGBB).
  3. Haga clic en el botón "Copiar" junto a cualquier código de color para copiarlo al portapapeles.
  4. Haga clic en una muestra de color en "Colores Comunes" para seleccionar rápidamente un color predefinido.
  5. El bloque de color grande de arriba muestra una vista previa en tiempo real del color seleccionado.

Formatos de Códigos de Color

FormatoEjemploDescripción
HEX#3B82F6Código de color hexadecimal comúnmente utilizado en CSS y herramientas de diseño. Un '#' seguido de 6 dígitos (RRGGBB) o 3 dígitos (RGB).
RGBrgb(59, 130, 246)Canales Rojo, Verde y Azul con valores de 0 a 255. Comúnmente utilizado en CSS y programación.
HSLhsl(217, 91%, 60%)Tono (0–360°), Saturación (0–100%), Luminosidad (0–100%). Una forma más intuitiva de describir colores.

Preguntas Frecuentes

¿Qué es un código de color HEX?

Un código de color HEX representa colores usando dígitos hexadecimales en el formato #RRGGBB, donde RR, GG y BB son los valores de los canales rojo, verde y azul (00–FF). Por ejemplo, #FF0000 es rojo puro y #00FF00 es verde puro. También puede usar la forma abreviada de 3 dígitos, por ejemplo, #F00 es equivalente a #FF0000.

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

RGB y HEX están basados en el modelo de color rojo-verde-azul y son esencialmente lo mismo. La diferencia es que RGB usa números decimales (0–255) mientras que HEX usa hexadecimales (00–FF). Por ejemplo, rgb(255, 0, 0) y #FF0000 representan ambos el rojo puro. Ambos formatos se pueden usar en CSS.

¿En qué se diferencia HSL de RGB? ¿Cuándo debería usar HSL?

HSL describe los colores usando Tono, Saturación y Luminosidad, lo cual es más intuitivo que RGB. Para aclarar un color, simplemente aumente el valor L; para hacerlo más vivo, aumente el valor S. HSL es más fácil de usar al diseñar paletas de colores o crear degradados.

¿Hay errores de redondeo en la conversión?

La conversión entre RGB y HEX no tiene pérdidas. Sin embargo, la conversión HSL involucra aritmética de punto flotante y redondeo, por lo que puede haber una diferencia de 1–2 unidades. Esto es visualmente imperceptible y no afecta el uso práctico.

¿Puedo ingresar transparencia (Alpha)?

Actualmente, esta herramienta solo admite conversión de colores opacos (sin canal Alpha). Si necesita transparencia, puede agregar manualmente el valor Alpha después de la conversión, por ejemplo, cambiar #FF0000 a #FF000080 (50% transparente) o rgb(255,0,0) a rgba(255,0,0,0.5).