Saltar al contenido principal

Convertidor de color

El Convertidor de color es una herramienta en línea que convierte entre formatos de color HEX, RGB y HSL. Admite conversión bidireccional en tiempo real y selección de colores predefinidos.

#3498DB

🎨 Selector de Color

HEX

Más comúnmente usado en la web

RGB

HSL

🎨 Colores Predefinidos

Soporta conversión entre formatos de color HEX, RGB y HSL. Seleccione colores directamente con el selector de color o ingrese valores manualmente.

Funciones​

  • Soporte de múltiples formatos: Admite formatos HEX, RGB, HSL
  • Conversión en tiempo real: Sincroniza automáticamente todos los formatos
  • Vista previa de color: Muestra el color seleccionado en tiempo real
  • Colores predefinidos: Selección rápida de 10 colores comunes
  • Copiar con un clic: Copie rápidamente el valor de color en cualquier formato

Formatos de color​

HEX (Hexadecimal)​

Código hexadecimal de 6 dígitos que representa el color:

#RRGGBB
#FF5733 → Rojo:255, Verde:87, Azul:51

RGB (Rojo Verde Azul)​

Utiliza tres valores en el rango 0-255:

rgb(255, 87, 51)

HSL (Matiz, Saturación, Luminosidad)​

  • Matiz (H): 0-360 grados (color en la rueda cromática)
  • Saturación (S): 0-100% (intensidad del color)
  • Luminosidad (L): 0-100% (claridad/oscuridad)
hsl(9, 100%, 60%)

Ejemplos de programación​

JavaScript​

// HEX a RGB
function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

console.log(hexToRgb('#FF5733'));
// Salida: {r: 255, g: 87, b: 51}

// RGB a HEX
function rgbToHex(r, g, b) {
  return "#" + [r, g, b].map(x => {
    const hex = x.toString(16);
    return hex.length === 1 ? "0" + hex : hex;
  }).join('');
}

console.log(rgbToHex(255, 87, 51));
// Salida: #ff5733

Uso de CSS​

/* HEX */
.element {
  color: #FF5733;
}

/* RGB */
.element {
  color: rgb(255, 87, 51);
}

/* RGBA (con transparencia) */
.element {
  color: rgba(255, 87, 51, 0.5);
}

/* HSL */
.element {
  color: hsl(9, 100%, 60%);
}

/* HSLA (con transparencia) */
.element {
  color: hsla(9, 100%, 60%, 0.5);
}

Colores predefinidos​

Nombre de colorHEXRGBUso
Rojo#FF0000rgb(255, 0, 0)Error, advertencia
Azul#0000FFrgb(0, 0, 255)Enlace, información
Verde#00FF00rgb(0, 255, 0)Éxito, confirmación
Amarillo#FFFF00rgb(255, 255, 0)Advertencia, atención
Morado#800080rgb(128, 0, 128)Creatividad, lujo
Naranja#FFA500rgb(255, 165, 0)Acción, energía
Rosa#FFC0CBrgb(255, 192, 203)Romance, suavidad
Cian#00FFFFrgb(0, 255, 255)Frescura, moderno
Gris#808080rgb(128, 128, 128)Neutral, equilibrio
Negro#000000rgb(0, 0, 0)Contraste, elegancia

Casos de uso​

1. Desarrollo Web​

Definir colores en CSS:

:root {
  --primary-color: #667eea;
  --secondary-color: rgb(102, 126, 234);
  --accent-color: hsl(232, 75%, 67%);
}

2. Sistema de diseño​

Establecer una paleta de colores consistente:

const colors = {
  primary: {
    hex: '#667eea',
    rgb: 'rgb(102, 126, 234)',
    hsl: 'hsl(232, 75%, 67%)'
  }
};

3. Visualización de datos​

Usar códigos de color en gráficos y diagramas.

Herramientas relacionadas​