Color Picker

You pick a color from the swatch or type a HEX code, and the tool shows that same color in every common format at once: HEX, RGB, and HSL. It also builds a row of tints and shades, finds the complementary color, and checks the contrast against black and white. It all runs live in your browser, so you'll see each value update the moment you move the picker, and you can copy any code with one tap.

Paste the code into the HEX box, or pick a shade from the swatch. The tool reads it back as HEX, RGB, and HSL at once, and it draws the exact color on screen, so you can confirm what a code actually looks like before you use it. That makes it a quick hex code finder and checker: type a value you found in a design file, a screenshot, or someone else's CSS, and you'll see the color plus its tints, shades, complement, and contrast, all in one place. If the code is malformed, it flags that too.

They're three ways to write the same color. HEX is the six-digit code you see in CSS, like #3B5BDB, built from red, green, and blue in base 16. RGB lists those same channels as numbers from 0 to 255. HSL describes the color by hue, saturation, and lightness, which is friendlier when you want to nudge a shade lighter or shift the hue. This picker shows all three so you can grab whichever your project needs. Print work uses a fourth model, CMYK, which the reference table below also lists.

There are 16,777,216 of them. A hex code sets red, green, and blue each to a value from 0 to 255, which is 256 steps per channel, and 256 times 256 times 256 works out to 16,777,216 combinations. That's every color a standard screen can show. Each one has a matching RGB and HSL form, and this picker converts between them for whichever code you land on, so you're never stuck with just one format.

Use the tints and shades row. Tints mix your color toward white for lighter versions, and shades mix it toward black for darker ones, in even steps. Tap any swatch in that row and it becomes the active color, with every code updated. It's a quick way to build a palette from one starting color, like a hover state or a set of background tones, without guessing at the values.

It shows how readable text would be on your color, compared against both white and black, using the standard WCAG contrast ratio. A ratio of 4.5 to 1 or higher is the usual target for normal body text, and 3 to 1 works for large text. The picker flags whether each pairing passes, so you'll know at a glance if white or black text sits comfortably on your chosen background.

A complement is the color directly opposite yours on the color wheel, found by rotating the hue by 180 degrees. Complements create strong contrast and a lively pairing, which is why they show up in logos, charts, and call-to-action buttons. The picker calculates it for you and shows its swatch and codes, so you've got an instant accent color to try alongside your main one.

Yes to both. There's no sign-up, no limit, and everything loads instantly in the page, so the colors you pick never leave your device. Bookmark it for web design, CSS work, branding, or any project where you need a color in the right format fast. You'll have the HEX, RGB, and HSL codes, plus a palette and contrast check, in a second, and copying is one tap.