Color Picker & Converter

Pick any color and convert it instantly between HEX, RGB, HSL, and HSV. Adjust opacity, explore complementary colors, and copy any format with one click.

#2563EB
Dark · 38% luminance
#2563EB
#
221°
83%
53%
100%

Quick presets

Color Formats

HEX#2563EB
HEX+A#2563EBFF
RGBrgb(37, 99, 235)
RGBArgba(37, 99, 235, 1.00)
HSLhsl(221, 83%, 53%)
HSLAhsla(221, 83%, 53%, 1.00)
HSVhsv(221, 84%, 92%)
CSScolor: #2563EB;

Color Info

Perceived brightness

Dark38%

HSV breakdown

H221°  S84%  V92%

Complementary color

Current

#2563EB

Complement

#EBAC24

About this tool

A browser-only color picker and converter that updates all formats in real time as you adjust the color. Use the native color picker for a quick visual selection, the Hue / Saturation / Lightness sliders for precise control, or type a hex value directly. An Opacity slider adds alpha to every format simultaneously.

Every output format — HEX, HEX+A, RGB, RGBA, HSL, HSLA, HSV, and a ready-to-paste CSS declaration — has its own copy button. The Color Info panel shows perceived brightness, HSV breakdown, and the complementary color which you can apply with one click. Recent Colors tracks the last 12 colors you used during the session.

How to use

1

Pick a starting color

Click the colored square to open the system color picker for a quick visual selection, or type a 6-digit hex value directly into the Hex input field. You can also click any preset swatch.

2

Fine-tune with sliders

Use the Hue, Saturation, and Lightness sliders to adjust the color precisely. Drag the Opacity slider to add transparency — all formats update immediately to reflect the alpha value.

3

Copy the format you need

The right panel shows all color formats live. Click the Copy button next to any row — HEX, RGB, HSL, HSV, or the ready-to-paste CSS declaration — to copy it to your clipboard.

4

Explore and experiment

Use Random to discover new colors, click Use on the Complementary swatch to switch to the opposite hue, or revisit any previous color from the Recent Colors history.

Related tools

Image to WebP

Convert images to WebP — a modern format that pairs well with CSS color theming and lightweight UI design.

Base64 Encoder / Decoder

Encode images or SVG icons to Base64 data URIs — useful when embedding colored SVG icons directly in CSS.

Regex Tester

Test regular expressions — handy for writing patterns that validate or extract hex color codes from source files.

Hash Generator

Generate MD5, SHA-256 and SHA-512 hashes — useful alongside color tokens in design-system build pipelines.

Frequently asked questions

Common questions about color formats, alpha channels, and how to use the color picker.

All three represent the same color — they just use different notation. HEX (#2563EB) encodes red, green, and blue as two-digit hexadecimal values and is the most common format in web CSS and design tools. RGB (rgb(37, 99, 235)) uses decimal values from 0–255 for each channel. HSL (hsl(225, 84%, 53%)) describes the color as Hue (0–360°), Saturation (0–100%), and Lightness (0–100%), which is more intuitive for designers because adjusting lightness or saturation doesn't change the hue.

HSV (Hue, Saturation, Value) and HSL (Hue, Saturation, Lightness) both describe colors using a hue angle and two other dimensions, but they model the 'brightness' component differently. In HSV, V=100% is a fully saturated vivid color, while V=0% is black. In HSL, L=50% is the fully saturated color, L=0% is black, and L=100% is white. HSV is often preferred in color pickers because it matches how artists think about tints and shades. HSL is more common in CSS.

The alpha channel controls a color's opacity, from 0% (fully transparent) to 100% (fully opaque). In CSS you can use rgba() or hsla() with an alpha value between 0 and 1, or use an 8-digit HEX code where the last two digits are the alpha in hexadecimal (FF = 100% opaque, 80 = ~50% transparent, 00 = fully transparent). The HEX+A format produced by this tool is supported in all modern browsers.

A complementary color is the color directly opposite on the color wheel — it has a hue 180° away from the original. Complementary pairs create maximum contrast and are widely used in design for accents, call-to-action buttons, or highlighting. For example, the complement of blue (#2563EB, hue 225°) is orange (hue 45°). This tool calculates the complement by rotating the hue by 180° while keeping the same saturation and lightness.

Copy the value from whichever format matches what you need. Use HEX or RGB for solid colors in CSS (color: #2563EB). Use RGBA or HSLA when you need transparency (background: rgba(37,99,235,0.5)). The CSS row produces a ready-to-paste color declaration including the property name. For Tailwind or other utility frameworks, copy the HEX value and reference it in your config or as an inline style.

The native browser color picker (the small colored square) lets you visually select a color but it only inputs a 6-digit HEX value — it doesn't support alpha. That's why this tool provides separate HSL sliders and an opacity slider so you can fine-tune every dimension precisely. The native picker is useful for a quick visual selection; use the sliders or the hex input field for precise values.

No. All color conversion and calculation happens entirely in your browser using JavaScript math. No data is sent to any server. The tool works offline once the page has loaded.