Conversor de color

Convertir un color entre formatos

Escribe un color en HEX, RGB, HSL o por su nombre y obtén todas sus formas, con una prueba de contraste.

Los botones de esta herramienta siguen en inglés.

Type or pick a colour

ColourPicker

Use HEX (#f80, #ff8800), rgb(255 136 0), hsl(32 100% 50%) or a CSS colour name.

Copy it in any form

HEX
RGB
HSL
Nearest CSS name

Check the contrast

With white
With black

Normal text needs 4.5:1 and large text needs 3:1 (WCAG 2). A see-through colour is laid over white or black first.

Todo esto ocurre en tu dispositivo. Nada de lo que escribes o añades se envía a ninguna parte. Compruébalo tú mismo

¿Qué formas de color puedo escribir?

HEX como #f80, #ff8800 o #ff880080, rgb() o rgba() como rgb(255 136 0 / 50%), hsl() o hsla() como hsl(32 100% 50%), o un nombre de color CSS como rebeccapurple. También puedes usar el selector de color.

¿Cómo se elige el nombre CSS más cercano?

La herramienta compara tu color con los 148 nombres de color CSS y elige el más parecido a la vista, con una distancia ponderada en RGB. Avisa cuando la coincidencia es exacta.

¿Qué significan aprobado y suspenso en el contraste?

Siguen WCAG 2. El texto normal necesita al menos 4,5:1 y el texto grande (unos 24 px, o 19 px en negrita) al menos 3:1. La relación se corta a dos decimales, nunca se redondea hacia arriba. Un color translúcido se coloca antes sobre blanco o negro.

¿Se suben mis datos a algún sitio?

No. Todo se ejecuta en la pestaña de tu navegador, y la política de seguridad de la página impide que envíe nada.

Acerca de esta herramienta

Se ejecuta	En tu navegador. Tus archivos se quedan en tu dispositivo.
Reads	HEX (3, 4, 6 u 8 dígitos), rgb() y rgba(), hsl() y hsla(), y los 148 nombres de color CSS
Writes	HEX, RGB, HSL y el nombre CSS más cercano
Contrast	Relación WCAG 2 con el blanco y el negro: 4,5:1 para texto normal, 3:1 para texto grande
Works offline	Sí, una vez cargada la página
Licencia	AGPL-3.0
Añadida	11 de octubre de 2026
Creada por	Sapience Design
Código fuente	tools/everyday/colour-converter

Informar de un problema

Convertir un color entre formatos

Type or pick a colour

Copy it in any form

Check the contrast

Actividad de un agente de IA

Sugerir una herramienta

Paso 1 de 3 ¿Qué debería hacer la herramienta?

Paso 2 de 3 ¿Algo más?

Paso 3 de 3 ¿La quieres antes?

¡Gracias!