Peregrine falcon logoPeregrine Dev

Color Picker — HEX, RGB, HSL Converter Online Free

Pick any color and see its HEX, RGB, HSL, and CMYK values with a shade palette and complementary color. Instantly. No sign-up required.

HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
CMYKcmyk(76%, 47%, 0%, 4%)

Complementary Color

#F6AF3Crgb(246, 175, 60)

Shade Palette

Lighter

Darker

How to color picker

  1. 1Use the native color picker or type a color value in any format (HEX, RGB, HSL)
  2. 2View all color format values (HEX, RGB, HSL, CMYK) updated in real time
  3. 3Click 'Copy' next to any format to copy the value to your clipboard
  4. 4Explore the complementary color and lighter/darker shade palette below

About This Tool

A color picker is an essential tool for web developers, designers, and anyone working with digital colors. It lets you select a color visually or enter it in any format and instantly see the equivalent values in HEX, RGB, HSL, and CMYK — the four most common color representations used in web development, graphic design, and print production.

This free color picker accepts input in any format and auto-detects whether you are entering a HEX code, RGB values, or HSL values. It displays a large color preview swatch alongside the complementary color (the opposite on the color wheel). A shade palette shows five lighter and five darker variations of your selected color, which is useful for creating cohesive color schemes and ensuring sufficient contrast for accessibility.

All calculations happen locally in your browser. No data is sent to a server, and there are no usage limits or account requirements. The tool works on any device with a modern browser.

Frequently Asked Questions

The tool supports HEX (#ff5733), RGB (rgb(255, 87, 51)), HSL (hsl(14, 100%, 60%)), and CMYK values. You can input in any of these formats and the tool will display all four.

A complementary color is the color on the opposite side of the color wheel. It is calculated by rotating the hue by 180 degrees in HSL color space. Complementary colors create high contrast and visual impact when used together.

The tool generates five lighter shades by progressively increasing the lightness in HSL color space, and five darker shades by decreasing it. This creates a smooth gradient from light to dark for your chosen hue.

CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in print production. The conversion shown here is an approximation — for precise print colors, use a color management system with ICC profiles.

No. All color calculations happen locally in your browser. No data is sent to any server.

Related Tools