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.
Screen EyeDropper
Sample display pixels.
CSS Gradient
Linear & radial gradients.
Visual Gradients
Conic & PNG exports.
Box Shadows
Multi-layer elevation.
Border Radius
8-point organic blobs.
CSS Previewer
Live stylesheet tester.
Screen Color Picker
Sample screen pixels with eyedropper.
Developer Suite
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.
Todoal
Build your Winter Arc 2026 with a simple 90 day routine for daily priorities habits focus planning and consistent progress without overcomplicating it
Looking for a Todoist alternative? Compare Todoal and other Todoist alternatives for daily tasks priorities simple planning and focused productivity
Learn how to create a daily task to do list online to organize priorities plan your day and stay focused without complicated productivity tools
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.