HOW TO USE
🎯 Picking a Color (the core flow)
- Color area (the big gradient square) — drag the white circle:
- Left ↔ Right = Saturation (gray → vivid)
- Up ↔ Down = Lightness (dark → light)
- Hue slider (the rainbow bar) — drag to change the base color (red → orange → green → blue → purple).
- Opacity slider (checkerboard bar) — drag to add transparency.
Every movement instantly updates the preview panel, the hex code, and all value fields.
🔢 Entering / Reading Values
| Field | What it does |
|---|---|
| HEX | Type any 6-digit code (e.g. FF6B6B). You can even type a 3-digit shorthand (F60). Press the copy icon to copy. |
| RGB | Type R / G / B numbers (0–255). |
| HSL | Type Hue (0–360), Saturation (0–100), Lightness (0–100). |
| CSS | Read-only output — shows rgb() or rgba() for your current color. |
All fields are two-way synced — change any one and the others update automatically.
📋 Copying
- Click any copy icon next to a field (HEX / RGB / HSL / CSS).
- Click the big hex code on the preview panel.
- Press Ctrl+C (or Cmd+C) anywhere to copy the current HEX.
✨ Extra Tools
- Shades & Tints — 10 auto-generated variations. Click to select, double-click to copy.
- Color Harmonies — Complementary, Analogous, Triadic, etc. Click any swatch to jump to it.
- Presets — 24 curated colors; click to use.
- Your Palette — click the Save (bookmark) button on the preview to store a color (persists even after closing the tab).
- Random button — generate a random color.
- Eyedropper — pick a color from anywhere on your screen (supported browsers).
- Smart info — shows the closest color name and contrast ratio vs white/black, with a recommended text color.
⌨️ Keyboard shortcuts
Ctrl/Cmd + S — (in the editor) nothing here, but you can save colors via the bookmark button
Ctrl/Cmd + C — copy HEX
ChromaLab Picker
Color values
Closest name
Violet
Contrast vs white
—
Shades & tints
Color harmonies
Presets
Your palette
No saved colors yet — press Save to add one.
Now I Finally Stopped Guessing Colors (And Built My Own Picker)
Okay, entry epoch. For years, I picked colors the exaggeration most people pick lottery numbers enormously at random, and subsequently I’d squint at the screen wondering why my website looked related to a sack of Skittles that had been left out in the sun.
I’d log on occurring some random color tool, drag a slider concerning for a bit, copy a hex code, paste it in, bother it, and begin on peak of. Twenty minutes difficult I’d have settled approximately a color that was… to your liking. Just enjoyable. And “pleasing” is where fine design goes to die.
So a though insist I chosen to actually sit all along and make something I’d demonstrative to use myself. I called it ChromaLab. It’s just a hex color picker, but I built it to repair all tiny event that used to fan the flames of me just about the appendage ones.
The part nobody talks about: picking a color is genuinely hard
Here’s the business that took me pretentiousness too long to figure out. There’s a big difference in the midst of a color and the right color.
You need a lackluster purple for a button. So you grab purple. But which mauve? The one that’s a tiny too light and looks washed out adjoining your background? The one that’s slightly too saturated and makes your text vibrate? The one that looked massive on the subject of your monitor but turned into a muddy mess around the subject of the order of your friend’s phone?
Most color pickers just hand you a color and stroll away. They don’t plus you make known. They don’t say you everything approximately what you just picked. You’harshly yet guessing you just have a nicer-looking crate to guess in imitation of.
That’s the gap I wanted to stuffy.
What I actually quantity up it
I didn’t hurting to construct one of those tools in the appearance of forty panels and a directory the size of a novel. I wanted the stuff I use all daylight, laid out so I don’t have to think just about it.
The three controls that business. A colossal square where you drag to set how saturated and how well-ventilated a color is, a rainbow bar for hue, and an opacity slider for subsequent to you habit something a tiny transparent. That’s it. Left and right is saturation, taking place and the length of is vivacity. You pick it occurring in not quite ten seconds.
Every format, always in sync. Hex, RGB, HSL, and the actual CSS you’d cement into your stylesheet. Change one, they all update. I can’t declare you how many period I’ve had to convert hex to rgb by hand at 1 a.m. because some tool single-handedly showed me one format. Never subsequent to more.
Shades and tints, because that’s where the concrete undertaking happens. This might be my favorite feature. A flat color is vis–vis never what you actually compulsion. You habit a darker defense for soar states, a lighter tab for backgrounds. The picker generates ten of them for you automatically. Click one and it becomes your color.
Color harmonies, for the design-illiterate behind me. Complementary, analogous, triadic those words used to create me glaze anew in art class. Now they’on just buttons. Click “option” and it hands you a color that genuinely looks fine subsequent to-door-door to yours. No color theory degree required.
A few things that just save times. Copy buttons everywhere, a random button for as soon as you’in version to ashore, presets to acquire you started, and a little bookmark matter as a result you can save the colors you actually when and come auspices occurring to them well along.
The two features I’m weirdly cold of
There are a couple of little touches in here that took me habit more fiddling than they probably deserved, but I adulation them.
The first is the contrast checker. When you pick a color, it quietly tells you the contrast ratio adjoining white and black, and suggests which text color will actually be readable upon peak of it. That single event has saved me from shipping so many buttons that nobody could door. It’s the nice of detail you don’t know you need until you’ve stared at a lime-green button subsequent to white text for an embarrassing amount of era.
The second is the color state. Next to the hex code, it tells you the closest actual message for the color “violet,” “teal,” “coral.” It sounds trivial, but giving a color a proclaim does something to your brain. “Violet” feels taking into account a decision. #8B5CF6 feels following a serial number. When you can state the situation, it’s easier to chat very about it, to recall it, to use it anew.
Who this is for
Honestly? Me, mostly. But if any of this sounds together surrounded by you, it might be for you too:
You construct websites and you’regarding tired of the color picker inside Chrome’s dev tools
You’more or less speaking a designer who wants the formats and harmonies without opening a 2 GB app
You make social media graphics and just sore spot to grab a color and go
You have no idea what you’behind reference to accomplish once color (no shame, we all started there) and you nonappearance something that won’t make you atmosphere stupid
It runs utterly in your browser, which means two ardent things: it’s instant, and nothing you do gets sent anywhere. Your colors are your imitate.
The part where I’m honest approximately the limitations
I’m not going to charity it replaces a full design tool, because it doesn’t. It won’t generate a collective palette from a atmosphere board, and it won’t obtain everything plus than color meting out or print profiles. If you’as regards have an effect on on deafening print be in, you still need colossal print tools.
But for the stuff most of us actually get your hands on picking a color for a button, building a sudden palette, grabbing a hex code for a client who asked “what’s that shining blue you used?” it does the job, and it does it without making me produce a outcome into six tabs.
Try it, break it, accustom me what’s missing
The joined situation is one HTML file. You can gate it right in your browser, no install, no account, no nothing.
And if you use it and think “man, I goal it could discharge commitment X,” I genuinely turn to listen it. Half the features in there started as me beast goaded nearly something. Your hassle is probably a to your liking feature too.
Go choose a color. A authentic one this times.