Use this free online color picker to select colors visually and instantly calculate HEX, RGB, RGBA, HSL, HSLA, and HSB color values. 100% private, instant in-browser conversion, with screen eyedropper and palette history.
Sample display pixels.
Linear & radial gradients.
Conic & PNG exports.
Multi-layer elevation.
8-point organic blobs.
Live stylesheet tester.
Sample screen pixels with eyedropper.
Client-side dev suite.
Master HEX, RGB, HSL, and HSB color spaces for web design, UI styling, digital art, CSS development, and accessibility compliance.
An online color picker is an interactive digital application that enables designers, web developers, and digital creators to explore, formulate, and extract exact color codes. By providing real-time manipulation of hue, saturation, lightness, and alpha channels, color pickers eliminate visual guesswork and convert colors across international standard formats.
Whether you are establishing a CSS design system, calibrating brand palettes, or styling UI elements, this tool generates exact mathematical representations for web, mobile, and print mediums with zero server latency.
Drag the horizontal spectrum slider (0° to 360°) to choose the base color wavelength across the visible spectrum.
Click or drag inside the large 2D visual canvas to balance horizontal saturation and vertical brightness.
Slide the Alpha bar to dial in opacity from 0% (transparent) to 100% (solid), visible over the checkerboard preview.
Click the 'Copy' button beside HEX, RGB, RGBA, HSL, HSLA, or HSB to place the formatted string on your clipboard.
Hexadecimal color values (HEX) are 6-character strings prefixed with a hash symbol (`#`). They represent Red, Green, and Blue light values in base-16 arithmetic, where digits range from `00` (zero intensity) to `FF` (full intensity, equivalent to 255 in decimal):
CSS also supports 3-digit shorthand when channel digits match (e.g., `#FFF` expands to `#FFFFFF`) and 8-digit HEX with embedded alpha channels (`#RRGGBBAA`).
The RGB color model is an additive light model used across electronic monitors, mobile phones, and television screens. By combining red, green, and blue light channels in varying intensities between 0 and 255, over 16.7 million distinct 24-bit TrueColor hues can be produced:
Unlike RGB and HEX which represent hardware light emissions, HSL and HSB/HSV describe color in terms of human psychological perception:
Lightness runs from 0% (pure black) through 50% (pure saturated hue) to 100% (pure white). HSL is native in CSS3/CSS4 stylesheets.
Brightness/Value defines color purity where 100% brightness represents full vibrancy, and 0% represents black. HSB is standard in Photoshop, Illustrator, and Figma.
| Format | Example Syntax | Alpha Support | Primary Use Case |
|---|---|---|---|
| HEX | #6818CD | Yes (#RRGGBBAA) | Web design, CSS styles, brand palettes |
| RGB | rgb(104, 24, 205) | No | Digital monitors, Canvas rendering, graphics |
| RGBA | rgba(104, 24, 205, 0.9) | Yes (0.0 to 1.0) | CSS overlays, drop shadows, UI translucency |
| HSL | hsl(266, 79%, 45%) | No | Dynamic CSS theming, color harmonies |
| HSLA | hsla(266, 79%, 45%, 1) | Yes (0.0 to 1.0) | Dynamic CSS with variable opacity |
| HSB / HSV | hsb(266, 88%, 80%) | Optional | Figma, Sketch, Adobe creative software |
Modern Chromium browsers (Google Chrome, Microsoft Edge, Opera, Arc) provide native access to the EyeDropper API. When you click the Pick From Screen button, your cursor transforms into a magnifying loupe with pixel-level precision.
You can sample colors from images, browser tabs, or other active desktop windows. Once selected, all HEX, RGB, RGBA, HSL, and HSB values update instantaneously.
Actionable frameworks, neuroscience-backed habit protocols, and focus strategies.
TodoalLearn how to organize your day with a simple system to manage tasks priorities goals and routines while improving productivity
TodoalLooking for Notion alternatives in 2026? Compare the best Notion competitors including Todoal Obsidian ClickUp Evernote and Craft
TodoalLooking for Todoist alternatives in 2026? Compare the best apps like Todoist including Notion TickTick Microsoft To Do and Todoal
Answers to common questions about color picking, conversions, formats, and client-side privacy.
?color=%23HEXCODE to the page URL. When loaded, the tool will automatically initialize the canvas and sliders to that color.#RRGGBBAA. For example, #6818CD80 represents #6818CD at approximately 50% opacity (128 / 255).Pair pixel-perfect color selection with seamless daily planning. Manage UI sprints, time-block design workflows, and track development milestones without friction.