Color Tools
Inar Color Picker
Inar Color Picker is a free online color picker tool for designers and developers. Select colors, explore shades, and get accurate HEX, RGB, HSL, and other color values instantly for websites, graphics, and UI design.
Inar Color Picker
Pick, Convert & Copy Colors in Every Format
A precise online color picker with a live saturation–value field, hue and alpha sliders, a screen eyedropper, and instant conversion between HEX, RGB, HSL, HSV and CMYK. Check WCAG contrast, build tints and shades, explore color harmonies, and copy production-ready CSS, JSON or Tailwind values. Everything runs locally in your browser — nothing is uploaded and no sign-up is required.
Color picker
#f2a93bTints & shades
rampColor harmonies
click to applyContrast & accessibility
WCAG 2.1Export code
Recent colors
0 savedWhat is a Color Picker?
A tool for choosing a color and translating it into the format your project needs.
A color picker lets you choose a color visually — by moving a point inside a hue, saturation and brightness space — and then reads that color back as an exact numeric value. Because different tools speak different color languages, a good picker also converts between them: HEX for the web, RGB for screens, HSL and HSV for human-friendly adjustment, and CMYK as a rough starting point for print.
This picker uses a saturation–value field plus a hue slider and an alpha slider, which mirrors how designers actually think about color: pick the hue family first, then decide how vivid and how light it should be. Every change is converted instantly into five formats, checked against WCAG contrast thresholds, and expanded into tints, shades and harmony variations.
Inar Color Picker runs entirely inside your browser. No color value, image or palette is ever uploaded — there is no server call and no third-party processing.
Pick, Convert, Validate
Three jobs, one tool.
Pick
Drag inside the saturation–value field, slide the hue and alpha rails, type an exact value, or sample any pixel on screen with the built-in eyedropper. Keyboard arrows nudge the selection for pixel-perfect control.
Convert
HEX, RGB, HSL, HSV/HSB and CMYK are computed live from a single source of truth, so the values never drift apart. Edit any field and the rest update immediately.
Validate
The contrast panel checks your color against white and black across all four WCAG 2.1 levels, reports the exact ratio, and recommends the readable text color for a given background.
Features
Everything a color picker should do, without the clutter.
Saturation–value field
A precise 2D picker with a draggable handle and full keyboard support.
Hue & alpha sliders
Full 0–360° hue control plus an alpha channel with a checkerboard preview.
Screen eyedropper
Sample any pixel on your screen using the native EyeDropper API where supported.
Five formats
HEX, RGB, HSL, HSV/HSB and CMYK — all editable, all copyable in one click.
WCAG contrast checker
Exact ratios against white and black with AA and AAA pass/fail badges.
Tints & shades
An 11-step light and dark ramp generated from the current color.
Color harmonies
Complementary, analogous, triadic, split, tetradic, square and monochromatic sets.
Live UI preview
See the color applied to a real text and button sample before you commit.
Color history
Recent colors are stored locally so you can jump back to one you liked.
Named color library
Search over a curated set of CSS named colors by name, hex or family.
Code export
Copy ready-made CSS variables, Tailwind config, JSON, a JS module or an SVG chip.
Privacy first
100% client-side. Your colors never leave your browser.
How to Use the Color Picker
Five steps from a rough idea to a usable value.
Choose a hue
Drag the hue slider to pick the color family. The saturation–value field updates instantly to show every shade available in that hue.
Refine saturation and brightness
Click or drag inside the square field. Moving right increases saturation, moving up increases brightness. Arrow keys nudge the handle one step at a time.
Set the alpha channel
Use the alpha slider for transparency. The preview swatch sits on a checkerboard so you always see the true result.
Read or type any format
HEX, RGB, HSL, HSV and CMYK update live. You can also type into any field — for example paste a HEX code — and every other value recalculates.
Check contrast, then copy
Confirm the color passes the WCAG level you need, then copy the format you want or export ready-made CSS, JSON or Tailwind code.
Color Picking Tips
Small habits that save time later.
Work in HSL, ship in HEX
HSL is easier to reason about — you can nudge lightness without changing the hue. Build the color in HSL, then copy the HEX value for the web.
Don't trust CMYK conversions
RGB-to-CMYK conversion is not colour-managed. It is a useful starting point for print, but your printer's profile is what actually decides the final ink values.
Check contrast before you fall in love
A beautiful accent color that fails contrast will get replaced later. Verify the ratio against your background first, then commit to it.
Frequently Asked Questions
Answers to the most common questions about color pickers.
What is a color picker used for?
A color picker is used to choose an exact color and read it back as a value you can paste into code or a design file. It is also used to convert between formats such as HEX, RGB, HSL and CMYK.
Is my color data uploaded anywhere?
No. Inar Color Picker runs entirely in your browser. Colors are processed locally and never leave your device.
What is the difference between HSL and HSV?
Both describe a color with hue, a saturation-like value and a lightness-like value. HSL's lightness runs from black through the full color to white, while HSV's value runs from black to the fully bright color. HSV is closer to how pickers are usually drawn; HSL is closer to how CSS describes colors.
What is the difference between HEX and RGB?
They describe the same thing. HEX is simply RGB written in base 16 — #f2a93b is the same color as rgb(242, 169, 59).
Why does my CMYK value look different in print?
The conversion used here is a simple mathematical one. Real print output depends on the ink, the paper and the printer profile, so a colour-managed workflow will always give different and more accurate numbers.
What is the eyedropper button?
It uses the browser's native EyeDropper API to sample a pixel anywhere on your screen. It is available in Chromium-based browsers; where it is not supported the button will tell you.
How is contrast ratio calculated?
Contrast ratio uses relative luminance, a measure of perceived brightness. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. It ranges from 1:1 (identical) to 21:1 (black on white).
Can I pick a color with a transparent alpha?
Yes. The alpha slider goes from 0% to 100%, and the preview swatch shows the transparency over a checkerboard so you can judge the real result.
Are the named colors official?
They are a curated selection of the CSS named colors supported by every modern browser. The hex value shown next to each name is what the browser actually renders.
Is the Color Picker free?
Yes. It is completely free to use, with no account, no sign-up and no usage limits.
More Inar Developer Tools
More free, privacy-friendly tools from Inar Learn — built for developers and learners.
Inar Learn