Our color picker lets you choose any color visually and instantly read it as a HEX code, RGB values, or HSL, then copy whatever format you need with a single click. Drag the marker around the spectrum, slide the hue to a different family, or reach for the eyedropper to grab a color straight off your screen, and the tool shows all three codes at once. Underneath, ten tints and ten shades of your color are laid out ready to copy, and a contrast check tells you whether text will survive on top of it. Everything runs in your browser, so the colors you work with stay on your own device.
Color looks simple and turns fiddly the moment you need to be exact. You know the blue you want when you see it, but a browser, a stylesheet, and a design app all want that blue written as a precise code, and each prefers a slightly different way of writing it. A color picker bridges that gap, turning the color in your eye into the exact value a machine understands, and back again, so you can match a brand shade, sample a color you admire on a web page, or build a harmonious set for a project without guessing at numbers. This page covers how to use ours, what the color codes mean, and how to get real work done with them.
What a color picker is and what you get from it
A color picker is a visual tool for selecting a color and reading its numeric value. Instead of typing codes and hoping, you pick the color you want by eye and the tool tells you exactly how to write it. That two way relationship is the whole point. You can go from a color you see to a code you can use, and from a code someone gave you to the color it represents.
The main things a good color picker gives you are a way to choose a color, a clear readout of that color in the common formats, and a way to turn the one color you chose into the set of related colors a project actually needs. Ours covers all three. You choose on the spectrum square, with the hue slider, or with the eyedropper. You read the result as HEX, RGB, and HSL, shown together so you can grab whichever your current task wants. And the tint and shade ramps hand you twenty related colors derived from your pick, each one a click away from your clipboard.
Underneath, every color you pick is just three numbers describing how much red, green, and blue light make it up. The formats are simply different ways of writing those numbers, and the picker lets you work in whichever one suits the moment.
HEX, RGB, and HSL, the three ways to write a color
Because the color picker shows all three formats side by side, it helps to know what each one is for.
HEX is the six digit code you see everywhere on the web, written with a hash in front, like #3A7BD5. The six characters are three pairs, one each for red, green, and blue, using hexadecimal digits that run 0 to 9 and then A to F. It is compact, it copies cleanly, and it is what most websites, stylesheets, and design tools expect, which is why people so often search specifically for a hex color picker or a hex color code. When in doubt, HEX is the safe format to copy.
RGB writes the same three channels as plain decimal numbers from 0 to 255, like rgb(58, 123, 213). It says the same thing as the HEX code in a form that is easier to reason about arithmetically, since 255 is full intensity and 0 is none. RGB is handy when you are working in a language or tool that thinks in those numbers, and its cousin rgba() adds a fourth value for transparency.
HSL takes a different and, for many designers, more intuitive angle. Instead of mixing light channels, it describes a color by its hue, its saturation, and its lightness, written like hsl(215, 65%, 53%). Hue is the position around the color circle, so 0 is red, 120 is green, and 240 is blue. Saturation is how vivid or gray the color is. Lightness is how close to white or black it sits. HSL shines when you want to adjust a color by feel, because nudging one number does one understandable thing, such as making a shade a little lighter without changing its hue.
The key insight is that these are three descriptions of one color. #3A7BD5, rgb(58, 123, 213), and hsl(215, 65%, 53%) are the same blue. The color picker keeps them in step, so you can pick in one and read in another, which makes it a color format converter as much as a picker.
How to use the ToolFiddle color picker
The tool is arranged so you can get from a color to a code, or the reverse, in a couple of moves.
- Pick your color. Drag the marker around the spectrum square to find the shade you want. Across the square is saturation, from washed out on the left to fully vivid on the right, and down the square is brightness, from full light at the top to black at the bottom. The hue slider underneath moves you to a different color family. As you move, the swatch and every code update live.
- Read the codes. The HEX, RGB, and HSL values sit together under the swatch for whatever color is selected. There is no need to convert anything by hand, since all three are right there.
- Copy what you need. Each format has its own copy button, and the big Copy HEX button in the header grabs the one most people want. Paste it into a stylesheet, a design app, or a message.
- Enter a value to look it up. If someone gave you a code, type or paste it into the matching field and the color and the other formats appear. Typing in any of the HEX, RGB, or HSL fields updates all the rest, so it works whichever direction you come from.
- Sample from your screen. Reach for the eyedropper to capture a color from anywhere you can see it, covered in its own section below.
- Take the tints and shades. The two ramps under the values give you ten lighter versions and ten darker versions of your color. Click any step to copy its HEX.
- Check the contrast. Below the ramps, the tool shows how your color scores against white and against black, with the WCAG grades marked pass or fail, so you know before you ship whether text will be readable.
Nothing you do here is uploaded. The picking, the conversions, the ramps, and the contrast maths all happen on your device, so the colors you work with stay with you.
Using the eyedropper to grab a color from your screen
The eyedropper is the feature people reach for when they see a color out in the world and want it. Maybe it is a shade on a web page, a color in a photo you have open, a tone in a design file, or a pixel in an app. The eyedropper lets you click that pixel and read its exact color into the picker.
To use it, activate the eyedropper and your cursor becomes a sampler, usually with a little magnifier so you can aim precisely. Move over the pixel you want and click once. The color is captured and its HEX, RGB, and HSL values fill in immediately, along with fresh tints, shades, and contrast scores, ready to copy. It is the fastest way to answer the question that sends most people to a color picker in the first place: what color is that, exactly, and how do I write it down?
One honest note on how this works. The eyedropper relies on a color sampling feature built into the browser itself, which the Chromium based browsers such as Chrome and Edge provide. Where that feature is present, screen sampling works smoothly and the eyedropper button appears. In browsers that do not offer it yet, the button is simply not shown, and you would pick from the spectrum or enter a value by hand instead. The rest of the color picker, the spectrum, the hue slider, the format readouts, the conversions, the ramps, and the contrast check, works everywhere regardless.
It is also worth being clear about the difference between this and an image color picker. Some tools are built specifically to upload an image file and let you scrub a magnifier across it. Ours is a general color picker. If the image is already displayed on your screen, the eyedropper samples it just like anything else you can see. If you would rather load a file and explore it pixel by pixel, our color picker from image is built for exactly that.
Tints and shades, a palette from one color
Picking a single color is useful, but real projects need several colors that work together: a main brand color, a light background tint, a darker tone for hover states and headings, and something in between for borders. Working those out by hand means fiddling with hex digits until something looks right. The tint and shade ramps do it for you.
The tint ramp blends your color toward white in ten even steps, so you get progressively softer versions ending in a barely there wash that reads as almost white. The shade ramp blends toward black the same way, giving you ten progressively deeper versions. Every step is a real, copyable HEX code, so a click puts it on your clipboard ready to paste into a stylesheet as a variable or into a design file as a project color.
This is how most design systems are actually built. A brand color becomes a scale, and the scale is what the interface uses: the lightest tint for a page background or a highlighted row, a mid tint for a disabled state, the base color for buttons and links, a shade for the pressed and hover states, and a deep shade for text that needs to feel related without shouting. Because the ramps update the instant you change the color, you can audition a whole scale in seconds rather than generating one color at a time.
Converting between color formats
A lot of the time a color picker is really being used as a converter. Someone hands you a HEX code and your tool wants RGB, or a brand guide lists RGB values and you need the HEX for a website. Because our color picker shows HEX, RGB, and HSL together and keeps them synchronized, conversion is just reading a different field. Paste a HEX like #10B981 and its RGB, rgb(16, 185, 129), and HSL, hsl(160, 84%, 39%), appear beside it. Enter RGB numbers and the HEX updates. Adjust the HSL lightness and watch the HEX and RGB follow. There is no lookup table and no hexadecimal math, which helps when you move between a design app that talks in HSL, a stylesheet that wants HEX, and code that expects RGB channels.
The fields work in every direction, which matters more than it sounds. You are not filling in a form and pressing convert. Each of the nine numbers on the panel is both an input and an output, so you can grab the one you happen to know and let the tool work out the rest.
A worked example, from a brand color to a working set
Suppose you are given a single brand color as a HEX code, #2563EB, a strong blue, and asked to build a small set of colors around it for a website.
Start by pasting 2563EB into the HEX field. It reads as rgb(37, 99, 235) and hsl(221, 83%, 53%). The HSL is the useful view here, because it tells you the hue is 221, a confident blue, with high saturation and medium lightness. The marker jumps to the matching spot on the spectrum, so you can see where your color sits relative to its lighter and more washed out neighbours.
Now look down at the ramps. The lighter end of the tint row gives you the near white blue that makes a good page background or a selected row. Two or three steps in gives you a soft fill for a badge or a callout. On the shade side, a step or two down from your base is the hover state for a button, and further down is a heading color that still reads as the same blue. Click each one you want and it is on your clipboard.
Then check the contrast panel. #2563EB against white comes out at 5.17 to 1, which clears the 4.5 that AA wants for body text, so white text on that blue button is safe. Against black it lands at 4.06, which passes for large text but misses the bar for small print, so the same blue works as a heading on a dark background and not as a paragraph. That one glance saves an accessibility review later.
Finally, if you want a contrasting accent, drag the hue slider well away from 221, toward an amber around hue 40, and read off the HEX. In a couple of minutes you have a primary blue, a light tint, a dark shade, an accent, and the confidence that your text will be readable, all as clean codes ready to paste into your CSS as color variables.
Real world use cases
A color picker turns up across a surprising range of work.
Web design and CSS. This is the classic case. You need exact color codes for backgrounds, text, borders, and buttons, and HEX or RGB is what a stylesheet wants. Sampling a color from a mockup and copying its HEX is a daily move for front end work, and the tint ramp covers the hover and background variants you will need five minutes later.
Branding and marketing. Brands live and die by consistent color. A color picker lets you capture a brand exact shades, record them as codes, and derive the family of tones that everything from a slide deck to a social banner will use, so the blue on the website matches the blue on the flyer.
Digital art and illustration. Artists sample colors from references and build ranges before they commit to a piece. Reading a color as HSL makes it easy to think in families, and the ramps give you a ready made light to dark run of the same hue.
Presentations and documents. Matching the accent color in a chart to a company color is far easier when you can pick and copy exact values rather than eyeballing a dropdown.
UI and product design. Design systems are built on defined color tokens. A picker that shows HSL and generates tints and shades of a base color gives you most of a token scale in one pass, and the contrast readout tells you which steps are safe to put text on.
Learning and experimenting. If you are getting to grips with how color codes work, moving the marker and watching HEX, RGB, and HSL change together is one of the clearest ways to build intuition for what the numbers mean.
Tips and common mistakes
A few pointers make the color picker more useful and steer you clear of the usual snags.
- Copy the code, not the name. CSS has named colors like red and teal, but they only cover a fixed set of about 140. For any color that matters, copy the HEX or RGB so it is exact and reproducible, rather than reaching for a name that may not exist.
- Use HSL to build variations by hand. When you need a specific lighter or darker version rather than a ramp step, switch to HSL and move only the lightness. You keep the same hue and get a clean tint or shade, which is much harder to do by nudging HEX digits.
- Mind the two forms of transparency. If a color needs to be see through, remember that plain HEX has no opacity. Use the eight digit HEX form, or rgba() and hsla(), which carry an alpha value.
- Check contrast before you commit. A color that looks great as a background can be unreadable under text. The contrast panel scores your color against white and black in one glance, and it is worth trusting over your eye, which adapts to whatever is on screen.
- Do not trust a screen sampled color to be the source color. When you eyedrop a color from a JPEG or a video, compression may have shifted it slightly from the original. For a brand color, always prefer the official code over a sample if you can get it.
- Watch case and the hash. HEX codes are not case sensitive, so #3a7bd5 and #3A7BD5 are the same, but some tools are fussy about the leading hash. If a code is not taking, check that the hash is present or absent exactly as the tool wants.
Understanding HSL and why designers reach for it
HSL deserves a closer look, because once it clicks it changes how you work with color. HEX and RGB are honest about how a screen makes color, by mixing red, green, and blue light, but that is not how people think about color. HSL lines up much better with human intuition.
Hue is the pure color, its place around the circle in degrees from 0 to 360. Reds sit near 0 and 360, greens around 120, blues around 240. To shift a color to a different family, change the hue and leave the rest alone. That is exactly what the hue slider under the spectrum does.
Saturation is how intense the color is, from 0 percent, a flat gray, up to 100 percent, as vivid as that hue gets. Dropping it makes a color more muted, and raising it makes it pop.
Lightness runs from 0 percent, black, through the pure color in the middle, up to 100 percent, white, and is the dial you use to make tints and shades of the same color.
The reason designers love HSL is that each number maps to a single, understandable action. For a set of buttons at different strengths, hold hue and saturation and step the lightness. For a muted version of a loud brand color, pull the saturation down. Doing the same in HEX means editing six characters of hexadecimal with no obvious connection to what you will see. The color picker shows HSL next to HEX and RGB so you can think in HSL and still copy out the HEX your stylesheet wants.
Contrast, accessibility, and readable color
Choosing a pretty color is only half the job when that color has to carry text or sit next to other colors. The other half is contrast, which is how clearly two colors stand apart. Get it wrong and text becomes a strain to read, especially for people with low vision and especially on phones in bright light.
Contrast is measured as a ratio between the relative luminance of two colors, running from 1 to 1, meaning identical, up to 21 to 1, which is pure black on pure white. The Web Content Accessibility Guidelines set the bars that most teams and many laws work to. Level AA asks for at least 4.5 to 1 for normal body text and 3 to 1 for large text, meaning roughly 18 point and up, or 14 point bold and up. Level AAA raises that to 7 to 1 for normal text. Interface elements like form borders and icons need at least 3 to 1 to be distinguishable.
Rather than make you look those numbers up, the picker computes them. Every time you change the color it scores it against white and against black, shows both ratios to two decimal places, and marks AA, AA Large, and AAA as passed or failed. Two things follow from that readout. If your color passes against white, white text sits safely on it, which is what you want for a filled button. If it passes against black, it works as text on a light background. If it fails both, it is a decorative or background color rather than a text color, and you should reach for a step from the shade ramp when you need to write on it.
Light gray text on white fails not because the colors are wrong but because they are too close in lightness. This is another place where thinking in HSL helps, since lightness is one of its three numbers. Testing a few candidate pairs and leaning toward stronger lightness differences keeps your work readable for far more people, and doing it while you pick is far cheaper than fixing it after launch.
Your colors stay in your browser
It is easy to assume color is not sensitive, and often it is not, but the way our color picker handles your work is still worth spelling out, because it is the principle we hold across every ToolFiddle tool. Everything you do in the picker happens on your own device. The colors you sample, the values you type, and the ramps and ratios the tool works out are all computed by your browser and never sent to a server, logged, or kept once you close the tab.
There are real cases where this matters. A palette for an unreleased product, the colors of a rebrand that has not been announced, or the scheme for a client project under wraps are all things a designer would rather not hand to a third party just to read a HEX code. Because the color picker works locally, none of that leaves your machine. You can even disconnect from the internet once the page has loaded and keep working, which is the plainest proof that your colors never needed to go anywhere.
Genuinely free, with no catches
The color picker is free in the complete sense. There is no sign-up, no account to make, and no email to surrender before you can pick a color. There is no limit on how many colors you sample, how many conversions you run, or how many codes you copy, and no feature is fenced off behind a paid tier. The eyedropper, the spectrum, the HEX, RGB, and HSL readouts, the tint and shade ramps, and the contrast check are all there for everyone, every time.
That stands apart from tools that show you a color but ask you to upgrade to copy it, or that cap how many swatches a scale can hold unless you pay. We built the color picker to be the quick, dependable thing you open whenever you need a color code.
Instant and unlimited by design
Because the picking and converting happen in your browser, there is no upload and no waiting. Move the marker and the codes change in real time. Paste a HEX and its RGB, HSL, twenty ramp steps, and both contrast ratios are there at once. There is no server round trip to slow a conversion down and no queue when the tool is busy, because the work is done by your own device rather than a shared machine somewhere.
The page is kept light, without the heavy advertising and tracking scripts that weigh down so many free color tools, so it loads fast and stays smooth as you drag across the spectrum. A color picker is something you dip into constantly during a design session, and a quiet, snappy page makes that painless.
Works on any device, with one honest caveat
The color picker runs on a desktop, a laptop, a tablet, or a phone, in any modern browser, and the layout adjusts to the size of your screen. The picking, the format readouts, the conversions, the ramps, and the contrast maths all work offline once the page has loaded, since they run entirely on your device, so you can build a color scale on a plane or anywhere without a connection.
The one honest caveat is the eyedropper. Screen sampling uses a color feature built into the browser, which the Chromium based browsers like Chrome and Edge provide and some others do not yet. Where the feature is missing, the eyedropper button does not appear at all, so you will not click something that quietly fails. On phones, screen sampling is likewise limited, so mobile use leans on the spectrum and typed or pasted codes. None of that affects the rest of the tool, which behaves the same everywhere.
Related tools on ToolFiddle
A color picker sits nicely beside a few other ToolFiddle tools, and each one runs in your browser the same way, keeping your work on your device. If you want to pull a color out of a photo rather than off your screen, the color picker from image loads a file and lets you sample any pixel. Once you have a brand color settled, the favicon generator turns it into a full set of site icons. If you are formatting design data or a theme config, the JSON formatter tidies and validates it without uploading it. When you need to share a link to a palette or a mockup as a scannable code, the QR code generator makes one locally. And for quick text jobs while you document a design system, the word counter counts as you type. As with the color picker, none of them send what you give them anywhere.
The short version
A color picker lets you choose a color by eye and read it as an exact HEX, RGB, or HSL code, then copy whatever format you need. Pick on the spectrum square, move the hue slider to change family, sample a color from your screen with the eyedropper, convert freely between formats by typing into any field, take ten tints and ten shades of your color straight from the ramps, and check the contrast before you put text on it. Do it all here and every color stays on your device, processed by your own browser, never uploaded, never stored, free of any limit, and updated the instant you move the marker. The one caveat is honest: the eyedropper screen sampling depends on a browser feature that Chromium based browsers provide, while everything else works everywhere. Good color work should not cost you your privacy, and with on-device processing it does not.