Selector y convertidor de color hexadecimal (RGB, HSL, HSV)

Convierta hexadecimal a RGB, HSL y HSV, copie muestras de armonía y exporte CSS o JSON, directamente en su navegador.

Se requiere JavaScript para funciones interactivas. Habilite JavaScript en su navegador para utilizar esta herramienta.

color hexagonal

Ingrese #RGB o #RRGGBB (con o sin #). Los valores no válidos mantienen la última conversión buena.

Conversiones

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

Muestras de armonía

tipo de armonía

recuento de muestras

Tinte/tira de sombra

Pasos de tinte/sombra

Exportar muestras

CSS

:root {
  --color-base: #3B82F6;
  --color-analogous-1: #3BF6AF;
  --color-analogous-2: #3BDFF6;
  --color-analogous-3: #3B82F6;
  --color-analogous-4: #513BF6;
  --color-analogous-5: #AF3BF6;
  --color-tint-shade-1: #000000;
  --color-tint-shade-2: #0A162B;
  --color-tint-shade-3: #142D55;
  --color-tint-shade-4: #1F4380;
  --color-tint-shade-5: #295AAA;
  --color-tint-shade-6: #3370D5;
  --color-tint-shade-7: #3D87FF;
}

JSON

{
  "baseHex": "#3B82F6",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7
}

Elija o pegue un color hexadecimal, conviértalo a RGB, HSL y HSV, genere muestras complementarias/análogas/tríadicas/monocromas, copie valores y exporte CSS o JSON. Gratis, rápido y se ejecuta completamente en su navegador.

Cómo utilizar este selector de color hexadecimal

Escriba o pegue un valor hexadecimal o utilice el selector nativo. La página lo convierte a RGB, HSL y HSV instantáneamente, genera muestras de armonía y una tira de tinte/sombra, y mantiene todo listo para copiar. Comparta su configuración con la URL: el estado se almacena en la cadena de consulta.

Referencia hexadecimal, RGB, HSL y HSV

Hex es una codificación RGB compacta. RGB describe canales rojo/verde/azul. HSL expresa tono, saturación y luminosidad; HSV utiliza tono, saturación y valor (brillo). Esta herramienta utiliza matemáticas deterministas en su navegador: sin cargas ni API externas.

Complementario, análogo, triádico y monocromático.

El tono complementario gira 180°. Pasos análogos matizan mediante un ángulo fijo alrededor de su base. Triadic utiliza compensaciones de 120°. Monocromático mantiene el tono y varía la luminosidad. Los controles de conteo se aplican a los modos analógicos y monocromáticos.

Variables CSS y exportación JSON

La exportación produce propiedades personalizadas :root con nombres estables (por ejemplo --color-base, --color-analogous-1) y JSON con baseHex, modo de armonía y listas de muestras para scripts o tokens de diseño.

Preguntas frecuentes

¿#ABC se expande a seis dígitos?

Sí. El hexadecimal de tres dígitos se expande por par de dígitos, por lo que #ABC se convierte en #AABBCC.

¿Qué pasa si mi hexágono no es válido?

Ves un error en línea. El último color válido permanece en las filas de conversión, el selector y las exportaciones hasta que vuelva a ingresar un hexadecimal válido.

¿Cómo se calculan los colores de armonía?

Son deterministas: complementario es un cambio de tono de 180° en HSL; análogo utiliza pasos de tono fijos; triadic utiliza compensaciones de 120°; monocromático varía la luminosidad manteniendo el tono y la saturación de la base.

¿Qué hay en la exportación JSON?

Claves estables: baseHex, Harmony, HarmonyCount cuando corresponda, HarmonySwatches (cadenas hexadecimales), tintShadeStrip y stripCount, adecuadas para herramientas o documentación.

¿Puedo compartir mis colores?

Sí. La URL se actualiza con hexadecimal, modo de armonía, recuentos y tamaño de tira para que puedas marcar o compartir una configuración exacta.