Color Picker
Color Picker — runs in your browser. Inputs are not stored.
Color picker
Pick a color with the native picker to see HEX, RGB, and HSL together. For RGB↔HEX only, use the RGB–HEX converter.
How to use
- Press Pick color and choose in the OS native color picker. The default is #1a5cff.
- The swatch below and the HEX, RGB, and HSL fields update together.
- Editing HEX also updates RGB and HSL. 3-digit short HEX is expanded to 6 digits.
- Copy HEX puts the current HEX on the clipboard.
- Reset restores the default blue. RGB and HSL fields are read-only.
Key concepts
The color picker shows a visually chosen color as HEX, RGB, and HSL at once. HEX is most common in CSS; RGB is 0–255 comma-separated; HSL is hue angle, saturation, and lightness. An internal update lock keeps the picker and HEX input from overwriting each other. Native picker UI looks different per OS. The swatch box uses the current HEX as background so you can see contrast immediately. The HEX field is at most 7 characters.
This screen focuses on picking and checking HSL. To change RGB numbers quickly, use RGB HEX conversion; to sample a pixel from a photo, use image color extract. Color values are not saved on a server. There are no fields to edit RGB or HSL by hand; the numbers are display-only. Leaving the page drops the chosen color, so copy HEX if you need it.
Example
Default #1a5cff is RGB 26, 92, 255 and HSL about 224°, 100%, 55%. Paste a brand-guide HEX into the field and the picker and swatch follow. After picking a button or link color, copy HEX into a stylesheet. #fff expands to #ffffff with RGB 255, 255, 255. For a dark-background button, check on the swatch that HSL lightness is not too low.
Related: RGB HEX converter · image color extract
Frequently asked questions
Do HEX, RGB, and HSL all appear in the color picker?
Yes. Changing the picker or HEX updates all three fields. RGB and HSL are display-only and not directly editable. Having three notations in one place is handy for design-token docs. HSL is useful when judging saturation tweaks.
Can I type a HEX code directly?
Yes. Up to 7 characters including #. 3-digit codes like #abc expand to #aabbcc. Invalid characters are ignored. A wrong-length string can fail to parse and keep the previous color. Only 6-digit hex is reliable.
How does the RGB HEX converter differ from the color picker?
The converter switches RGB/HEX fields; this page has a native picker plus HSL and a swatch. Use the converter for numbers only; use this tool to pick by eye. The converter has no picker. Use this page if you need the swatch and HSL.
Where is the Copy HEX button?
Copy HEX at the bottom. Supported browsers put #rrggbb on the clipboard. If clipboard permission is blocked, copy can fail silently. Then drag the HEX field yourself.
Can I edit HSL values directly?
The HSL field is read-only. To hit hue, saturation, and lightness as numbers, use the picker or change HEX. Moving the picker wheel updates HSL hue angle. There is no numeric saturation/lightness input.
Is the chosen color saved on a server?
It is not saved or sent. Refreshing returns to the default color. Refreshing returns to #1a5cff. To collect several colors, write down copied HEX separately.
Last reviewed: 2026-09-04