Picking a color from scratch is harder than it looks: the color you imagine rarely matches the first swatch you click. An online color picker gives you precise control over hue, saturation, and format. This guide shows you how to use one properly.
How color pickers work
Most pickers show a two-dimensional field and a hue slider. The slider picks the base color family, such as red or blue, and the field picks the exact shade by adjusting saturation and brightness. Clicking near the top right gives vivid colors; moving down darkens them; moving left washes them out toward gray.
Color formats explained
- HEX: a six-digit code like #3A7BFF, used in web design and CSS.
- RGB: three numbers for red, green, and blue, each from 0 to 255.
- HSL: hue as an angle, plus saturation and lightness as percentages. Easiest for adjusting a color systematically.
- CMYK: four values for print: cyan, magenta, yellow, and black.
These are the same color written four ways. Convert freely between them, but remember screens use RGB and printers use CMYK, so a screen color and its print version will never match exactly.
Step-by-step: pick a color
- Decide the mood first: warm or cool, bright or muted, light or dark.
- Set the hue slider to the right family.
- Click in the field to find a shade close to what you want.
- Fine-tune with HSL: adjust lightness for darker or lighter versions without changing the hue.
- Copy the HEX code for web use, or the RGB values for design tools.
- Test the color at real size, on the real background, since small swatches mislead.
Picking from scratch versus from a photo
Many guides focus on sampling colors from an image, which is useful for matching a photo but useless when you have no image. Picking from scratch starts with hue and mood instead. Both skills matter: sample from photos when matching, pick from the wheel when inventing.
Try it the faster way
Pick colors precisely with the tool below.
Prefer the full page? Open the online color picker directly.
Quick tips
- Adjust lightness in HSL to make shades and tints of one color.
- Test colors at real size and on the real background.
- Save the HEX code; it is the portable version of your color.
A color picker is a precision instrument, not a guessing game. Set the hue, tune with HSL, copy the HEX code, and test in context.
Frequently asked questions
Why does my color look different on another screen? Because screens vary in calibration, brightness, and color range. A color picked on a bright laptop may look darker on a phone. Test important colors on more than one device, and accept small variation as unavoidable.
What is the difference between HEX and RGB? Nothing in the color itself: they are two notations for the same value. HEX is compact and standard in CSS, while RGB lists the three channels as numbers. Convert freely; the color stays identical.
How do I make a darker or lighter version of a color? Adjust lightness in HSL, keeping hue and saturation fixed. That produces clean shades and tints. Changing RGB channels by hand often shifts the hue accidentally, giving a muddy result.
Worked example
Pick a brand blue. Set the hue slider near 220 degrees for blue, then click the field toward the vivid corner for a strong shade, landing near #2B6FE3. Need a darker version for hover states? Keep the hue at 220 and lower the lightness in HSL from 53 percent to 40 percent, giving a deeper blue without shifting toward purple or teal. Need a lighter background tint? Raise lightness to 90 percent for a pale blue wash. One hue, three lightness values, one coherent family.