Color Picker lets you select, convert, and copy colors in 4 formats: HEX, RGB, HSL, OKLCH. Includes palette saving.
How to use Color Picker?
Select your desired color from the color picker.
Copy the HEX, RGB, or HSL values.
Add colors to the palette for reference.
Frequently asked questions about Color Picker
Can I enter a color code directly?
Yes, you can type a HEX code directly to select an exact color.
What is the difference between HEX, RGB and HSL, and when do I use each?
All three write the same color in different notation. HEX like #FF5733 is short and travels well between design files and CSS; RGB exposes the red, green and blue channels directly, which suits color math in code. HSL splits a color into hue, saturation and lightness, so it is the easiest one for making a variant that is simply darker or less saturated.
Why does the color I picked on screen look different when printed?
Screens build color by adding light (RGB) while printing subtracts it by layering ink (CMYK), and the two cover different ranges. Near-fluorescent greens, oranges and cyans simply have no ink equivalent, so they come out visibly duller. If the artwork is destined for print, avoid extremely saturated colors and hand the printer CMYK values or a Pantone number instead of a HEX code.
Can I eyedrop a color from anywhere on my screen?
In Chromium-based desktop browsers such as Chrome and Edge, the built-in EyeDropper lets you sample color from any window, not just the page. Safari, Firefox and mobile browsers do not implement it yet, so the eyedropper button will not appear there. In that case take a screenshot, load it as an image and pull the color from the picture instead.
How to get the most out of Color Picker?
Enter HEX codes directly to quickly find exact colors matching your brand guidelines.
HSL mode makes it easy to find analogous or complementary colors by adjusting the Hue value.
Save colors to the palette to maintain consistency across your entire project.