Which color codes does it give me?

HEX, RGB, HSL, HSV, CMYK and OKLCH for the same color, ready to copy.

Can I pick a color from my screen?

Yes, with Pick from screen in Chromium-based browsers such as Chrome and Edge. The button is hidden when your browser does not support it.

Does it check if text is readable on the color?

Yes. It shows the WCAG contrast ratio against white and black and marks it AA large, AA, AAA or Fails. It also suggests complementary, triadic, analogous and monochromatic colors.

Yes. Every tool is free to use, with no account and no credit card. The work runs on your device rather than on our servers, which is what keeps it free to run.

Does it work on mobile?

Yes. It runs in current mobile browsers on iOS and Android, with nothing to install.

🎨

Free Color Picker & Palette Generator

Pick colors, convert between HEX/RGB/HSL, and generate harmonious palettes.

Runs in your browserNo sign-up, no pop-upsNo login requiredFree forever

Works offline once loaded

Color picker

HEX

HSV

h217°

s76%

v96%

display only

RGB

HSL

More formats

Alpha100%

HEX8#3b82f6ff

RGBrgb(59 130 246)

HWBhwb(217 23% 4%)

CMYKcmyk(76%, 47%, 0%, 4%)

OKLCHoklch(62.3% 0.188 259.8)

SwiftUIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1)

Android0xFF3B82F6

FlutterColor(0xFF3B82F6)

WCAG contrast

Closest named color: dodgerblue · Black text is easier to read here (5.71:1)

Text on white3.68:1AA large

Text on black5.71:1AA

Text on #ffffff3.68:1AA large

Compare with another color

Shades & tints (50–950)

Name

Color palette

Complementary

#3b82f6

#f6af3c

Triadic

#3b82f6

#f63c83

#83f63c

Analogous

#3ce0f6

#3b82f6

#523cf6

Monochromatic

#073c92

#0a5adb

#3b82f6

#85b2f9

#cee0fd

Common uses

Color Picker for Web DesignPick and generate colours for your website — get HEX, RGB, and HSL values plus harmonious palettes.
Color Picker for BrandingBuild your brand colour palette — pick primary, secondary, and accent colours that work together.
Color Picker for Social MediaCreate eye-catching colour palettes for social media posts, stories, and profile designs.
Color Picker for Print DesignPick colours for printed materials — flyers, business cards, brochures — with accurate colour previews.
Color Picker for PresentationsDesign slide colour schemes — pick readable text colours, chart palettes, and consistent accent shades.

How It Works

Everything runs directly in your browser using hand-written conversion math — no color library, no server round-trip. You pick a color via the browser's native color input or the EyeDropper API, and the tool instantly converts it into six formats while also computing WCAG contrast ratios and generating harmony palettes.

1
Color input via native API
You choose a color through the browser's built-in <input type="color"> widget, or — in Chromium-based browsers — the EyeDropper API lets you sample any pixel on your screen. Both paths return a hex string that becomes the single source of truth.
2
Hand-written format conversions
The tool converts the hex value into RGB, HSL, HSV, CMYK, and OKLCH using its own math functions (no external library). The OKLCH conversion linearizes the sRGB channels, applies the OKLab cube-root matrix, then derives chroma and hue angle — matching modern CSS Color Level 4 output.
3
WCAG contrast ratio calculation
Relative luminance is computed from the linearized RGB channels using the WCAG 2.x formula. The tool then calculates contrast ratios against pure white and pure black and labels them AA-large, AA, AAA, or Fail according to the WCAG thresholds (3:1, 4.5:1, 7:1).
4
Harmony palette generation and local save
Complementary, triadic, analogous, and monochromatic swatches are derived by rotating or stepping the HSL hue and lightness values mathematically. Saved palettes are written to localStorage in your browser — nothing leaves your device.

Related Tools

🎨

Random Color Generator

Generate random colours one at a time or as a palette of five, lock the ones you like, copy HEX, RGB or HSL values and export the palette as PNG or CSS.

Try it

🎨