How to use the color picker
- Click the color swatch to open your system color chooser, or type a code into the HEX, RGB, HSL or CMYK box. All the other boxes update to match.
- Browse the lighter tints, darker shades and matching colors, and click any chip to make it your current color.
- Check readability: choose a background color and the contrast checker tells you whether the pair passes WCAG AA and AAA.
- Press Copy to export CSS variables, a Tailwind-style scale or plain values. To pull colors from a photo, open Palette from image and drop in a picture.
A free color picker and converter for designers, developers and students
Color work usually means jumping between formats. A designer hands over a HEX code, the CSS needs HSL so that hover states can be made slightly darker, a presentation program wants RGB, and a print shop asks for CMYK. Instead of doing the arithmetic by hand or opening a heavy design application, you can paste any one value here and read all the others at once.
The tool goes beyond conversion. It suggests lighter and darker shades, builds complementary, triadic and analogous combinations, tests contrast for accessibility, generates code snippets and extracts a palette from any image. It all runs in your browser, so a client's unreleased logo or product photo is never uploaded.
Color formats explained
| Format | Example | What it is | Typical use |
|---|---|---|---|
| HEX | #7B2331 | Red, green and blue as three base-16 pairs | CSS, HTML, design handoff |
| RGB | rgb(123, 35, 49) | Light intensity of each channel from 0 to 255 | Screens, canvas, image software |
| HSL | hsl(350, 56%, 32%) | Hue angle, saturation and lightness | Building shades and themes in CSS |
| CMYK | cmyk(0%, 72%, 60%, 52%) | Cyan, magenta, yellow and black ink percentages | Print design (approximation here) |
Because screens emit light and printers reflect it, the same HEX value can look different on paper. The CMYK output of any web tool is only a starting point. If color accuracy matters, ask your printer for a hard-copy proof and use their profile.
Shades, tints and color harmonies
Choosing a main color is the easy part. Making a whole palette is harder. The page generates four lighter and four darker versions by changing HSL lightness while keeping the hue the same, which is the quickest way to create backgrounds, borders and hover states that obviously belong together.
It also builds three classic harmonies. A complementary color sits opposite on the wheel, 180 degrees away, and gives the strongest contrast, great for a call-to-action button. A triadic scheme uses colors spaced 120 degrees apart for a lively but balanced look. Analogous colors sit 30 degrees either side of your color and feel calm and cohesive, which suits backgrounds and illustrations.
Checking color contrast for accessibility
Around one in twelve men and one in two hundred women have some form of color vision deficiency, and many more people read screens in sunlight or on cheap displays. Low contrast between text and its background is one of the most common accessibility failures on the web. The Web Content Accessibility Guidelines measure contrast as a ratio between the relative luminance of two colors.
- AA, normal text: at least 4.5:1. This is the level most laws and procurement rules reference.
- AA, large text: at least 3:1. Large means roughly 24 px regular or 19 px bold and above.
- AAA, normal text: at least 7:1, the enhanced level.
- UI components and graphics: WCAG also asks for 3:1 for icons, input borders and chart elements that carry meaning.
Use Swap text and background to try the reversed pair, for example white text on a brand-colored button. If a pair fails, move the color along the lighter or darker row until it passes.
Extracting a palette from a photo
Switch to the Palette from image tab and drop in a JPG, PNG, WebP or GIF. The tool reduces the picture to a small sample and uses median-cut quantization to find the 4, 6 or 8 colors that best represent it, ordered by how much area they cover. Click any point on the picture to read the exact color of that pixel, then open it in the color picker to see its shades and codes.
Designers use this to build a website theme from a hero photo, to match slide colors to a logo, or to pick colors that agree with a product shot. You can download the palette as a PNG strip, a JSON file or CSS variables, or copy the HEX list.
Tips for choosing colors
- Limit a design to one main color, one accent and a set of neutrals. The 60-30-10 rule (60 percent dominant, 30 percent secondary, 10 percent accent) is a reliable starting point.
- Do not rely on color alone to convey meaning; add icons or text for errors, success messages and chart legends.
- Test your palette in dark and light surroundings. A color that looks fine on white may disappear on a dark background.
- Save the codes in CSS variables so a future rebrand means changing one line.
Private by design
The color picker is a pure browser tool. Images you load for palette extraction stay on your device, nothing is uploaded, and the page sets no tracking cookies. After the first visit it also works offline.
Frequently asked questions
How do I convert HEX to RGB?
Type or paste the HEX code into the HEX box, for example #7b2331 or the short form #fff. The RGB, HSL and CMYK boxes update immediately. You can also edit any of the other boxes, and the rest follow. HEX is simply RGB written in base 16: #7b2331 means red 123, green 35, blue 49.
What is the difference between HEX, RGB and HSL?
All three describe the same screen colors. HEX and RGB mix red, green and blue light; HEX writes the three values in hexadecimal, while RGB uses numbers from 0 to 255. HSL describes a color by hue (the position on the color wheel), saturation (how vivid) and lightness (how light or dark), which is easier for humans when you want a darker or softer version of a color.
Why is the CMYK value only an approximation?
True CMYK printing depends on the paper, the inks and an ICC color profile. This tool uses the standard mathematical formula, which is fine for a rough idea but may look different on paper. Always ask your printer for a proof and the profile they use.
What does the WCAG contrast ratio mean?
It compares the brightness of text and its background on a scale from 1:1 (identical) to 21:1 (black on white). The Web Content Accessibility Guidelines require at least 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 and 4.5:1 at the stricter AAA level. Passing helps people with low vision and anyone reading in bright light.
How does the palette from image work?
The picture is drawn onto a small canvas in your browser and a median-cut algorithm groups the pixels into the number of colors you choose, ordered by how much of the image each covers. Click any point on the picture to read an exact pixel color. The image is never uploaded.
Does the eyedropper work in every browser?
The screen eyedropper button appears only in browsers that support the EyeDropper API, mainly Chrome and Edge on desktop. In other browsers you can still use the color input, type codes, or load an image into the palette tab and click a pixel.
Can I use the colors commercially?
Colors themselves are not copyrighted, so you can use the codes you pick in websites, designs and products. Logos, brand color combinations and trademarks of other companies may be protected, so do not imitate someone else's brand identity.
Is my image sent to a server?
No. Images are decoded and analyzed locally by your browser, and nothing is uploaded or stored. The page also works offline after the first visit.
Related tools
Need custom software, a faster website or help with digital projects? The team at Bilişim Ajans can help.