Color Picker
Pick a color and copy HEX, RGB, and HSL values in this browser.
Recent colors
Color formats
#6366F1
rgb(99, 102, 241)
hsl(239, 84%, 67%)
cmyk(59%, 58%, 0%, 5%)
Color preview
#6366F1
rgb(99, 102, 241)
hsl(239, 84%, 67%)
Color shades
Why use a color picker?
A visual pad is faster than typing channels when you are exploring a brand token. Drag hue, then saturation and brightness, and copy HEX for CSS variables, RGB for canvas math, or HSL when you want to nudge lightness. Approximate CMYK is a paste hint for print conversations — it is not an ICC press profile. Shades 50–900 are mixes of the current sRGB color with white and black so a button hover can stay in the same family.
Popular color palettes
Ocean Breeze
Calm cyan and sky blues.
Sunset Glow
Warm orange, rose, and gold.
Forest Green
Leaf and moss greens.
Berry Punch
Magenta and violet accents.
Sand Dune
Warm neutrals for UI chrome.
Midnight
Indigo surfaces and ink.
Your data stays private
The selected color stays in this tab. Recent swatches, if you save them, stay in this browser only. Nothing is uploaded or stored on a server.
About picking HEX, RGB, and HSL
Color Picker is a local CSS helper: choose a color and copy HEX, RGB, HSL, and an approximate CMYK string. It does not fetch palettes from the web and it does not read your screen like a native eyedropper OS tool — it is a value generator in this tab. Designers use it to grab a token before pasting into a stylesheet.
HEX is sRGB hex. RGB is 0–255 channels. HSL is hue, saturation, lightness as CSS writes them. CMYK on this page is a naive conversion from sRGB for a quick paste, not a press-ready ICC profile. We do not convert to P3 or LAB here — use Color Converter if you already have a string in another syntax and need HEX/RGB/HSL together. Gradients, shadows, and borders are sibling generators that consume a color you copy.
Related: Image Color Picker, Gradient Generator, CSS Shadow Generator, CSS Border Generator, Color Converter, CSS Formatter.
The URL is /tools/color-picker. We do not save a palette account. Recent swatches stay in this browser until you clear them. Close the tab to forget the live token; localStorage recent colors remain until you wipe site data. Eyedropper of pixels on a photo is Image Color Picker at /tools/image-color-picker.
How to pick a color
Drag the pad
Move the square for saturation and brightness, and the bar for hue. Preset dots jump to a starting token.
Edit HEX, RGB, or HSL
Type a value if you already have one. All formats describe the same sRGB color.
Copy a format or a shade
Copy one syntax, copy all formats, or pick a 50–900 shade. Save color stores a recent swatch in this browser.
Stay on this device
Nothing is uploaded. Image Color Picker at /tools/image-color-picker samples a photo. Gradient Generator is next if you need two stops. Color Converter if you already have a string to parse.
Related tools
Image Color Picker
Open an image, hover to magnify pixels, and copy HEX, RGB, and HSL. Nothing is uploaded.
Gradient Generator
Build a CSS linear-gradient with two stops and a live preview. Copy the CSS locally.
CSS Shadow Generator
Tune box-shadow offset, blur, spread, and color, then copy the CSS.
CSS Border Generator
Preview border width, style, radius, and color, then copy the CSS.
Color Converter
Convert colors between HEX, RGB, and HSL. Type or paste below — all three formats update as you type.
CSS Formatter
Pretty-print or minify CSS in your browser. The result updates as you type.
Color Picker FAQ
Yes for sRGB in this picker. Copy the syntax your stylesheet needs. CMYK here is a naive sRGB conversion for a quick paste, not an ICC press profile. We do not convert to P3 or LAB — use Color Converter if you already have another string.
No. It is a value generator in the tab, not a system color sampler. Drag the saturation pad and hue bar, or type HEX. To sample a pixel from a photo, open Image Color Picker at /tools/image-color-picker. Gradient, shadow, and border tools consume a color you copy.
No. The selected value stays in this tab. Save color keeps recent swatches in this browser only until you clear them or site data.
Yes. Open Image Color Picker at /tools/image-color-picker, choose a JPEG, PNG, or WebP on this device, hover to magnify pixels, and click to lock HEX, RGB, and HSL. This Color Picker page is the saturation pad when you do not have a photo. Color Converter is the sibling when you already have a string in another syntax. Gradient, shadow, and border tools consume a color you copy. Close the tab to forget the live token. Nothing is stored on a server.