Convertidor de colores

Conversor de color entre códigos HEX, RGB, HSL y OKLCH, con la relación de contraste WCAG de dos colores. Comprueba la accesibilidad mientras eliges paleta, gratis en tu navegador.

HEX

#3b82f6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

OKLCH

oklch(0.623 0.188 259.8)

Ajuste HSL

H217S91%L60%

Relación de contraste (WCAG)

Color de comparación:

샘플 텍스트

Relación de contraste: 3.68:1

WCAG: AA Large

Insertar

<iframe src="https://devtools.patrache.studio/es/converters/color-converter/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="Convertidor de colores — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/es/converters/color-converter/">Convertidor de colores</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Última actualización: 2026 · Herramienta en línea gratuita

¿Qué es Convertidor de colores?

Conversor de color entre códigos HEX, RGB, HSL y OKLCH, con la relación de contraste WCAG de dos colores. Comprueba la accesibilidad mientras eliges paleta, gratis en tu navegador.

Cómo usar

1
Introducir un color— Use el selector de color o la entrada de texto. Se admiten los formatos HEX, rgb() y hsl().
2
Ver formatos— Los formatos HEX, RGB, HSL y OKLCH se muestran simultáneamente.
3
Copiar valores— Use el botón copiar para cada formato para copiar el valor CSS.
4
Verificar ratio de contraste— Establezca un color de comparación para verificar el ratio de contraste WCAG.

Herramientas relacionadas

Generador de degradado CSSGenerador visual de degradados CSS lineales, radiales y cónicos: añade paradas de color, ajusta el ángulo y copia el CSS. Perfecto para fondos y botones, gratis en tu navegador.

Generador CSS box-shadowGenerador de box-shadow CSS con controles de desplazamiento, desenfoque, extensión, color e inset y vista previa en vivo. Copia el CSS listo para usar, gratis en tu navegador.

Referencia unidades CSSReferencia de unidades CSS px, em, rem, %, vw, vh, vmin, vmax y ch, ordenadas por categoría. Con explicaciones claras de cada unidad absoluta y relativa, gratis en tu navegador.

Convertidor PX a REMConversor de PX a REM que traduce píxeles y rem en ambos sentidos según un tamaño de fuente raíz configurable, con decimales. Incluye tabla de referencia y fragmento CSS copiables, gratis.

Preguntas frecuentes

OKLCH es una representación cilíndrica del espacio de color Oklab, el más perceptualmente uniforme. Es compatible con CSS Color Level 4.

Mide la diferencia de luminosidad entre el texto y los colores de fondo. AA requiere al menos 4,5:1, AAA requiere 7:1.

Actualmente solo se admiten colores opacos (RGB, HEX de 6 dígitos). RGBA y HSLA se añadirán próximamente.

Sí. Puede pegar el resultado de cada formato directamente en su CSS.

No. Todas las conversiones de color se realizan en su navegador.