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.

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.

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 runs in your browser, 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.