Color Picker
Pick any color visually and get its HEX, RGB, and HSL code instantly.
Why use it
The most complete color picker for designers and developers
All formats
HEX, RGB, and HSL simultaneously. Copy the format you need with one click.
Private
No servers, no logs. All colors are processed in your browser.
Automatic history
The last selected colors are saved locally to facilitate comparisons and reuse.
Instant
Real-time color preview as you adjust with sliders or keyboard.
How it works
Three steps, no hassle
Choose the color in the visual picker
Use the interactive color picker to select the hue on the color bar and adjust saturation and lightness in the color square. You can also directly type any HEX, RGB, or HSL value in the text fields.
Fine-tune with precision
Use the hue, saturation, and lightness sliders to refine the color precisely. The color history automatically saves the last colors you selected to make comparisons easier.
Copy in the format you need
Get the color code in HEX (#FF5733), RGB (rgb(255, 87, 51)), or HSL (hsl(11, 100%, 60%)) with one click. All formats are available simultaneously.
FAQ
Got questions?
Modern web color pickers typically work in the HSV (Hue, Saturation, Value) space: the selection square maps saturation on the X axis (left = no saturation, right = fully saturated) and value/brightness on the Y axis (top = maximum brightness, bottom = black). The side hue bar allows selecting the hue angle (0-360°). When you select a point in the square, the picker calculates the HSV values and converts them to HEX and RGB to display them. The native browser picker (<input type="color">) uses the operating system interface, which may vary between Windows (color wheel), macOS (default picker with named colors and eyedropper), and Linux.
A color history is a collection of the last selected colors, stored to facilitate reuse and comparison. Professional design tools like Figma and Adobe XD save color palettes at the file level (document colors) and user level (personal color library). In web pickers, history is typically stored in the browser's localStorage to persist between sessions. A color palette is a curated selection of related colors: brand colors, theme colors, or algorithmically generated palettes (for example, with oklch to ensure uniform contrast).
The most accurate way is to use the eyedropper in the browser DevTools. In Chrome: open DevTools (F12) → Elements tab → click any color value in the Styles panel → the color picker appears with an eyedropper to capture any pixel on the screen. In Firefox: DevTools → Styles → click the color square → eyedropper button. On macOS, the 'Digital Color Meter' app (included with the system) captures colors in any format. On Windows, Microsoft's PowerToys includes 'Color Picker' (Win+Shift+C) that captures colors in HEX, RGB, and HSL from any point on the screen.
Color accessibility is primarily evaluated by the contrast ratio, defined by the WCAG (Web Content Accessibility Guidelines). WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). The contrast ratio is calculated by comparing the relative luminance of two colors using the formula L1+0.05/L2+0.05. Tools like Convertir.ai's color-contrast-checker calculate this ratio automatically. For accessible design, an effective strategy is to use oklch: colors with the same L value in oklch have perceptually equivalent luminance, making it easy to create palettes with predictable contrast.
CSS defines 140 colors with standard names, inherited from the MIT X11 colors (1987). The basic colors defined in CSS1 (1996) are 16: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. CSS Color Level 3 (2011) standardized the 140 X11 names, including historical curiosities like 'rebeccapurple' (added in 2014 in honor of Rebecca Meyer). CSS Color Level 4 adds no new names but introduces transparent as a color value with rgba(0,0,0,0). Beyond names, CSS4 introduces currentColor (the element's color property value) and OS system colors like Canvas, ButtonText, etc.
History of the color picker: from Photoshop 1.0 to DevTools
The digital color picker originated in the earliest image editing tools. Adobe Photoshop 1.0 (1990, Mac-exclusive) already included a color selector with an HSB palette and numerical RGB values. The double color square interface (foreground/background color) that Photoshop popularized became the visual reference for digital design for decades. The Windows system color picker appeared in Windows 3.1 (1992) with its design of 48 basic colors plus a customizable palette, a design that remained virtually unchanged through Windows 7. macOS introduced its ColorSync Utility in Mac OS X 10.0 (2001), which included for the first time a picker with ICC color profiles and support for color spaces outside sRGB.
Design tokens have transformed how modern teams work with colors. The concept was popularized by Salesforce in 2014 when it published its Theo system for managing Lightning Design System design tokens. A color design token is a variable with a semantic name (--color-brand-primary, --color-feedback-error) rather than a raw value (#FF0000). Tools like Style Dictionary (Amazon), Theo (Salesforce), and the W3C Design Tokens specification (in development since 2019) standardize how these tokens are defined, transformed, and distributed across platforms (web, iOS, Android, Figma). The goal is a single source of color truth that automatically syncs between design and code.
The eyedropper in web browsers was a highly demanded feature by designers and developers for years. Chrome DevTools introduced the eyedropper in its integrated color picker in 2013 (version 28). Firefox added the eyedropper to DevTools in version 31 (2014) and also created the Color Picker extension that captures colors from any tab. In 2021, the EyeDropper API was proposed as a standard web API (WICG), implemented in Chrome 95 and Edge 95 (October 2021), allowing any web application to launch a native system eyedropper with a single line of JavaScript: const result = await new EyeDropper().open(). Firefox and Safari have not yet implemented the EyeDropper API (as of 2024), limiting its use to Chromium-based browsers.