Color Picker
HEX
#2563ebRGB
rgb(37, 99, 235)HSL
hsl(221.2, 83.2%, 53.3%)Recent colors stay in this browser only. Invalid HEX is not applied until it is valid.
Recent colors
Pick a color to start a local history.
Online color picker for HEX, RGB, and HSL
Use this color picker when you need a brand swatch, a CSS token, or a quick HEX value from a visual control. Hue, saturation, and lightness sliders sit next to HEX and RGB fields so you can match a screenshot or nudge a palette without opening a design app.
Everything runs locally after the page loads. Toolshelf does not upload the color you pick. Recent colors are optional and stored only in this browser.
How to copy a color code
- Pick a color with the visual control or paste HEX such as #fff.
- Adjust hue, saturation, or lightness if you need a nearby shade.
- Copy HEX for CSS, RGB for canvas code, or HSL for design tokens.
Frequently asked questions
- What is an online color picker?
- A color picker lets you choose a color visually and read its HEX, RGB, and HSL values. This Toolshelf picker runs in the browser so the color you choose is not uploaded.
- Can I paste short HEX codes like #fff?
- Yes. 3-digit HEX such as #fff expands to #ffffff. 6-digit codes work as usual. Invalid text stays in the field until it is a valid HEX value — the preview does not jump to a guessed color.
- Do HEX, RGB, and HSL stay in sync?
- Yes. The tool keeps one canonical RGB color and derives HEX and HSL from it, so editing a slider or a channel updates every representation from the same source.
- Where are recent colors stored?
- Recent swatches are saved in localStorage on this device only. Clearing history removes them from the browser. Toolshelf does not receive that list.
- Is this color picker free to use?
- Yes. There is no signup. You can copy HEX, RGB, or HSL as often as you need.
Related tools
Continue with related browser-based tools on Toolshelf.
- Color Converter — HEX to RGB converter online.
- Color Palette Generator — Color palette generator from a base HEX.
- WCAG Contrast Checker — WCAG contrast checker for text and UI colors.
- Random Color Generator — Random color generator for HEX, RGB, and HSL.
- CSS Gradient Generator — CSS gradient generator for linear, radial, and conic backgrounds.
- QR Code Generator — Create QR codes for URLs, text, Wi-Fi, contacts, email, phone numbers and more.
- Image to Base64 Converter — Image to Base64 converter.
- Color Shades & Tints Generator — Color shades and tints generator.
Use cases
- For Designers — Pick colors, check contrast, and build palettes and gradients.
What would you like to do next?
Continue working with the next step in this workflow. Recently used tools in this set are listed first.
- Color Converter — HEX to RGB converter online.
- Color Palette Generator — Color palette generator from a base HEX.
- WCAG Contrast Checker — WCAG contrast checker for text and UI colors.
- Random Color Generator — Random color generator for HEX, RGB, and HSL.
You may also need
Continue with related browser-based tools on Toolshelf.
- Color Converter — HEX to RGB converter online.
- Color Palette Generator — Color palette generator from a base HEX.
- WCAG Contrast Checker — WCAG contrast checker for text and UI colors.
- Random Color Generator — Random color generator for HEX, RGB, and HSL.
- CSS Gradient Generator — CSS gradient generator for linear, radial, and conic backgrounds.
- QR Code Generator — Create QR codes for URLs, text, Wi-Fi, contacts, email, phone numbers and more.
- Image to Base64 Converter — Image to Base64 converter.
- Color Shades & Tints Generator — Color shades and tints generator.