Use HEX for Compact Web Color Codes
Enter #RGB or #RRGGBB and apply it without losing the previous valid color when the field is incomplete. Copy six-digit HEX for an opaque base color or eight-digit HEX when an alpha channel is needed.
Free online design tool - no registration or login
Free Online Color Picker: HEX, RGB & HSL
Pick a color visually or enter a HEX value, then fine-tune RGB, HSL, and opacity. Preview the result, compare nearby tones, and copy the exact color code with no login.
- - HEX, RGB, HSL, HSV, and alpha
- - Optional browser screen eyedropper
- - Transparency and text previews
- - Temporary current-tab color set
Choose and edit a color
Starter color: #0F766E. Every valid control updates one 8-bit sRGB selection.
Accepts #RGB or #RRGGBB. Opacity is controlled separately.
Transparency preview
#0F766E
Opaque text preview
White text5.47:1
Black text3.84:1
Copy color values
HSV is a design reference; the other rows are CSS-ready values.
Related tones
Select a tint, shade, or complementary color.
Saved for this tab
Up to eight colors; reload clears the set.
No saved colors yet.
Color calculations and saved swatches stay in this browser tab and are not sent to an external color service. The optional screen EyeDropper starts only after your click and is not available in every browser or context.
How to Pick a Color Online
Move from one color selection to synchronized values, realistic previews, and a copyable result.
Common color tasks
- Choose a CSS accent or background color
- Convert a HEX code to RGB and HSL
- Compare a tint, shade, or complementary color
- Step 1
Choose or Enter a Color
Use the visual picker, apply a valid three- or six-digit HEX code, choose a quick swatch, or start the screen EyeDropper when your browser supports it.
- Step 2
Fine-Tune RGB, HSL, and Opacity
Adjust red, green, and blue channels or change hue, saturation, lightness, and opacity. Every valid control keeps the previews and output formats synchronized.
- Step 3
Preview, Save, and Copy the Value
Check transparency and light or dark text, try a related tone, save up to eight current-tab candidates, then copy the exact value your CSS or design tool needs.
Edit HEX, RGB, HSL, and Alpha Values
The controls express one 8-bit sRGB color in several useful forms. Choose the representation that matches the information you already have or the adjustment you need to make.
Adjust Red, Green, and Blue Channels
RGB exposes the three 0-255 sRGB channels directly. Use it when a specification or design application gives you numeric red, green, and blue values or when one channel needs a small correction.
Change Hue, Saturation, Lightness, and Alpha
Hue rotates around 0-360 degrees, saturation controls color intensity, lightness moves toward black or white, and alpha controls transparency. These controls remain bounded to valid ranges.
Preview a Color on Light and Dark Surfaces
A numeric code is easier to judge when it appears in realistic contexts. Use these previews as evidence for the next decision, not as a complete accessibility review.
Open the Color Contrast CheckerCheck the Color over Transparency
A checkerboard makes opacity visible instead of showing every alpha value against only white. Compare the transparent preview with the opaque base swatch before copying an alpha-aware format.
Compare White and Black Text
The workspace places white and black text over the opaque selected color and reports each contrast ratio. This helps identify a likely direction before you test the actual foreground and background pair.
Run a Full Contrast Check for a Color Pair
One selected background and two sample text colors cannot validate a full interface. Use the dedicated Color Contrast Checker to test the exact pair and review normal-text and large-text thresholds.
Browser Eyedropper, Privacy, and Color Limits
Browser APIs and digital color values have practical boundaries. The page keeps the fallback controls usable and explains what the selected numbers can and cannot represent.
Use the Screen Eyedropper When Supported
The EyeDropper is progressive enhancement with limited browser availability. It requires your button click, returns one selected screen color, can be cancelled with Escape, and may require a secure context.
Keep Selected Colors in the Current Tab
The picker converts values and holds saved swatches in current page state. It does not need an account or external color-processing request, and it does not promise permanent storage or offline availability.
Treat the Result as an sRGB Web Color
The tool uses 8-bit sRGB values for web and screen workflows. It does not read image profiles, generate wide-gamut values, or guarantee matches to printers, inks, paper, paint, or proprietary color systems.
Color Picker FAQ
Answers about formats, opacity, browser screen picking, privacy, accessibility previews, and sRGB limits.
Is this color picker free to use?
Yes. This color picker is free to use online without registration or login. The page does not place color selection, channel editing, saved current-tab swatches, or copy actions behind an account gate.
How do I use the online color picker?
Choose a color with the visual control, enter a valid three- or six-digit HEX value, or use Pick from screen in a supporting browser. Fine-tune RGB, HSL, or opacity, review the previews, then copy the format you need.
Which color formats can I copy?
You can copy opaque HEX, alpha-aware HEX, modern CSS RGB, modern CSS HSL, HSV reference values, and a CSS custom-property declaration. When opacity is below 100%, the alpha-aware rows include it explicitly.
What is the difference between HEX, RGB, and HSL?
HEX and RGB describe the same 8-bit sRGB red, green, and blue channels in different syntax. HSL represents that color by hue, saturation, and lightness, which can be more convenient when you want to rotate a hue or make a color more muted, lighter, or darker.
Can I add opacity or copy an alpha color?
Yes. Adjust opacity from 0% to 100%. The transparent preview updates over a checkerboard, and the alpha HEX, RGB, HSL, and CSS variable rows include the selected opacity. Opaque HEX remains available as the six-digit base color.
Can I pick a color from anywhere on my screen?
In a supporting browser and secure context, Pick from screen starts the browser EyeDropper after your click. Choose one screen pixel or press Escape to cancel. If the button is unavailable, use the normal visual picker or numeric fields instead.
Does this color picker upload or save my colors?
No color input is uploaded to an external color service. The selected color and saved swatches exist only in the current page state. Reloading or closing the tab clears the saved working set.
Can I pick a color from an uploaded image?
No. This route is a general color chooser and format converter; it does not load images or sample image pixels. In a supporting browser, the optional screen EyeDropper can sample a visible pixel after an explicit user action.
Do the displayed contrast ratios guarantee accessibility?
No. They compare the opaque base color with white and black as a quick preview only. Test the actual foreground and background pair in the dedicated Color Contrast Checker and review the rest of the interface, including text size, weight, states, and non-color cues.
Will the selected color match print, paint, or every display?
Not necessarily. This tool works with 8-bit sRGB web colors. Display calibration, image profiles, wide-gamut color spaces, printer profiles, inks, paper, paint, and proprietary color systems can produce different results even when a numeric value looks similar.
Related design tools
Check an exact color pair, build a gradient, apply a shadow, or prepare an SVG asset.
Ct Design
Check the Color Pair's Contrast
Test text and background colors against WCAG 2.2 AA and AAA. See the exact contrast ratio, preview the selected font size and weight, and identify whether the pair passes.
Open tool Ba Design
Build a CSS Gradient
Build linear, radial, or conic gradients with two to six color stops. Preview the result live, adjust the relevant direction or origin, and copy ready-to-use CSS without signing in.
Open tool AC Design
Apply Color to a CSS Shadow
Create layered CSS shadows with up to four editable layers. Adjust offsets, blur, spread, color, opacity, and inset mode, preview the result, and copy the CSS without login.
Open tool Pa Design
Prepare an SVG Asset
Upload or paste SVG markup, optimize it locally with SVGO, and compare the code, file size, and visual result before downloading. No login or server upload required.
Open toolReady to choose a web color?
Pick, fine-tune, preview, and copy the value your next design step needs.