Step by step
- Choose a color in the picker, or drop a mockup or logo image and click the spot you want.
- In Chrome or Edge on a computer, use Pick from screen to grab a color from any browser tab or app.
- Click Copy next to the HEX, RGB, or HSL value.
- Paste the copied value into your CSS rule, such as color or background-color.
At a glance
| CSS property | Example value | When to use |
|---|---|---|
| color | #0E8FA8 | Text and icon colors |
| background-color | rgb(14, 143, 168) | Buttons, banners, and sections |
| border-color | hsl(190, 85%, 36%) | Cards, inputs, and dividers |
Related questions
Which color format is best for HTML and CSS?
HEX is the shortest and most common format for CSS. HSL is helpful when you want to keep the same hue and only change lightness for hover states.
Can I extract a website's brand colors from a screenshot?
Drop the screenshot onto the tool and click any element to copy its code. The main colors of the image also appear below it.
Do I need to add anything before pasting a HEX code into CSS?
The copied HEX code already includes the # symbol, so you can paste it directly after the colon in your CSS property.
More questions: color picker
- How to Pick a Color From an Image
- How to Pick a Color From Your Screen
- What Is a Color Picker?
- How to Get HEX, RGB, and HSL Color Codes
- How to Use a Color Picker on Windows
- How to Use a Color Picker on Mac
- How to Use a Color Picker for Canva
- How to Color Pick in Photoshop
- How to Get a Color Palette from an Image
- How to Use a Color Picker in Word and Excel
- How to Use the Color Picker in MS Paint
- How to Pick a Color From an Image on iPhone and Android
Updated November 14, 2026.