Saltar al contenido principal

Conversor de colores

Herramienta gratuita en línea que soporta conversión entre formatos de color HEX, RGB y HSL.

#3498DB

🎨 색상 선택

HEX

웹에서 가장 많이 사용

RGB

HSL

🎨 미리 설정된 색상

HEX, RGB, HSL 색상 형식 간 변환을 지원합니다. 색상 피커로 직접 색상을 선택하거나, 값을 직접 입력할 수 있습니다.

¿Qué son los formatos de color?​

Existen varios métodos para expresar colores en entornos digitales. Cada formato tiene sus propósitos y ventajas específicas, y se debe elegir el formato apropiado según la situación.

Características principales​

  • Soporte de 3 formatos: HEX, RGB, HSL
  • Conversión en tiempo real: Al cambiar un formato, todos los formatos se actualizan automáticamente
  • Selector de colores: Selección visual de colores
  • Vista previa grande: Confirma el color seleccionado en grande
  • Copia instantánea: Copia cada formato con un clic
  • Colores predefinidos: Proporciona 10 colores populares

Descripción de formatos de color​

HEX (Hexadecimal) - Hexadecimal​

Formato más utilizado en la web.

Formato:

#RRGGBB

Ejemplos:

#3498db  /* Azul */
#e74c3c  /* Rojo */
#2ecc71  /* Verde */

Estructura:

  • #: Prefijo
  • RR: Rojo (00-FF)
  • GG: Verde (00-FF)
  • BB: Azul (00-FF)

Formato abreviado de 3 dígitos:

#f00  /* Igual a #ff0000 */
#abc  /* Igual a #aabbcc */

Ventajas:

  • Conciso
  • Formato predeterminado en CSS
  • Fácil de copiar

Desventajas:

  • Difícil de entender para humanos
  • Ajuste de color no intuitivo

RGB (Red, Green, Blue)​

Formato que utiliza los tres colores primarios de la luz.

Formato:

rgb(R, G, B)

Ejemplos:

rgb(52, 152, 219)   /* Azul */
rgb(231, 76, 60)    /* Rojo */
rgb(46, 204, 113)   /* Verde */

Rango de valores:

  • Cada canal: 0-255
  • 0 = oscuro, 255 = brillante

RGBA (con transparencia):

rgba(52, 152, 219, 0.5)  /* 50% de transparencia */

Ventajas:

  • Fácil de entender
  • Ajuste independiente de cada canal de color
  • Intuitivo en programación

Desventajas:

  • Más largo que HEX
  • Ajuste de brillo no intuitivo

HSL (Hue, Saturation, Lightness)​

Formato que utiliza tono, saturación y luminosidad.

Formato:

hsl(H, S%, L%)

Ejemplos:

hsl(204, 70%, 53%)   /* Azul */
hsl(6, 78%, 57%)     /* Rojo */
hsl(145, 63%, 49%)   /* Verde */

Rango de valores:

  • H (Hue): 0-360° (rueda de color)
    • 0° = Rojo
    • 120° = Verde
    • 240° = Azul
  • S (Saturation): 0-100% (saturación)
    • 0% = Gris
    • 100% = Color puro
  • L (Lightness): 0-100% (luminosidad)
    • 0% = Negro
    • 50% = Color puro
    • 100% = Blanco

HSLA (con transparencia):

hsla(204, 70%, 53%, 0.5)  /* 50% de transparencia */

Ventajas:

  • Ajuste de color muy intuitivo
  • Fácil ajuste de brillo/saturación
  • Útil para crear paletas de colores

Desventajas:

  • Menos intuitivo que HEX/RGB
  • No soportado en algunos navegadores antiguos

Comparación de formatos de color​

CaracterísticaHEXRGBHSL
Concisión⭐⭐⭐⭐⭐⭐⭐
Legibilidad⭐⭐⭐⭐⭐⭐
Soporte CSS⭐⭐⭐⭐⭐⭐⭐⭐⭐
Facilidad de ajuste⭐⭐⭐⭐⭐⭐
Transparencia✗✓✓

Casos de uso​

1. Estilos CSS​

/* HEX */
.button {
  background-color: #3498db;
}

/* RGB */
.button {
  background-color: rgb(52, 152, 219);
}

/* HSL */
.button {
  background-color: hsl(204, 70%, 53%);
}

2. Generación de paleta de colores​

/* Fácil generación de colores similares con HSL */
.primary   { color: hsl(204, 70%, 53%); }
.lighter   { color: hsl(204, 70%, 70%); }  /* Aumentar L */
.darker    { color: hsl(204, 70%, 35%); }  /* Disminuir L */
.desaturate{ color: hsl(204, 40%, 53%); }  /* Disminuir S */

3. Color dinámico con JavaScript​

// Generar degradado con RGB
for (let i = 0; i < 255; i++) {
  const color = `rgb(${i}, 100, 200)`;
  // Usar
}

// Colores del arcoíris con HSL
for (let h = 0; h < 360; h += 30) {
  const color = `hsl(${h}, 100%, 50%)`;
  // Usar
}

Colores predefinidos​

Esta herramienta proporciona 10 colores populares:

ColorHEXNombre
🔴#e74c3cRojo
🔵#3498dbAzul
🟢#2ecc71Verde
🟠#f39c12Naranja
🟣#9b59b6Morado
🔷#1abc9cTurquesa
⚫#34495eGris oscuro
🟤#e67e22Marrón
⚪#95a5a6Gris claro
🟧#d35400Naranja oscuro

Consejos prácticos​

1. Aclarar/oscurecer color​

/* Original */
.button { background: hsl(204, 70%, 53%); }

/* 10% más claro */
.button-light { background: hsl(204, 70%, 63%); }

/* 10% más oscuro */
.button-dark { background: hsl(204, 70%, 43%); }

2. Agregar transparencia​

/* Agregar transparencia a HEX (8 dígitos) */
#3498db80  /* 50% de transparencia */

/* RGB/HSL */
rgba(52, 152, 219, 0.5)
hsla(204, 70%, 53%, 0.5)

3. Encontrar color complementario​

// H + 180 grados en HSL
function getComplementary(h, s, l) {
  return `hsl(${(h + 180) % 360}, ${s}%, ${l}%)`;
}

Preguntas frecuentes​

P: ¿Qué formato debo usar?​

  • HEX: Uso conciso en CSS, fácil de copiar
  • RGB: Programación, cuando se necesita ajustar cada canal
  • HSL: Generación de paleta de colores, ajuste de brillo/saturación

¡Generalmente se recomienda HEX!

P: ¿Cuál es la diferencia entre 3 y 6 dígitos de HEX?​

3 dígitos es el formato abreviado de 6 dígitos:

  • #f00 = #ff0000
  • #abc = #aabbcc

¡Usa 6 dígitos si necesitas color preciso!

P: ¿Por qué el valor máximo de RGB es 255?​

8 bits = 2^8 = 256 valores posibles (0-255) Total de colores = 256 × 256 × 256 = 16,777,216 colores

P: ¿Por qué H de HSL es 360 grados?​

Porque la rueda de color es un círculo (circle). 360 grados = una vuelta completa

Herramientas relacionadas​

Compatibilidad del navegador​

FormatoChromeFirefoxSafariEdge
HEX✓✓✓✓
RGB✓✓✓✓
RGBA✓✓✓✓
HSL✓✓✓✓
HSLA✓✓✓✓

💬 ¿Te ha sido útil esta herramienta?​

Si tienes preguntas o sugerencias de mejora, ¡no dudes en darnos tu opinión!

Privacidad​

Esta herramienta funciona completamente del lado del cliente. La información de color seleccionada no se envía al servidor y solo se procesa en tu navegador.