Color Picker
Color Picker turns any color you choose into the three codes designers and developers actually use: HEX for CSS and design tools, RGB for precise screen values, and HSL for intuitive tweaking.
Pick visually with the color well or paste a HEX code you found somewhere — every format updates live, and each has its own copy button.
How to use the color picker
- Click the color well and choose visually, or type a HEX code directly.
- See HEX, RGB and HSL update instantly with a live preview.
- Click “Copy” next to any format to grab it for your code or design tool.
- Test in context — preview the color against your real background before finalizing.
Key features
- Three formats: HEX, RGB and HSL side by side.
- Visual + typed input: pick with the color well or paste a code.
- Click-to-copy: each format has its own copy button.
- Live preview: see the exact color as you adjust.
HEX vs RGB vs HSL: Which Code Should You Copy?
All three codes describe the same color — the difference is who reads them. HEX (#4F46E5) is the compact standard for CSS and design tools: six digits, zero fuss. RGB (79, 70, 229) spells out the red, green, and blue channels, which helps when you’re adjusting values numerically. HSL (243°, 72%, 60%) describes hue, saturation, and lightness — the most human-friendly of the three when you’re hunting for ‘the same blue, but darker.’ This picker shows all three side by side with one-click copy, so grab whichever your tool expects. Designing graphics to recolor? Start with the background remover for clean cutouts.
Stealing Brand Colors (Legally) for Your Projects
Every brand color you admire on a website is one click away: open the picker, sample the shade visually, and copy the HEX straight into your CSS or design file. That is how developers match a client’s logo without asking for a style guide, and how side projects borrow a palette that already looks professional. One caution — colors shift between screens, so verify critical brand work on more than one display before you commit. Once your palette is set, convert assets between formats with the image converter to keep everything web-ready.
Frequently asked questions
What’s the difference between HEX, RGB and HSL?
They describe the same color differently: HEX (#4F46E5) is compact for code, RGB (79, 70, 229) gives red/green/blue channels, HSL (243°, 72%, 60%) describes hue/saturation/lightness which humans find intuitive to adjust.
Can I enter a shorthand HEX like #fff?
Type the full 6-digit form (#FFFFFF) — the picker normalizes common inputs on blur.
Why do colors look different on other screens?
Displays vary in calibration and color gamut. For critical brand work, verify on multiple devices and consider calibrated monitors.
Is the picker free for commercial work?
Yes — pick and use unlimited colors in any project.
Pro Tips
- Grab colors from anywhere: enter any hex code to preview it, or pick visually and copy the code.
- Designers: copy HEX for web/CSS, and note the RGB values for design tools.
- Build palettes: pick a base color here, then generate a full palette with the color palette generator.
More FAQs
What is a hex color code?
A 6-digit code (like #4F46E5) representing red, green, and blue light values — the standard way colors are specified on the web.
What’s the difference between HEX and RGB?
They describe the same color: HEX is the compact web notation (#RRGGBB), RGB lists the three channel values (e.g. rgb(79, 70, 229)).
How It Works: Under the Hood
A color picker is a translator between how your eyes see a color and how machines encode it. At the core sits HEX notation: a six-character string like #3A7BD5, where each pair of hex digits represents one channel — Red, Green, Blue — on a 0–255 scale. #3A is decimal 58 for red, 7B is 123 for green, D5 is 213 for blue. The browser renders that triplet directly: three intensity instructions per pixel.
Most pickers also show HSL (Hue, Saturation, Lightness), which maps better to human thinking. Hue is a 0–360° angle on the color wheel (0° = red, 120° = green, 240° = blue). Saturation is pure hue versus grey; lightness runs 0% (black) to 100% (white). Designers reason in HSL because darkening a palette is trivial: keep hue and saturation, drop lightness by 8–10 points.
Alpha (opacity) is encoded in an 8-digit hex (#RRGGBBAA) or a decimal 0–1 value: #FF is fully opaque, #00 fully transparent. It is a compositing instruction for how much of the layer below shows through, not a color. One quirk: the same hex looks different across screens because colors are interpreted through a color profile (usually sRGB on the web). A wide-gamut DCI-P3 phone renders saturated reds more vividly than an older sRGB laptop — if your brand color looks washed out on a phone but fine on a laptop, the screens’ gamuts, not your code, are the culprit.
Real-World Use Cases
- A frontend developer samples a client’s logo to grab the exact brand hex (#E63946) instead of eyeballing “close enough” red, so buttons match the logo pixel-perfect.
- A Canva designer converts an HSL palette idea (“hue 210, high saturation, lightness 40–60”) into hex codes for a consistent five-slide carousel theme.
- A UI team verifies picker text colors against backgrounds meet the WCAG 4.5:1 contrast ratio before locking colors in the design system.
- A WordPress blogger copies a competitor’s accent hex, then generates two darker shades (lightness −10 and −20) for button hover states.
Advanced Tips
- Think in HSL, output in hex. Lock one hue, build 5 swatches by varying lightness at fixed saturation. Ten seconds, always cohesive.
- Check alpha against real backgrounds. A semi-transparent overlay (#00000080) over a light hero image looks different than over a dark one — sample the composited result.
- Keep a swatch log. Save working hexes with context (“#1A1A2E — footer bg, dark mode”). Guessing later wastes more time than typing it once.
Common Mistakes to Avoid
- Sampling from a compressed screenshot. JPEG artifacts shift the RGB value by a few points. Zoom in and sample a solid, clean area — or average several pixels.
- Confusing 3-digit and 6-digit hex. #ABC expands to #AABBCC, not #AABC. A missing digit produces a totally different color.
- Testing alpha over the wrong backdrop. A translucent button tested over white and shipped over a dark image is a classic “it looked different live” bug.