Selector de color gratis

Selector de color en línea: la guía completa

El selector de color Volade es una herramienta web todo en uno que combina un cuentagotas de pantalla, un editor de color avanzado, un generador de paletas, un creador de degradados, un comprobador de accesibilidad WCAG, un simulador de daltonismo, un mezclador y una exportación para desarrolladores — todo en una única interfaz, 100 % local y sin registro.

A diferencia de los editores clásicos que se limitan a HEX/RGB/HSL, Volade admite 16 espacios cromáticos, incluidos LAB, LCH, OKLCH, OKLAB, CMYK, Display P3, XYZ y HWB. Cada formato se muestra en tiempo real con un botón de copia instantánea, lo que lo convierte en la herramienta más completa para diseñadores, desarrolladores e impresores.

El cuentagotas de pantalla: precisión pixel-perfect

El cuentagotas de pantalla usa la API EyeDropper de los navegadores modernos para capturar cualquier color visible en tu pantalla. Haz clic en cualquier lugar — una imagen, un sitio web, un documento — y el color se captura al instante. La lupa de alta resolución te permite apuntar al píxel correcto, y el desplazamiento por teclado (flechas) ofrece una precisión absoluta. El muestreo de zona (1×1, 3×3, 5×5, 11×11) suaviza los artefactos de compresión JPEG y obtiene el color medio de una zona.

El color seleccionado aparece en el historial de colores recientes, y el cambio al color anterior es instantáneo. Para usuarios avanzados, el modo precisión muestra las coordenadas exactas del píxel y los valores de cada canal en tiempo real.

Un editor de color sin compromisos

El editor muestra simultáneamente 16 formatos de color: HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV/HSB, HWB, CMYK, LAB, LCH, OKLAB, OKLCH, Display P3, XYZ y Linear RGB. Cada valor es editable directamente: cambia el HSL y todos los demás formatos se actualizan en tiempo real. La rueda cromática ofrece un control visual intuitivo, mientras que los sliders numéricos permiten un ajuste preciso.

El alfa/transparencia se gestiona de forma nativa: ajusta la opacidad de 0 a 100 % con el slider dedicado y ve inmediatamente el impacto en todos los formatos. El historial de modificaciones registra cada cambio, con undo/redo para volver atrás en cualquier momento.

Smart Color Intelligence: más allá de la simple elección

A partir de un solo color, la herramienta genera automáticamente todas las armonías clásicas: complementarios, análogos, triádicos, tetrádicos, complementarios divididos y monocromáticos. Pero va más lejos: las variantes sombras (más oscuras), claros (más claros), matices (desaturados), cálidos y fríos se producen automáticamente.

El modo Generate Palette transforma cualquier color en un sistema de diseño completo: primary, secondary, accent, background, surface, text, muted, border, success, warning, error, info — cada uno con sus valores RGB, OKLCH y HEX.

Imagen → Paleta: extraer colores de una foto

Suelta cualquier imagen (foto, ilustración, captura de pantalla) y la herramienta analiza los píxeles para extraer su paleta. Hay cinco modos de extracción: Dominante (colores más frecuentes), Vibrante (los más saturados), Apagado (desaturados), Equilibrado (visualmente armoniosos) y Marca (colores adaptados a una identidad de marca).

La extracción devuelve entre 5 y 15 colores, cada uno etiquetado con su posible función (dominante, acento, oscuro, claro). Es un gran acelerador para los diseñadores que deben extraer una identidad de marca de una foto existente.

Comprobación de accesibilidad WCAG

La sección de accesibilidad compara dos colores (primer plano frente a fondo) y muestra el índice de contraste exacto con las insignias WCAG AA y AAA para texto normal, texto grande y componentes UI. Si el índice es insuficiente, el botón Auto Fix propone automáticamente el color más cercano que cumple los estándares.

Es una herramienta indispensable para los desarrolladores que deben cumplir los estándares de accesibilidad obligatorios (RGAA, EN 301 549, ADA, Section 508).

Simulador de daltonismo: diseñar para todos

Alrededor de 350 millones de personas en el mundo son daltónicas. El simulador muestra tus colores tal como los perciben los ocho tipos de daltonismo: protanopía, deuteranopía, tritanopía, acromatopsia y sus variantes moderadas. Es la única forma de comprobar que tu interfaz es realmente accesible.

Generador de degradados con interpolación avanzada

Crea degradados lineales, radiales y cónicos con hasta 10 puntos de color. La interpolación RGB produce degradados clásicos; HSL ofrece transiciones más suaves; LAB y OKLCH crean degradados perceptivamente uniformes sin bandas ni cortes visibles. El código CSS se genera automáticamente y se copia con un clic.

Color Mixer: la mezcla de colores

Mezcla dos colores con una proporción configurable (de 0/100 a 100/0) en cuatro modos: RGB (mezcla aditiva), HSL (rotación de matiz), LAB (espacio perceptivo) y OKLCH (el más natural). Es la herramienta ideal para crear colores intermedios, sombras y matices personalizados.

ΔE Color Difference: la precisión de los profesionales

Para diseñadores y profesionales de la impresión, el cálculo de la diferencia cromática (Delta E) es esencial. La herramienta muestra ΔE76, ΔE94 y ΔE2000 con una interpretación textual: imperceptible (ΔE < 1), perceptible con esfuerzo (1-2), diferente (2-10), muy diferente (10-50) y contraste (50+).

Color Playground: prueba en condiciones reales

El playground muestra tu color en componentes de interfaz reales: botones, tarjetas, insignias, campos, alertas, enlaces y texto. Ves inmediatamente si tu color funciona como color de fondo, de botón o de texto — con las puntuaciones de accesibilidad en tiempo real.

Exportación para desarrolladores: 10 formatos de código

Genera el código en tu lenguaje: CSS Variables, SCSS, Tailwind config, JSON design tokens, TypeScript, Swift (UIColor), Kotlin (Color), Flutter/Dart, React Native (StyleSheet) y Vue. Cada exportación incluye las variantes (50-950) y las funciones (primary, secondary, accent, etc.).

¿Quién puede beneficiarse?

Los diseñadores UI/UX que crean paletas y sistemas de diseño; los desarrolladores front-end que integran colores en CSS, Tailwind o SCSS; los diseñadores gráficos que extraen identidades de marca a partir de fotos; los equipos de accesibilidad que comprueban el contraste WCAG; los profesionales de la impresión que calculan los ΔE; y cualquier creador que quiera explorar los colores de forma profesional.