Convertidor de Código de Color
Elige cualquier color o escribe un valor en HEX, RGB, HSL o HSB — todos los formatos se actualizan instantáneamente. Obtén el color complementario y un fragmento CSS listo para pegar. Se ejecuta completamente en tu navegador, nada se envía a un servidor.
Elegir un color
o edite cualquier campo a continuación
Color complementario
#F6AF3C
180° opuesto en la rueda de colores
Fragmento CSS
color: #3B82F6;
background-color: #3B82F6;Cómo usar el Convertidor de Código de Color
Hay tres formas de establecer el color activo. Usa la que mejor se adapte a tu flujo de trabajo — el resto de la herramienta se actualiza automáticamente.
Tres formas de introducir un color
Haz clic en el cuadrado de color para abrir el selector de colores nativo de tu navegador, escribe un valor directamente en cualquiera de los cuatro campos de formato (HEX, RGB, HSL o HSB), o pega un color copiado desde Figma, Photoshop o las DevTools de tu navegador. Todos los formatos se sincronizan instantáneamente cada vez que cambia cualquier campo.
Usar el color complementario
El color complementario se calcula girando el matiz 180° en la rueda de colores HSL preservando la misma saturación y luminosidad. Úsalo para crear colores de botones y enlaces de alto contraste que destaquen frente a tu color de marca, construir paletas complementarias divididas o triádicas, o identificar qué color de acento creará la mayor tensión visual para las CTAs.
Consejo de accesibilidad: Contraste de color
WCAG 2.1 AA requiere una relación de contraste de al menos 4,5:1 para texto normal y 3:1 para texto grande contra su fondo. Al usar el valor de luminosidad de HSL, elige texto con L ≤ 40% sobre fondos claros y L ≥ 60% sobre fondos oscuros. Verifica siempre con un verificador de contraste dedicado para el cumplimiento preciso de WCAG.
Preguntas frecuentes
¿Cuál es la diferencia entre los formatos de color HEX, RGB, HSL y HSB?
HEX (#RRGGBB) es una representación hexadecimal de seis dígitos de los canales rojo, verde y azul de un color, ampliamente utilizada en CSS web. RGB (Rojo, Verde, Azul) expresa los mismos tres canales como enteros de 0 a 255. HSL (Matiz, Saturación, Luminosidad) describe el color por su posición en la rueda de colores (matiz, 0–360°), intensidad (saturación, 0–100%) y luminosidad de negro a blanco (luminosidad, 0–100%). HSB/HSV (Matiz, Saturación, Brillo/Valor) es similar pero usa Brillo en lugar de Luminosidad — un color HSB completamente saturado en B=100% es vívido, mientras que en HSL el equivalente es L=50%.
¿Qué formato de color debería usar en CSS?
Los cuatro formatos son válidos en CSS moderno. HEX es el más común para valores estáticos porque es compacto. RGB y HSL se prefieren cuando necesitas manipular valores programáticamente — por ejemplo, usando propiedades CSS personalizadas para derivar tonos más claros o más oscuros. HSL es especialmente amigable para diseñadores porque ajustar el valor L (luminosidad) produce resultados intuitivos. HSB no está soportado nativamente en CSS pero se usa en herramientas de diseño como Figma y Adobe Photoshop.
¿Qué es un color complementario?
Un color complementario es el color directamente opuesto en la rueda de colores de 12 pasos o 360°, es decir, a 180° de matiz. Los pares complementarios crean el máximo contraste y vivacidad visual cuando se colocan uno al lado del otro — por ejemplo, azul y naranja, o rojo y verde. Los diseñadores usan colores complementarios para botones de llamada a la acción, destacados o en cualquier lugar donde se necesite contraste.
¿Esta herramienta envía mis datos de color a un servidor?
No. Todos los cálculos de conversión de color ocurren completamente dentro de tu navegador en JavaScript. No se transmiten valores de color, selecciones del selector ni ningún otro dato a ningún servidor. La herramienta funciona sin conexión una vez que la página está cargada.
¿Cómo convierto un color que veo en un sitio web a HEX o RGB?
Abre las DevTools de tu navegador (F12 o clic derecho → Inspeccionar), selecciona el elemento con el color que deseas y mira su CSS en el panel Estilos. Haz clic en la muestra de color junto a cualquier valor de color para abrir el selector integrado, que muestra los valores HEX y RGB. Alternativamente, usa una extensión del navegador como ColorZilla para tomar muestras de cualquier píxel en la pantalla y obtener su código HEX/RGB al instante.
Herramientas relacionadas
¿Necesitas una auditoría SEO técnica completa?
Nuestros expertos SEO pueden auditar la salud técnica de tu sitio — rastreabilidad, Core Web Vitals, datos estructurados y más — y entregar un plan de acción personalizado para el crecimiento orgánico sostenible.
Get a Free SEO Audit