Color Picker & Palette Designer

Pick a color, convert it between formats, check WCAG contrast, and generate harmony palettes.

RGB Controllers
R: 34
G: 197
B: 94
HSL Controllers
H: 142°
S: 71%
L: 45%
HEX#22C55E
RGBrgb(34, 197, 94)
HSLhsl(142, 71%, 45%)
CMYKcmyk(83%, 0%, 52%, 23%)
CSSbackground-color: #22C55E;

WCAG 2.1 Contrast & Readability Check

Contrast on White backgroundContrast Ratio: 2.28:1
Normal Text (AA)FAIL
Normal Text (AAA)FAIL
Large/Bold Text (AA)FAIL
Large/Bold Text (AAA)FAIL
Contrast on Black backgroundContrast Ratio: 9.22:1
Normal Text (AA)PASS
Normal Text (AAA)PASS
Large/Bold Text (AA)PASS
Large/Bold Text (AAA)PASS

Color Harmony Schemes

Complementary Harmony
#22C55E
#C42188
Analogous Harmony
#37C421
#22C55E
#21C4AE
Triadic Harmony
#5D21C4
#22C55E
#C45D21
Monochromatic Shades
#0B411F
#16833E
#22C55E
#51E186
#92EDB3
26.176 viewsYour data is processed in your browser and never sent to a server.

Related tools

JSON Formatter
Validate, beautify and minify JSON online. Everything runs in your browser — free and private.
Base64 Converter
Encode or decode Base64 text instantly in your browser. Free and private.
URL Encoder
Encode or decode URLs and query strings instantly in your browser. Free and private.
JWT Decoder
Decode JSON Web Token (JWT) header and payload instantly in your browser. Free, private, no signature verification, nothing sent to a server.

Get to know this tool

Color Picker lets you pick a color with your browser's native color dialog and instantly read its HEX, RGB, and HSL values for your designs and code.

What is a Color Picker and Why Do You Need It?

A Color Picker is a small but essential utility for front-end developers, UI/UX designers, and anyone working with colors in CSS, design tools, or graphics software. Instead of converting color codes by hand, this tool opens your operating system's native color picker (the same dialog used by <input type="color"> in your browser), and instantly converts your selection into the HEX, RGB, and HSL formats you need.

Key Features

  • Native Color Selector: Click the color swatch to open your browser's built-in color picker, complete with a hue/saturation canvas, color spectrum, and (on most browsers) an eyedropper to sample any color on your screen.
  • Multiple Color Format Support: Instantly converts your selection into the most common web and design formats:
    • HEX: The classic six-character hexadecimal representation used universally in CSS and HTML (e.g., #22C55E).
    • RGB: Represents colors using Red, Green, and Blue intensity values (e.g., rgb(34, 197, 94)).
    • HSL: Represents colors using Hue, Saturation, and Lightness percentages, making it intuitive to adjust brightness manually (e.g., hsl(142, 71%, 45%)).
  • Live Swatch: The selected color fills the picker swatch immediately, so you always see exactly what you've chosen.
  • Instant Copying: A copy button next to each format saves that code to your clipboard with a single click.
  • No Installation Required: Runs entirely in your browser with 100% privacy — nothing is uploaded or stored.

How to Use the Color Picker?

  1. Click the color swatch to open your browser's native color picker.
  2. Choose a color using the spectrum, sliders, or your browser's eyedropper (if available), then confirm your selection.
  3. The HEX, RGB, and HSL values update instantly below the swatch.
  4. Click the copy icon next to the format you need.
  5. Paste it directly into your CSS files, design tool, or codebase.

Frequently Asked Questions (FAQ)

What is HSL and why do web designers prefer it?

HSL stands for Hue, Saturation, and Lightness. Unlike RGB, which is built for screens, HSL is built for humans. It is much easier to make a color slightly lighter (by increasing the Lightness percentage) or more muted (by lowering the Saturation percentage) using HSL than by manually recalculating RGB values.

Are colors rendered consistently across screens?

HEX, RGB, and HSL are standard web color formats, but the actual appearance can vary slightly depending on the user's screen calibration and panel technology (IPS, OLED, etc.).

Does this tool support shorthand HEX codes like #fff?

Yes. Three-character shorthand HEX values are automatically expanded to their full six-character equivalent before conversion.