Selector y Convertidor de Colores — Códigos HEX, RGB, HSL, CMYK en Línea

El color es la base de cada diseño visual. Ya estés construyendo un sitio web, diseñando una aplicación móvil, creando una identidad de marca o preparando un archivo para imprimir, necesitas códigos de color precisos que se traduzcan perfectamente en cada medio. Adivinar colores a simple vista lleva a resultados inconsistentes. Nuestro Selector y Convertidor de Colores gratuito te da valores exactos de color en cuatro formatos profesionales — HEX, RGB, HSL y CMYK — además de una paleta completa de tonos y sombras para construir esquemas de color armoniosos en segundos.

¿Por qué la precisión del color importa en el diseño

El color no es solo decoración. Impulsa el comportamiento del usuario, comunica la identidad de la marca y garantiza la accesibilidad. Un estudio del Color Marketing Group encontró que hasta el 85 por ciento de los consumidores identifican el color como la razón principal para comprar un producto. En el diseño digital, el tono incorrecto de azul puede hacer que un botón sea invisible, mientras que el verde correcto puede aumentar las tasas de conversión señalando confianza y acción.

El desafío es que el color existe en diferentes formatos según donde se utilice. Los desarrolladores web trabajan en HEX y RGB. Los diseñadores gráficos suelen preferir HSL porque es intuitivo de ajustar. Los profesionales de impresión necesitan CMYK porque las pantallas y las impresoras producen colores de manera diferente. Sin un convertidor confiable, traducir un solo color entre estos formatos se convierte en un proceso manual y propenso a errores.

Las pantallas emiten luz usando el modelo aditivo RGB — combinando rojo, verde y azul para crear colores. Las impresoras usan el modelo sustractivo CMYK — superponiendo tinta cian, magenta, amarilla y negra para absorber la luz y producir color. Debido a que estos procesos son fundamentalmente diferentes, un color que parece vibrante en la pantalla puede aparecer apagado o desplazado en el papel. Un convertidor de color adecuado te muestra los valores exactos en cada sistema para que sepas qué esperar antes de comprometerte con un diseño.

Cómo usar el selector y convertidor de colores

Encontrar y convertir colores toma segundos. Puedes comenzar desde un selector visual, un código HEX o deslizadores RGB.

1. Elige un color usando la entrada de color nativa. Haz clic en el cuadro de color para abrir el selector de color del sistema y elegir cualquier tonalidad visualmente. Alternativamente, escribe directamente un código HEX en el campo de entrada.
2. Ajusta con deslizadores RGB para un control preciso. Ajusta los valores de rojo, verde y azul de forma independiente usando los deslizadores o escribiendo números exactos (0–255).
3. Ver conversiones instantáneas en los cuatro formatos. Mientras ajustas el color, los valores HEX, RGB, HSL y CMYK se actualizan en tiempo real. Cada formato tiene su propio botón de copia.
4. Copia cualquier código con un solo clic. Haz clic en el icono de copia junto a cualquier formato para guardar ese valor exacto en tu portapapeles. Un checkmark confirma que la copia fue exitosa.
5. Explora tonos y sombras debajo del selector principal. La herramienta genera automáticamente una cuadrícula de tonos más claros (añadiendo blanco) y sombras más oscuras (añadiendo negro) basadas en tu color seleccionado. Haz clic en cualquier variación para seleccionarla y ver sus valores convertidos instantáneamente.

Todo el proceso es visual e interactivo. No necesitas conocer la matemática detrás de los espacios de color — la herramienta maneja cada conversión automáticamente.

Entendiendo los formatos de color

Formato	¿Qué representa?	Mejor usado para	Ejemplo
HEX	Código hexadecimal de seis dígitos que representa valores RGB	Diseño web, CSS, HTML, gráficos digitales	#3B82F6
RGB	Valores de luz roja, verde y azul de 0 a 255	Pantallas, CSS, edición de imágenes, video	rgb(59, 130, 246)
HSL	Matiz (0–360°), Saturación (0–100%), Luminosidad (0–100%)	Ajustar colores de forma intuitiva, temas, accesibilidad	hsl(217, 91%, 60%)
CMYK	Porcentajes de cian, magenta, amarillo y negro (0–100)	Impresión profesional, empaques, publicaciones	cmyk(76%, 47%, 0%, 4%)

Códigos HEX

HEX es el formato más común en el desarrollo web. Representa el rojo, verde y azul como números hexadecimales de dos dígitos combinados en una sola cadena de seis caracteres prefijada con un hashtag. #FF0000 es rojo puro, #00FF00 es verde puro y #0000FF es azul puro. El formato compacto hace fácil pegarlo en archivos CSS, tokens de diseño y archivos de configuración.

Valores RGB

RGB define colores por la intensidad de la luz roja, verde y azul en una escala de 0 a 255. Este es el lenguaje nativo de los monitores de computadora, pantallas de televisión y pantallas de smartphones. RGB también es la base sobre la cual se construyen los códigos HEX — cada valor HEX puede convertirse directamente a RGB y viceversa.

Valores HSL

HSL significa Matiz, Saturación y Luminosidad. Los diseñadores suelen preferir HSL porque se mapea a cómo los humanos piensan sobre el color. El matiz es el color real en el espectro (0° es rojo, 120° es verde, 240° es azul). La saturación controla cuán vibrante o apagado es el color. La luminosidad controla cuán brillante o oscuro es. ¿Quieres una versión más clara de tu azul? Solo aumenta el valor de luminosidad. ¿Quieres que sea más apagado? Disminuye la saturación. Esta estructura intuitiva hace que HSL sea ideal para construir paletas de color y sistemas de diseño.

Valores CMYK

CMYK es el estándar para la impresión porque la tinta física no puede producir luz. En lugar de emitir rojo, verde y azul como una pantalla, los materiales impresos absorben la luz. El cian absorbe el rojo, el magenta absorbe el verde y el amarillo absorbe el azul. Se añade tinta negra (el "K" en CMYK) porque combinar cian, magenta y amarillo rara vez produce un negro profundo y rico. Cuando conviertes un color RGB o HEX a CMYK, estás traduciendo valores de luz de pantalla en porcentajes de cobertura de tinta que una impresora puede entender.

Características clave

Función	¿Qué hace?	¿Por qué importa?
Selector de color nativo	Abre el selector de color del sistema para selección visual	Te permite elegir colores naturalmente a simple vista antes de ajustarlos
Entrada manual de HEX	Escribe cualquier código HEX válido directamente	Perfecto cuando tienes un color de una guía de marca o archivo de diseño
Control de deslizadores RGB	Deslizadores independientes para rojo, verde y azul	Ajustes precisos para coincidir con especificaciones exactas
Conversión en tiempo real	Todos los cuatro formatos se actualizan instantáneamente mientras ajustas	Sin adivinanzas — ve cada valor a la vez sin cambiar de pestañas
Copia con un solo clic	Botón de copia para cada formato con confirmación visual	Obten el código exacto que necesitas sin selección manual
Paleta de tonos	Versiones más claras de tu color añadiendo blanco	Crea estados de hover, fondos y acentos sutiles
Paleta de sombras	Versiones más oscuras de tu color añadiendo negro	Crea bordes, estados activos y profundidad en tu diseño
Selección al hacer clic en variaciones	Haz clic en cualquier tono o sombra para seleccionarlo	Itera a través de opciones de paleta sin reescribir códigos

A diferencia de los selectores de color independientes que solo producen un formato, esta herramienta conecta la brecha entre el diseño digital e impresión. Un desarrollador web puede elegir un color, copiar su código HEX para CSS y ver simultáneamente los valores CMYK para compartir con un diseñador de impresión. Un artista gráfico puede comenzar con un valor CMYK de una breve de impresión y obtener inmediatamente el equivalente RGB para maquetas digitales.

Casos de uso en el mundo real

Desarrolladores Web Escribiendo CSS Cuando se construye un sitio web, los desarrolladores necesitan valores de color consistentes en docenas de reglas CSS. Elige un color principal de marca, copia su código HEX para botones y encabezados, luego obtén un tono más claro para estados de hover y un tono más oscuro para estados activos. Todos los valores son matemáticamente consistentes porque derivan del mismo color base.

Diseñadores de UI/UX Construyendo Bibliotecas de Componentes Los sistemas de diseño requieren paletas de color estructuradas cuidadosamente. Un diseñador podría definir un azul principal, luego generar cinco tonos y cinco sombras para crear una escala completa para fondos, bordes, texto y estados interactivos. El formato HSL hace esto especialmente fácil porque ajustar el valor de luminosidad crea pasos predecibles.

Diseñadores Gráficos Preparando Materiales de Impresión Un diseñador creando una tarjeta de presentación o folleto necesita valores CMYK que coincidan lo más posible con la vista previa en pantalla. Al convertir el color HEX de la marca a CMYK, el diseñador puede proporcionar al impresor porcentajes exactos de tinta y evitar sorpresas cuando llegue la prueba física.

Artistas Digitales e Ilustradores La armonía de color es esencial en el arte digital. Un artista podría seleccionar un color base, luego usar los tonos y sombras para construir profundidad, sombras y resaltados sin calcular manualmente versiones más claras o oscuras. Hacer clic en variaciones acelera el proceso creativo mientras mantiene la paleta coherente.

Equipos de Marketing Manteniendo la Consistencia de Marca Las guías de marca suelen especificar colores en un formato, pero diferentes plataformas requieren diferentes códigos. Un azul de marca definido en HEX para el sitio web necesita un equivalente RGB para una plantilla de PowerPoint y una versión CMYK para un folleto impreso. El convertidor asegura que cada miembro del equipo use exactamente el mismo color independientemente del medio.

Especialistas en Accesibilidad Verificando el Contraste Cuando se evalúa si el texto es legible contra un fondo, los especialistas necesitan valores de color precisos. El convertidor proporciona códigos HEX y RGB exactos que se pueden insertar en calculadoras de proporción de contraste para verificar el cumplimiento de WCAG.

Consejos y mejores prácticas

• Comience con HSL para construir paletas. Si está creando un esquema de color desde cero, use HSL. Mantenga el matiz constante y ajuste la saturación y la luminosidad para generar variaciones armoniosas. Esto produce paletas más visualmente consistentes que ajustar valores RGB directamente.
• Siempre convierta a CMYK antes de imprimir. Los colores RGB y HEX están diseñados para pantallas que emiten luz. Colores que parecen brillantes y saturados en pantalla — especialmente los azules y verdes — suelen cambiar cuando se imprimen. Convertir a CMYK temprano le ayuda a ver cómo se verá el color en tinta.
• Use tonos para fondos y sombras para texto. Los tonos claros son excelentes para fondos sutiles que no compiten con el contenido. Las sombras más oscuras funcionan bien para texto principal y bordes porque proporcionan suficiente contraste contra fondos blancos o claros.
• Copie el formato que su plataforma espera. CSS acepta directamente HEX, RGB y HSL. El canvas de JavaScript usa RGB. Las tiendas de impresión necesitan CMYK. El software de diseño como Figma y Sketch acepta HEX. Copie el formato correcto para evitar errores de conversión.
• Pruebe los colores en dispositivos reales. La calibración de pantallas varía entre monitores, teléfonos y tabletas. Un color que parece perfecto en su laptop podría aparecer diferente en un dispositivo móvil. Siempre previamente los diseños en múltiples pantallas antes de finalizar.
• Considere la discapacidad visual al elegir paletas. Aproximadamente el 8 por ciento de los hombres y el 0,5 por ciento de las mujeres tienen algún tipo de deficiencia de visión cromática. Use el convertidor para verificar que sus elecciones de color tengan suficientes diferencias de brillo, no solo de matiz, para permanecer distinguibles.
• Guarde sus colores base. Una vez que encuentre el color perfecto, guárdelo en su sistema de diseño o guía de estilo. Tener una única fuente de verdad evita el desvío a medida que un proyecto crece y más miembros del equipo contribuyen.

Preguntas frecuentes

¿El selector de color es gratuito de usar?

Sí. El selector y convertidor de color es completamente gratuito sin límites de uso, sin registro y sin anuncios. Puede seleccionar, convertir y copiar colores tantas veces como necesite.

¿Puedo convertir cualquier formato de color a cualquier otro formato?

Sí. La herramienta admite conversión bidireccional completa entre HEX, RGB, HSL y CMYK. Ingrese un valor en cualquier formato y los otros tres se actualizarán automáticamente en tiempo real.

¿Qué son los tonos y sombras?

Los tonos se crean añadiendo blanco a un color base, haciéndolo más claro. Las sombras se crean añadiendo negro, haciéndolo más oscuro. La herramienta genera un rango de tonos y sombras desde su color seleccionado, dándole una paleta monocrómica completa para el trabajo de diseño.

¿Por qué los colores RGB se ven diferentes cuando se imprimen?

RGB es un modelo de color aditivo diseñado para pantallas que emiten luz. CMYK es un modelo sustractivo diseñado para impresoras que absorben luz. Algunos colores RGB — especialmente los azules, verdes y púrpuras brillantes — caen fuera del rango que las tintas CMYK pueden reproducir. Convertir a CMYK le muestra la coincidencia más cercana posible para imprimir.

¿Esta herramienta funciona en dispositivos móviles?

Sí. El selector de color es completamente responsivo y funciona en smartphones y tablets. El selector de color nativo se abre en dispositivos móviles igual que en el escritorio, y los botones de copia están optimizados para pantallas táctiles.

¿Cuál formato de color debo usar para el desarrollo web?

HEX es la elección más común porque es compacto y universalmente compatible en CSS. RGB es útil cuando necesitas ajustar la opacidad con RGBA. HSL es cada vez más popular porque es más intuitivo para crear variaciones y animaciones. Los tres funcionan en navegadores modernos.

¿Cuál es la diferencia entre HSL y HSV?

Ambos HSL y HSV (también llamado HSB) describen colores usando matiz y saturación, pero definen el tercer componente de forma diferente. HSL usa luminosidad, donde 0 por ciento es negro, 50 por ciento es el color puro y 100 por ciento es blanco. HSV usa valor, donde 0 por ciento es negro y 100 por ciento es la versión más brillante del color. HSL es generalmente preferido en el diseño web porque la escala de luminosidad es más intuitiva para construir paletas accesibles.