Selector y conversor de color
Elige un color y conviértelo entre HEX, RGB, HSL y OKLCH.
⚠ This OKLCH value falls outside the sRGB gamut and was clamped.
Pick a color from an image
WCAG contrast
Color schemes & harmonies
Tints & shades
Color blindness simulation
Runs entirely in your browser. Nothing is uploaded.
Un conversor y selector de color gratuito que funciona completamente en tu navegador
Este conversor de color gratuito transforma cualquier color en todos los formatos que necesitas, al instante. Pega un código hex, escribe un valor RGB, arrastra la rueda de color o muestra un píxel con el cuentagotas — y ve el resultado en HEX, RGB, HSL, HSV, CMYK y OKLCH simultáneamente. Cada campo es editable y bidireccional: cambia un formato y todos los demás se actualizan en tiempo real sin recargar la página, sin solicitudes al servidor y sin demoras.
Sitios como ColorHexa.com, RapidTables, convertingcolors.com y cssgradient.io cubren partes de esto: ColorHexa muestra desgloses detallados por URL, RapidTables proporciona conversores de un solo formato en páginas separadas, convertingcolors admite espacios de color especializados como CIELab y XYZ, y cssgradient está diseñado específicamente para la generación de gradientes CSS. Esta herramienta combina los casos de uso cotidianos — conversión de formatos, selección visual, verificación de accesibilidad y generación de paletas — en una interfaz en vivo donde introduces un color una vez y ves todo a la vez. Nada se sube; todo el procesamiento es local.
Convierte HEX, RGB, HSL, HSV, CMYK y OKLCH — de forma bidireccional e instantánea
Cada campo es editable y se mantiene sincronizado. Pega un código hex y los valores RGB, HSL, HSV, CMYK y OKLCH se actualizan al instante. Cambia cualquiera y los demás le siguen inmediatamente. Eso lo convierte simultáneamente en un rápido conversor de hex a RGB, una herramienta de RGB a hex, un conversor de RGB a CMYK y un conversor de HSL/HSV/OKLCH en una sola vista — ideal cuando un archivo de diseño te da un formato pero tu hoja de estilos, trabajo de impresión o sistema de diseño necesita otro.
Todas las salidas son valores HTML y CSS válidos — #hex, rgb(…), hsl(…), hsv(…), cmyk(…) y oklch(…) — cada uno con un botón de copia con un clic. La herramienta también identifica el color CSS nombrado más cercano, para que puedas describir un tono al instante o confirmar si un hex personalizado coincide con una palabra clave estándar. A diferencia de las páginas de conversión única de RapidTables, nunca necesitas navegar entre herramientas separadas para diferentes pares de formatos.
Selecciona un color de una imagen — o directamente de tu pantalla
¿Necesitas el color exacto de una foto, logo, captura de pantalla o maqueta? Usa el selector de color de imagen: sube un archivo, arrástralo o pégalo desde tu portapapeles (Ctrl+V / Cmd+V), luego muévete sobre la imagen y haz clic para capturar cualquier píxel. Una lupa amplificadora integrada hace zoom para una selección perfecta de píxeles, y cada color en el que hagas clic se guarda en una tira 'seleccionados de imagen' para que puedas construir una paleta desde una sola imagen sin perder selecciones previas. La imagen se procesa localmente usando un canvas HTML y nunca abandona tu dispositivo — funciona en todos los navegadores incluidos Firefox y Safari.
¿Prefieres capturar un color de cualquier otro lugar de tu pantalla? El cuentagotas muestra cualquier píxel de tu pantalla en Chrome 95+ y Edge 95+ mediante la API EyeDropper nativa — haz clic en él, apunta a cualquier píxel en pantalla y ese color se carga en todos los campos al instante. Una tira de colores recientes y la rueda de colores interactiva completan las opciones de selección, todo sin instalar nada. Esta capacidad de selección va mucho más allá de lo que ofrecen ColorHexa, RapidTables o convertingcolors.
Esquemas de color, armonías, tintes y sombras
Convierte un color en toda una paleta. La herramienta genera seis esquemas de color basados en armonías de la rueda de colores: complementario, análogo, triádico, tetrádico, split-complementario y monocromático. Haz clic en cualquier muestra para convertirla en el nuevo color base y continúa explorando, por lo que la herramienta funciona como un rápido generador de paletas de colores para construir combinaciones cohesivas y acordes con la marca.
La escala de tintes y sombras produce una gama de pasos más claros y más oscuros desde tu color base — útil para estados hover, estados activos, estados deshabilitados, bordes y fondos. Hacer clic en cualquier paso lo convierte en el color activo y muestra su desglose completo de formatos. Tanto la generación de paletas como la escala de tintes/sombras se actualizan instantáneamente en cada cambio de color sin solicitudes al servidor — a diferencia de las herramientas de diseño en la nube como Adobe Color o Coolors, que requieren una solicitud de red para generar resultados.
Verificación de contraste WCAG y simulación de daltonismo
La accesibilidad está integrada en cada elección de color. El verificador de contraste WCAG calcula la relación de contraste basada en luminancia de tu color frente a blanco y negro, luego muestra insignias de aprobado/reprobado AA y AAA para texto normal, texto grande y componentes de UI — los tres niveles WCAG 2.1 que determinan si un par de primer plano/fondo cumple los estándares de accesibilidad. Se actualiza en tiempo real mientras ajustas el color, para que puedas iterar hacia el cumplimiento sin cambiar a una herramienta separada.
El simulador de daltonismo previsualiza tu color tal como lo ven las personas con protanopía, deuteranopía, tritanopía y acromatopsia — calculado usando el algoritmo de simulación estándar de Brettel/Viénot y actualizado en tiempo real. Juntos, la verificación de contraste y la simulación de daltonismo ayudan a garantizar que tus elecciones de diseño sigan siendo significativas y distinguibles para cada espectador. Estas características hacen que esta herramienta sea más completa que ColorHexa, RapidTables o convertingcolors para decisiones de color centradas en la accesibilidad.
Comprender OKLCH — el futuro del color CSS
OKLCH es un espacio de color perceptualmente uniforme que ha llegado al CSS estándar mediante la especificación CSS Color Level 4. Representa los colores como Luminosidad (L), Croma (C) y Tono (H), donde la Luminosidad está calibrada para la percepción humana en lugar de para la energía de luz lineal. Esto significa que dos colores con el mismo valor L parecerán igualmente claros al ojo humano independientemente de su tono — algo que no es cierto en HSL o RGB. Para los diseñadores que construyen paletas sistemáticas, esto significa que puedes definir un único valor L para 'fondo primario', aplicarlo a cada tono de tu paleta y obtener resultados visualmente equilibrados sin ajuste manual.
OKLCH también describe una gama más amplia que sRGB — puede representar colores Display P3 y Rec.2020 que están más allá del triángulo sRGB usado por la mayoría de los valores hex, RGB y HSL. Los navegadores modernos (Chrome, Safari, Firefox) ahora admiten la función CSS oklch() de forma nativa, convirtiendo OKLCH en el formato con visión de futuro para el trabajo de color CSS. Esta herramienta muestra una advertencia de gama cuando el valor OKLCH que has introducido cae fuera del rango sRGB y sería limitado por navegadores más antiguos, dándote una alerta anticipada antes de implementar en producción.
Una alternativa gratuita al selector de color de Google, Adobe Color y herramientas online
La mayoría de los selectores de color están enterrados dentro de algo más grande. El selector de color de Google solo aparece en resultados de búsqueda para consultas específicas y no se puede marcar como favorito ni usar de forma independiente. El selector de color de Adobe vive dentro de Photoshop, Illustrator o Adobe Color (color.adobe.com), que requiere una cuenta de Adobe y sincroniza datos con los servidores de Adobe. ColorHexa y RapidTables son sitios de referencia en lugar de herramientas interactivas. convertingcolors.com cubre espacios de color especializados pero carece de funciones de selección y paleta. cssgradient.io es excelente para la generación de gradientes pero no para la gestión de colores individuales.
Este es un selector y conversor de color gratuito e independiente que se abre con un clic, funciona en cualquier dispositivo, nunca te pide que inicies sesión y se ejecuta completamente en tu navegador. Ya seas un desarrollador que busca un hex de marca, un diseñador que afina una paleta HSL, un profesional de impresión que verifica aproximaciones CMYK o un ingeniero de accesibilidad que verifica las relaciones de contraste WCAG — esta herramienta hace todo el trabajo en una página rápida y privada. El soporte de OKLCH, la verificación de accesibilidad y la generación de paletas están incluidos de forma predeterminada, características por las que la mayoría de las alternativas cobran o simplemente no ofrecen.
Frequently asked questions
¿Es gratuito este conversor de color?
Sí, completamente gratuito sin registro, sin cuenta y sin límites de uso. Funciona enteramente en tu navegador, por lo que los colores que selecciones, pegues o muestres nunca abandonan tu dispositivo. No hay nada que instalar y no se requiere suscripción. Cada función — conversión, cuentagotas, selector de imagen, verificación de contraste WCAG, tintes y sombras, simulación de daltonismo y generación de esquemas de color — está disponible gratis desde la primera visita.
¿Cómo convierto un código HEX a RGB?
Pega tu código hex (con o sin el # inicial) en el campo HEX y los valores RGB, HSL, HSV, CMYK y OKLCH se actualizan al instante. Por ejemplo, pega #3b82f6 e inmediatamente verás rgb(59, 130, 246) en el campo RGB y hsl(217, 91%, 60%) en el campo HSL. La conversión es bidireccional: escribe un valor RGB y el HEX y todos los demás campos se actualizan de la misma manera.
¿Qué formatos de color puede convertir esta herramienta?
La herramienta convierte de forma bidireccional entre seis formatos: HEX (el código #rrggbb usado en HTML y CSS), RGB (valores rojo-verde-azul de 0 a 255), HSL (tono 0-360°, saturación y luminosidad como porcentajes), HSV/HSB (tono-saturación-valor, el modelo usado en la mayoría de los selectores de color de aplicaciones de diseño), CMYK (porcentajes de cian-magenta-amarillo-negro para vista previa de impresión) y OKLCH (un espacio de color moderno perceptualmente uniforme). Cambia cualquier campo y los otros cinco se actualizan al instante.
¿Puedo seleccionar un color de una imagen o foto?
Sí — esta es una herramienta completa de selección de color de imagen. Sube una foto, arrástrala o pégala desde tu portapapeles (Ctrl+V / Cmd+V), luego pasa el cursor sobre la imagen y haz clic para capturar el color exacto de cualquier píxel. Una lupa amplificadora hace zoom para una selección perfecta de píxeles. La imagen se procesa localmente en tu navegador usando un canvas HTML y nunca se sube a ningún servidor.
¿Verifica el contraste para accesibilidad (WCAG)?
Sí. El verificador de contraste WCAG calcula la relación de contraste basada en luminancia entre tu color elegido y fondos blancos y negros, y muestra insignias de aprobado/reprobado AA y AAA para texto normal, texto grande y componentes de UI. WCAG AA requiere una relación de 4.5:1 para texto normal (3:1 para texto grande); WCAG AAA requiere 7:1 (4.5:1 para texto grande). El verificador se actualiza en tiempo real mientras ajustas cualquier campo de color.
¿Qué es OKLCH y por qué debería usarlo?
OKLCH es un espacio de color moderno y perceptualmente uniforme introducido en CSS Color Level 4. A diferencia de RGB o HSL, donde los cambios numéricos iguales no producen diferencias igualmente percibidas por el ojo humano, OKLCH está calibrado para que aumentar o disminuir el valor de luminosidad (L) en una cantidad fija produzca un resultado visualmente consistente independientemente del tono. Esto lo hace ideal para construir paletas de colores accesibles y equilibradas. OKLCH también puede representar colores de gama amplia (Display P3) y está soportado de forma nativa en los navegadores modernos.
¿Funciona el selector de color en iPhone y Android?
Sí. Toda la herramienta funciona en cualquier navegador móvil moderno — Safari en iPhone/iPad y Chrome en Android. La rueda de colores, los campos de entrada de formato, el selector de color de imagen, el verificador de contraste WCAG, la escala de tintes/sombras y el generador de esquemas de color funcionan normalmente en móvil. El cuentagotas de pantalla no está disponible en navegadores móviles (es una API exclusiva de Chrome/Edge en escritorio), pero el selector de imagen y el pegado del portapapeles funcionan perfectamente en móvil.
Related tools
Ver todas las herramientas
Nuevo Generador de glassmorphism
Diseña una tarjeta de cristal esmerilado y copia el CSS, con vista previa en vivo.
Nuevo Generador de text-shadow CSS
Ajusta una sombra de texto CSS con vista previa en vivo y copia el código.
Nuevo Mezclador de colores
Mezcla dos colores en cualquier proporción y copia el resultado o cualquier paso.
Nuevo Selector de color de imagen
Elige cualquier color de una imagen y extrae su paleta dominante en HEX, RGB y HSL.
Nuevo Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Nuevo Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.