Quick Answer
To find a colour code, open the Prompt Minds Color Picker and click the colour box to choose a colour, use “Pick from Screen” to grab a colour from anywhere on your display (Chrome and Edge), or paste a HEX or RGB value and click Convert. The tool instantly shows the HEX, RGB and HSL codes, each with a copy button, and runs entirely in your browser.
What is a Color Picker?
A color picker is a tool that lets you choose a colour visually and gives you its exact code, so you can reuse the same shade in websites, apps, presentations, social media graphics and print designs. Without the code, it is almost impossible to match a colour by eye — two blues that look similar may differ by a few digits that are obvious once placed side by side.
The Prompt Minds Color Picker combines three tools in one. First, a visual picker: click the large colour box and choose any colour. Second, a screen eyedropper: in Chrome and Edge you can click “Pick from Screen” and sample any pixel on your display, whether it is a logo in another app, a photo or a competitor's website. Third, a converter: paste a HEX or RGB value and get every other format instantly.
For every colour, the tool shows the three formats used most in design and development: HEX (#1B98E0), RGB (rgb(27, 152, 224)) and HSL (hsl(202, 78%, 49%)). Each has its own copy button, so you can paste the right format straight into CSS, Figma, Canva, PowerPoint or a brand guideline document.
Everything happens in your browser. Colours are calculated with JavaScript on your device, nothing is uploaded and the page works offline after the first visit. The eyedropper uses the official EyeDropper API, which only returns the colour of the pixel you choose.
Key Features
- Visual colour picker: Choose any colour with your system's native colour selector.
- Screen eyedropper: Sample a colour from anywhere on your screen in Chrome and Edge.
- HEX to RGB and HSL: Paste a HEX code and see every other format at once.
- RGB to HEX: Type rgb() or rgba() values and get the HEX code.
- Shorthand support: 3-digit codes such as #abc are expanded automatically.
- Live preview: A large swatch shows the exact colour you are working with.
- Copy buttons: Copy HEX, RGB or HSL with a single click.
- Error messages: Invalid codes are rejected with a clear message instead of a wrong colour.
- Mobile friendly: Works on phones and tablets (the screen eyedropper is desktop-only).
- Free and private: No uploads, no sign-up, no limits.
How to Get a Colour Code — Step by Step
- Choose a colour: Click the large square and pick a colour from the colour selector.
- Or sample your screen: Click Pick from Screen (Chrome/Edge) and then click any pixel on your display.
- Or convert a code: Paste a value like
#ff5733orrgb(255, 87, 51)and click Convert. - Check the preview: The swatch and the HEX, RGB and HSL fields update instantly.
- Copy: Click the copy icon next to the format you need.
- Paste: Use the code in your stylesheet, design file or document.
Pro tip: To build a matching palette, copy the HSL value and change only the lightness: hsl(202, 78%, 35%) gives a darker shade and hsl(202, 78%, 85%) a soft background tint of the same colour.
HEX vs RGB vs HSL
| Format | Example | Best for |
|---|---|---|
| HEX | #1B98E0 | CSS, HTML, brand guides — short and widely supported |
| RGB | rgb(27, 152, 224) | Transparency with rgba(), image editing, programming |
| HSL | hsl(202, 78%, 49%) | Creating shades and themes by adjusting lightness |
Why Choose the Prompt Minds Color Picker?
Most colour tools do only one job: either they let you pick a colour or they convert codes. Ours combines picking, screen sampling and conversion on a single page, so you can grab a colour from a reference image and immediately copy it in the format your project needs.
The converter is strict about input. Instead of guessing when you paste an invalid value, it shows a clear message, which prevents wrong colours from slipping into your design. Shorthand HEX codes and values without the # symbol are handled automatically, which saves time when copying codes from different sources.
Like all Prompt Minds tools, the picker is free, ad-light, available in dark and light themes and privacy-first. It pairs well with our image tools — for example, you can find a colour here and then use the Color Replace tool to apply it to a photo.
10 Real-World Use Cases
- Web development: Copy exact HEX or RGB values into CSS and Tailwind configs.
- Brand guidelines: Document a company's colours in HEX, RGB and HSL.
- Matching a logo: Sample the colours of an existing logo with the eyedropper.
- Social media graphics: Keep Canva and Instagram posts consistent with your brand colours.
- Presentations: Match PowerPoint or Google Slides themes to a client's website.
- UI design: Create lighter and darker shades of a primary colour using HSL.
- YouTube thumbnails: Pick high-contrast colours that stand out in search results.
- Interior and fashion ideas: Capture a colour from a photo to describe it precisely.
- Accessibility checks: Get exact codes to test text contrast in accessibility tools.
- Learning design: Understand how HEX, RGB and HSL describe the same colour differently.
How HEX Colour Codes Work (With an Example)
Screens create colours by mixing red, green and blue light. Each channel has 256 levels, from 0 (off) to 255 (full brightness), giving 256 × 256 × 256 = 16,777,216 possible colours. A HEX code writes these three numbers in hexadecimal (base 16), using the digits 0–9 and the letters A–F.
Take #1B98E0. Split it into pairs: 1B, 98 and E0. In decimal, 1B = 1 × 16 + 11 = 27, 98 = 9 × 16 + 8 = 152, and E0 = 14 × 16 + 0 = 224. So #1B98E0 is exactly the same colour as rgb(27, 152, 224). Shorthand HEX simply doubles each digit: #ABC means #AABBCC.
HSL describes the same colour in a more human way. The hue of #1B98E0 is about 202° on the colour wheel (a sky blue), the saturation is 78% (quite vivid) and the lightness is 49% (close to the middle). Change the lightness to 30% and you get a deep navy of the same family; change it to 90% and you get a pale tint for backgrounds.
Choosing Readable Colours (Contrast)
A colour can look beautiful and still be hard to read. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 between normal body text and its background, and 3:1 for large headings. Black on white is 21:1, while light grey text on white often falls below 3:1. After you pick your brand colours here, check text and background pairs in a contrast checker before using them on buttons and paragraphs — good contrast helps every visitor, including people with low vision and anyone reading on a phone in bright sunlight.
Browser Support and Limits
Picking and converting colours works in every modern browser. The “Pick from Screen” eyedropper uses the EyeDropper API, currently available in Chrome and Edge on desktop; in Firefox, Safari and on most phones the button is hidden automatically and you can still use the colour box and the converter. All codes use the standard sRGB colour space used by websites.
Common Mistakes to Avoid
- Eyeballing colours: Similar-looking colours can differ noticeably; always copy the exact code.
- Mixing up formats: Pasting an RGB value where a tool expects HEX will fail — copy the right format.
- Ignoring contrast: Light text on a light background is hard to read; check contrast for body text.
- Trusting screenshots blindly: Compressed screenshots can slightly change colours; sample the original where possible.
- Too many brand colours: Stick to a small palette (2–4 main colours) for a consistent look.
- Forgetting dark mode: Colours that work on white may need adjusting on dark backgrounds.
Color Picker — Key Facts
| Output formats | HEX (#1B98E0), RGB (rgb(27, 152, 224)) and HSL (hsl(202, 78%, 49%)) |
|---|---|
| Accepted input | 6-digit HEX, 3-digit HEX (#abc), with or without #, and rgb()/rgba() values |
| Screen eyedropper | Uses the EyeDropper API — available in Chrome and Edge on desktop |
| Colour model | sRGB, 8 bits per channel (0–255) |
| Privacy | Runs 100% in your browser; nothing is uploaded |
| Price | Free, no sign-up |
Frequently Asked Questions
What is a HEX colour code?
A HEX code is a six-character code such as #1B98E0 that describes a colour using hexadecimal numbers. The first two characters are red, the next two green and the last two blue, each from 00 (none) to FF (full). HEX is the most common colour format in web design and CSS.
How do I convert HEX to RGB?
Paste the HEX code (for example #1b98e0) into the code box and click Convert. The RGB value — rgb(27, 152, 224) — appears instantly. Manually, each pair of HEX digits is converted from base 16 to a number from 0 to 255.
How do I convert RGB to HEX?
Type an RGB value such as rgb(255, 87, 51) and click Convert. The tool shows the HEX equivalent, #FF5733, along with the HSL value. Each RGB number is converted to a two-digit hexadecimal value.
What is HSL and when should I use it?
HSL stands for Hue, Saturation and Lightness. Hue is the colour angle (0–360°), saturation is how vivid it is and lightness is how light or dark. HSL makes it easy to create lighter or darker shades of the same colour by changing only the lightness value.
How does “Pick from Screen” work?
It uses the browser's EyeDropper API, which lets you click any pixel on your screen — even outside the browser window — and returns its colour. It is available in Chrome and Edge on desktop. In other browsers the button is hidden automatically.
Does the tool accept 3-digit HEX codes?
Yes. Shorthand codes like #abc are expanded to their full form, #AABBCC. You can also type codes with or without the # symbol.
Can I pick a colour from an image?
Open the image on your screen and use “Pick from Screen” in Chrome or Edge to click the exact pixel you want. The HEX, RGB and HSL values of that pixel appear immediately.
Why does a colour look different on another screen?
Monitors and phones are calibrated differently and some use wider colour spaces. The colour code stays the same, but its appearance can vary slightly between devices. Designers use calibrated screens for colour-critical work.
Is my data uploaded anywhere?
No. All conversions happen in your browser with JavaScript. The eyedropper only reads the colour you click and nothing is sent to a server.
Which format should I use in CSS?
All three work in modern CSS. HEX is short and common, RGB is useful when you need transparency with rgba(), and HSL is best for building colour themes because shades are easy to adjust.
Does it work on mobile?
Yes. The colour box, conversion and copy buttons work on Android and iPhone browsers. The screen eyedropper is a desktop browser feature, so it is hidden on most phones.
Is the Color Picker free?
Yes, it is completely free with no sign-up and no limits.
Find Your Colour Code Now!
Pick or paste a colour and copy HEX, RGB or HSL in one click — free and private.
Explore More Prompt Minds Tools
Color Picker works great alongside our other free tools such as JSON Formatter, Text Case Converter, QR Code Generator, Word Counter. Every Prompt Minds tool runs entirely in your browser — no sign-up, no uploads, no watermarks. Browse all free tools.