🎨 Convertidor de Color
Convierte colores al instante entre HEX, RGB, HSL y OKLCH. Vista previa en vivo, cuentagotas y búsqueda de nombres de color.
HEX, RGB, HSL, OKLCH: ¿cuál deberías usar?
Cada color que ves en pantalla se puede describir en múltiples formatos equivalentes. Cada uno tiene diferentes fortalezas:
- HEX (
#6366f1) - Compacto y universal. Se usa en todas partes en CSS, herramientas de diseño y guías de marca. Fácil de copiar y pegar, pero no es legible para realizar ajustes directos. - RGB (
rgb(99, 102, 241)) - Valores directos de los canales rojo, verde y azul. Útil cuando se generan colores mediante código o cuando se necesita un canal alfa. - HSL (
hsl(239, 84%, 67%)) - Tono (Hue), saturación (Saturation) y luminosidad (Lightness). Mucho más fácil de ajustar a mano: cambia el tono para cambiar el color, o la luminosidad para obtener variantes más claras o más oscuras. - OKLCH (
oklch(0.59 0.21 280)) - Espacio de color perceptualmente uniforme. Números de luminosidad idénticos realmente se ven igual de brillantes (a diferencia de HSL). Los sistemas de diseño modernos lo estandarizan para un contraste predecible y la generación de paletas.
Cómo usar este convertidor de color
- Escribe en cualquier campo: cambia HEX, RGB, HSL u OKLCH y todos los demás formatos se actualizarán al instante.
- Arrastra un control deslizante: ajusta canales individuales (R, G, B, H, S, L) con vista previa en vivo.
- Haz clic en la muestra de color: copia el valor HEX actual en tu portapapeles.
- Usa el cuentagotas: selecciona cualquier color de tu pantalla (solo Chrome y Edge; usa la API nativa de EyeDropper).
- Paleta de recientes: cada color que previsualizas se guarda localmente para que puedas volver a visitarlo durante la sesión.
🔒 100% Privado y Seguro
Tus datos permanecen en tu dispositivo. Toda la conversión de color ocurre localmente en tu navegador - nunca subimos tus colores a ningún servidor.
Preguntas Frecuentes
¿Esta herramienta admite transparencia / canal alfa?
Aún no: la versión 1 maneja solo colores opacos. El soporte para transparencias (RGBA, HSLA, OKLCH con alfa) está en nuestra hoja de ruta.
¿Por qué HSL → OKLCH no da números redondos?
HSL y OKLCH son modelos de color fundamentalmente diferentes. HSL es una simple reorganización geométrica de RGB; OKLCH se basa en el espacio de color perceptivo OKLab. La conversión pasa por RGB y luego por XYZ de luz lineal, por lo que se obtienen decimales. Los números pueden parecer desordenados pero el color es exactamente el mismo.
¿Por qué el nombre del color a veces muestra "-"?
Busca la coincidencia más cercana entre los 147 nombres de color CSS estándar. Si tu color está muy lejos de cualquiera de ellos (lo que ocurre con la mayoría de colores), la coincidencia más cercana no es útil, por lo que mostramos "-" en lugar de engañarte.
¿El cuentagotas está disponible en todos los navegadores?
No, la API nativa EyeDropper actualmente es solo para Chrome/Edge. El botón está deshabilitado en los navegadores que no la admiten (Firefox, Safari).