Color Picker
Pick any color using HSL sliders and preview it fullscreen on your display.
Testing guide
How to use the fullscreen color picker
This picker uses HSL sliders, which map to how people actually think about color: pick the hue first, then how vivid it is, then how light or dark. It shows the matching hex value and can fill your whole screen with the result.
Best for
- Finding a specific color by eye and copying the hex value for design work.
- Filling a screen with an exact color as a backdrop or improvised light source.
- Comparing how the same hex value renders across two different monitors.
How to run the test
- 1Set the Hue slider first to land on the broad color family you want.
- 2Adjust Saturation to control how vivid or muted the color appears.
- 3Adjust Lightness last, since it changes perceived hue less than the other two.
- 4Copy the hex value shown, or go fullscreen to fill the whole display with it.
How to read the result
Saturation at 0 produces gray regardless of hue, which is useful for checking neutral tones.
Lightness at 0 or 100 produces black or white, since those endpoints discard hue and saturation entirely.
The same hex value can look noticeably different between two monitors, which reveals gamut and white point differences.
Related tools and guides
Frequently asked questions
What is the difference between HSL and RGB?
RGB describes how much red, green and blue light to mix, which matches how the hardware works. HSL describes hue, saturation and lightness, which matches how people describe color. HSL is usually easier to adjust by hand; RGB is what the display actually receives.
How do I pick a color fullscreen?
Set the sliders to the color you want, then use the fullscreen control. The entire display fills with that single color, which is useful as a backdrop, a soft light source, or a uniform field for spotting screen defects.
Why does the same hex code look different on my two screens?
A hex value is only an instruction, not an absolute color. How it renders depends on the panel gamut, white point, brightness and calibration. A wide-gamut screen will typically show the same value as more saturated than an sRGB screen.
Can I use this to match a color from an image?
Not directly, since this picker does not sample from images. Use your operating system eyedropper or an image editor to read the hex value, then enter that here if you want to preview it fullscreen.
What does saturation actually change?
Saturation controls how much of the pure hue is present versus gray. At 100 percent you get the most vivid version your display can produce; at 0 percent the hue disappears entirely and you are left with a neutral gray at the chosen lightness.
Testing guide
How to use the fullscreen color picker
This picker uses HSL sliders, which map to how people actually think about color: pick the hue first, then how vivid it is, then how light or dark. It shows the matching hex value and can fill your whole screen with the result.
Best for
- Finding a specific color by eye and copying the hex value for design work.
- Filling a screen with an exact color as a backdrop or improvised light source.
- Comparing how the same hex value renders across two different monitors.
How to run the test
- 1Set the Hue slider first to land on the broad color family you want.
- 2Adjust Saturation to control how vivid or muted the color appears.
- 3Adjust Lightness last, since it changes perceived hue less than the other two.
- 4Copy the hex value shown, or go fullscreen to fill the whole display with it.
How to read the result
Saturation at 0 produces gray regardless of hue, which is useful for checking neutral tones.
Lightness at 0 or 100 produces black or white, since those endpoints discard hue and saturation entirely.
The same hex value can look noticeably different between two monitors, which reveals gamut and white point differences.
Related tools and guides
Frequently asked questions
What is the difference between HSL and RGB?
RGB describes how much red, green and blue light to mix, which matches how the hardware works. HSL describes hue, saturation and lightness, which matches how people describe color. HSL is usually easier to adjust by hand; RGB is what the display actually receives.
How do I pick a color fullscreen?
Set the sliders to the color you want, then use the fullscreen control. The entire display fills with that single color, which is useful as a backdrop, a soft light source, or a uniform field for spotting screen defects.
Why does the same hex code look different on my two screens?
A hex value is only an instruction, not an absolute color. How it renders depends on the panel gamut, white point, brightness and calibration. A wide-gamut screen will typically show the same value as more saturated than an sRGB screen.
Can I use this to match a color from an image?
Not directly, since this picker does not sample from images. Use your operating system eyedropper or an image editor to read the hex value, then enter that here if you want to preview it fullscreen.
What does saturation actually change?
Saturation controls how much of the pure hue is present versus gray. At 100 percent you get the most vivid version your display can produce; at 0 percent the hue disappears entirely and you are left with a neutral gray at the chosen lightness.