Pick any color and instantly get HEX, RGB, HSL, HSV, CMYK values plus 7 auto-generated color palettes complementary, analogous, triadic, monochromatic and more.
Quick tools:
Color Picker
H239
S84
L60
MediumSlateBlue
#6366F1
Sample Text on this Color
The quick brown fox jumps over the lazy dog.
White text
contrast: 4.47:1
WCAG AA Large
Black text
contrast: 4.70:1
WCAG AA
Color Values
HEX#6366F1
RGBrgb(99, 102, 241)
HSLhsl(239, 84%, 67%)
HSVhsv(239, 59%, 95%)
CMYKcmyk(59%, 58%, 0%, 5%)
CSScolor: #6366f1;
Tailwind-likebg-[#6366f1]
Complementary
Opposite on the color wheel high contrast, energetic
The TOOLBeans Color Picker is a free, browser-based tool for choosing colors and building harmonious palettes for web design, UI work, branding, illustration and any project where exact color values matter. Pick a color with the native picker, the HSL sliders, the on-screen eyedropper, or by extracting colors directly from an image, and the tool instantly shows the value in five formats: HEX, RGB, HSL, HSV and CMYK, each copyable with a single click.
Beyond raw values, the tool does the color theory for you. From any starting color it generates seven harmony palettes built on the relationships of the color wheel, checks how readable your color is against light and dark text using the official WCAG accessibility formula, and gives you ready-to-paste CSS variables and Tailwind config so the colors go straight into your project. A library of more than 200 curated palettes across dozens of themes is there whenever you need inspiration rather than a calculation.
Everything runs locally in your browser. Images you drop in for color extraction are processed on your own device and never uploaded, and your saved colors are stored in your browser so they are still there when you come back. There is no account, no watermark and no limit on how much you use it.
How to Use the Color Picker Step by Step
1
Choose a starting color
Click the large picker, drag the H, S and L sliders, type a HEX code, hit Random for inspiration, or use the on-screen Eyedropper to grab any color from your screen (Chrome and Edge on desktop).
2
Or extract from an image
Click Extract from Image and upload any photo or screenshot. The tool finds the dominant colors and turns them into a palette you can click through, all processed privately in your browser.
3
Read the values
The chosen color is shown instantly in HEX, RGB, HSL, HSV and CMYK. Click Copy on any row to put that exact value on your clipboard for CSS, design software or print work.
4
Generate a palette
Open the Palettes tab to see complementary, analogous, triadic, split-complementary, tetradic and monochromatic schemes built from your color, or browse 200+ curated palettes by theme.
5
Check accessibility
The preview and Harmony tab show the WCAG contrast ratio of your color against light and dark text, with an AA or AAA pass badge, so you know your text will be readable.
6
Export to code
Copy any palette as CSS custom properties or a Tailwind color scale, and save colors you like to your browser-stored swatches for next time.
HEX, RGB, HSL, HSV and CMYK Explained
The same color can be written in several formats, each suited to a different job. Here is what each one means and when to reach for it.
HEX
A six-digit hexadecimal code like #6366F1, where pairs of digits set red, green and blue from 00 to FF. It is the most common format in web development and design tools because it is compact and unambiguous.
RGB
Red, green and blue channels from 0 to 255, written rgb(99, 102, 241). It maps directly to how screens emit light and is useful when you need to adjust a single channel or add transparency with rgba().
HSL
Hue (0 to 360 degrees around the color wheel), Saturation and Lightness as percentages. HSL is the most intuitive for humans: to make a color lighter you raise lightness, to mute it you lower saturation, without touching the hue.
HSV
Hue, Saturation and Value (brightness). Very similar to HSL and common in design software like Photoshop, where the picker is built around value rather than lightness.
CMYK
Cyan, Magenta, Yellow and Key (black) as percentages. This is a subtractive model used for print, since printers mix inks rather than emit light. Use it when preparing artwork for physical printing.
Understanding Color Harmonies
Color harmonies are time-tested relationships on the color wheel that reliably look good together. The generator builds each of these automatically from your chosen color.
Complementary
Two colors opposite each other on the wheel. Maximum contrast and energy, great for calls to action, but use one as the dominant color and the other as an accent to avoid clashing.
Analogous
Colors that sit next to each other on the wheel. They share a common tone, so the result feels calm and natural, like the colors of a single season.
Triadic
Three colors evenly spaced around the wheel. Vibrant and balanced, often used in playful or energetic designs where you still want harmony.
Split-Complementary
A base color plus the two colors on either side of its complement. It keeps the contrast of a complementary scheme but is softer and easier to balance.
Tetradic
Four colors forming a rectangle on the wheel. Rich and versatile, but works best when one color leads and the others support.
Monochromatic
A single hue at different lightness and saturation levels. Endlessly cohesive and elegant, ideal for minimal interfaces and clean brand systems.
Color Contrast and Web Accessibility (WCAG)
Text needs enough contrast against its background to be readable by everyone, including people with low vision or color blindness. The Web Content Accessibility Guidelines (WCAG) define this as a contrast ratio between the text color and its background, ranging from 1:1 (no contrast) to 21:1 (black on white).
The accepted thresholds are: 4.5:1 for normal body text to pass level AA, 3:1 for large text (roughly 18px bold or 24px regular and up) to pass AA, and 7:1 for the stricter AAA level. This tool calculates the ratio of your chosen color against white, black and common UI backgrounds using the official WCAG luminance formula, and shows whether each combination passes, so you can fix readability problems before they reach your users.
Meeting these standards is not only good practice; in many countries accessible color contrast is a legal requirement for public-facing websites. Checking it takes seconds here and saves redesigns later.
Frequently Asked Questions
Is the color picker free to use?+
Yes. It is completely free with no usage limits, no account and no signup. Every feature, including palette generation, the curated library, image color extraction, the WCAG checker and CSS and Tailwind export, is available to everyone.
What color formats does the tool support?+
It provides HEX, RGB, HSL, HSV and CMYK values for any color you pick, all copyable with one click. HEX, RGB and HSL are best for web and screen work, while CMYK is intended for print.
How does the eyedropper work?+
The Eyedropper button uses your browser native EyeDropper feature to let you pick a color from anywhere on your screen, including other windows. It is supported in Chrome and Edge on desktop. On browsers that do not support it, the tool tells you and you can use the picker or image extraction instead.
Can I get a color palette from an image?+
Yes. Click Extract from Image or open the From Image tab and upload any photo or screenshot. The tool analyses the image in your browser and pulls out its dominant colors as a palette you can click and copy. The image never leaves your device.
What is the WCAG contrast checker for?+
It verifies whether your chosen color has enough contrast against text to be readable, following the Web Content Accessibility Guidelines. It checks white and black text plus common backgrounds and shows whether each passes at AA or AAA level, which is important and often legally required for accessible websites.
What palettes does the tool generate automatically?+
From any color it builds seven harmony palettes: complementary, analogous, triadic, split-complementary, tetradic, monochromatic and a tints-and-shades scale. Each comes with a CSS variables export and a Tailwind config snippet.
How do I export colors for my code?+
Every generated palette has a Copy CSS button that outputs CSS custom properties, and the Tints and Shades tab exports a full Tailwind color scale. Both are formatted to paste directly into a stylesheet or tailwind.config.js.
What is the difference between HEX, RGB and HSL?+
HEX is a compact hexadecimal code like #6366F1, most common on the web. RGB splits the color into red, green and blue channels from 0 to 255. HSL uses hue (0 to 360 degrees), saturation and lightness as percentages, which makes it the easiest format for adjusting a color by hand.
Do my saved colors persist after I close the tab?+
Yes. Saved colors are stored in your browser local storage, so they remain available the next time you open the tool on the same browser. Double-click a saved swatch to remove it. Recent colors are tracked automatically during your session.
Is my data or image uploaded anywhere?+
No. The entire tool, including image color extraction, runs locally in your browser. Nothing is sent to any server, so it is completely private.