Skip to content
Zoyku

Conversor de colores

Pegue un color en hex, rgb() o hsl() y obtenga los tres formatos más una fila de tonos y sombras lista para su sistema de diseño.

Color (hex, rgb() u hsl())
#0071e3
rgb(0, 113, 227)
hsl(210, 100%, 45%)
Tonos y sombras

La fila de muestras mezcla el color con blanco (izquierda) y negro (derecha) al 20/40/60/80% — útil para estados hover y modo oscuro.

Esta herramienta funciona por completo en tu navegador. Tus datos nunca salen de tu dispositivo y no se suben a ningún servidor.

Cómo usarlo

  1. 1Pegue un color en cualquiera de los tres formatos: hex, rgb() u hsl().
  2. 2Lea los valores convertidos y copie el que necesite.
  3. 3Tome tonos y sombras de la fila de muestras inferior.

Conversor de colores

Entréguele #0071e3, rgb(0, 113, 227) o hsl(211, 100%, 45%): el analizador detecta el formato solo y devuelve hex, RGB y HSL a la vez, cada uno copiable con un clic.

Bajo los valores, una fila de tonos y sombras mezcla su color con blanco y negro en pasos del 20/40/60/80%: estados hover, bordes y variantes de modo oscuro al instante, sin abrir una herramienta de diseño.

Preguntas frecuentes

¿Cómo se convierte HSL a RGB?

Mediante la correspondencia cilíndrica estándar: cromacidad c = (1 − |2L − 1|) × S, un valor intermedio x fijado por el sector del tono y un desplazamiento m = L − c/2 en cada canal. Son las fórmulas de manual, así que los resultados coinciden con las herramientas de diseño.

¿Por qué mi código de color aparece como no válido?

Las formas aceptadas son #RGB / #RRGGBB, rgb(r, g, b) y hsl(h, s%, l%). Los canales deben estar en rango (0–255 para RGB, 0–360 para el tono, 0–100% para el resto) y separados por comas o espacios.

¿Para qué sirven los tonos y sombras?

Los tonos (mezclados con blanco) sirven para fondos hover, insignias y tarjetas; las sombras (mezcladas con negro) para estados pulsados, bordes y superficies oscuras. Derivar ambos de un único color de marca mantiene la UI coherente.

Herramientas relacionadas

Todas las herramientas de Utilidades →

Selector de color

Elija un color en la muestra o capte uno directamente de la pantalla con la API EyeDropper — hex, RGB y HSL copiables con un clic.

Todas las herramientas →

Generador de códigos QR

Convierta cualquier texto o URL en un código QR nítido con tamaño, colores y corrección de errores ajustables — descárguelo en PNG o SVG.

Todas las herramientas →

Calculadora de relación de aspecto

Con una relación como 16:9 y una dimensión, obtenga la anchura o altura que falta al instante — con presets de 1:1 a 21:9 para vídeo y diseño.

Todas las herramientas →

Generador UUID

Genera identificadores UUID v4 aleatorios en lote con un clic — de 1 a 500 cada vez, con la aleatoriedad criptográfica del navegador. Gratis e instantáneo.

Todas las herramientas →

Insertar esta herramienta

Pon esta herramienta en tu sitio con una línea: se ejecuta en el navegador del visitante.

<iframe src="https://zoyku.com/es/tools/color-converter?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — color-converter" loading="lazy"></iframe>
100% local processing