Free Color Picker

Online color picker: the complete guide

The Volade color picker is an all-in-one web tool combining a screen eyedropper, an advanced color editor, a palette generator, a gradient creator, a WCAG accessibility checker, a color blindness simulator, a mixer and a developer export — all in a single interface, 100% local, no sign-up.

Unlike classic editors limited to HEX/RGB/HSL, Volade supports 16 color spaces including LAB, LCH, OKLCH, OKLAB, CMYK, Display P3, XYZ and HWB. Each format is displayed in real time with an instant copy button, making it the most complete tool for designers, developers and printers.

The screen eyedropper: pixel-perfect precision

The screen eyedropper uses the EyeDropper API of modern browsers to capture any color visible on your screen. Click anywhere — on an image, a website, a document — and the color is instantly captured. The high-resolution magnifier lets you aim at the right pixel, and keyboard navigation (arrow keys) offers absolute precision. Area sampling (1×1, 3×3, 5×5, 11×11) smooths JPEG compression artifacts to obtain an area's average color.

The selected color appears in the recent colors history, and switching to the previous color is instant. For advanced users, precision mode displays the exact pixel coordinates and per-channel values in real time.

A color editor without compromise

The editor displays 16 color formats simultaneously: HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV/HSB, HWB, CMYK, LAB, LCH, OKLAB, OKLCH, Display P3, XYZ and Linear RGB. Each value is directly editable: change HSL, and all other formats update in real time. The color wheel offers intuitive visual control, while numeric sliders enable precise adjustment.

Alpha/transparency is handled natively: adjust opacity from 0 to 100% with the dedicated slider, and immediately see the impact on all formats. The modification history records every change, with undo/redo to go back at any time.

Smart Color Intelligence: beyond simple choice

From a single color, the tool automatically generates all classic harmonies: complementary, analogous, triadic, tetradic, split complementary and monochromatic. But it goes further: shades (darker), tints (lighter), tones (desaturated), warm and cool variants are produced automatically.

The Generate Palette mode turns any color into a complete design system: primary, secondary, accent, background, surface, text, muted, border, success, warning, error, info — each with its RGB, OKLCH and HEX values.

Image → Palette: extract colors from a photo

Drop any image (photo, illustration, screenshot) and the tool analyzes the pixels to extract its palette. Five extraction modes are available: Dominant (most frequent colors), Vibrant (most saturated), Muted (desaturated), Balanced (visually harmonious) and Brand (colors suited to a brand identity).

Extraction returns between 5 and 15 colors, each labeled with its potential role (dominant, accent, dark, light). It is a major accelerator for designers who need to extract a design system from an existing photo.

WCAG accessibility check

The accessibility section compares two colors (foreground vs background) and displays the exact contrast ratio with WCAG AA and AAA badges for normal text, large text and UI components. If the ratio is insufficient, the Auto Fix button automatically proposes the closest color that meets the standards.

It is an essential tool for developers who must comply with mandatory accessibility standards (RGAA, EN 301 549, ADA, Section 508).

Color blindness simulator: design for everyone

About 350 million people worldwide are color blind. The simulator shows your colors as perceived by all eight types of color blindness: protanopia, deuteranopia, tritanopia, achromatopsia and their moderate variants. It is the only way to verify your interface is truly accessible.

Gradient generator with advanced interpolation

Create linear, radial and conic gradients with up to 10 color stops. RGB interpolation produces classic gradients; HSL offers smoother transitions; LAB and OKLCH create perceptually uniform gradients without visible banding. The CSS code is generated automatically and copyable in one click.

Color Mixer: mixing colors

Mix two colors with a configurable ratio (from 0/100 to 100/0) in four modes: RGB (additive mixing), HSL (hue rotation), LAB (perceptual space) and OKLCH (the most natural). It is the ideal tool for creating intermediate colors, shadows and custom shades.

ΔE Color Difference: professional precision

For designers and print professionals, color difference calculation (Delta E) is essential. The tool displays ΔE76, ΔE94 and ΔE2000 with a textual interpretation: imperceptible (ΔE < 1), perceptible with effort (1-2), different (2-10), very different (10-50) and high contrast (50+).

Color Playground: test in real conditions

The playground displays your color on real interface components: buttons, cards, badges, inputs, alerts, links and text. You immediately see whether your color works as a background, button or text color — with real-time accessibility scores.

Developer export: 10 code formats

Generate code in your language: CSS Variables, SCSS, Tailwind config, JSON design tokens, TypeScript, Swift (UIColor), Kotlin (Color), Flutter/Dart, React Native (StyleSheet) and Vue. Each export includes variants (50-950) and roles (primary, secondary, accent, etc.).

Who can benefit?

UI/UX designers creating palettes and design systems; front-end developers integrating colors into CSS, Tailwind or SCSS; graphic designers extracting charts from photos; accessibility teams checking WCAG contrast; print professionals calculating ΔE; and any creator who wants to explore colors professionally.