What is the difference between HEX, RGB, and HSL?

HEX (#RRGGBB) is a 6-digit hexadecimal representation of red, green, blue values. RGB(r, g, b) uses numbers 0-255 for each channel. HSL(h, s, l) uses Hue (0-360°), Saturation (0-100%), and Lightness (0-100%) — more intuitive for designers.

How do I convert HEX to RGB?

Split the HEX code into 3 pairs of hex digits and convert each to decimal. For #1e40af: R=0x1e=30, G=0x40=64, B=0xaf=175, so RGB(30, 64, 175). Our tool does this automatically.

What is opacity/alpha in colors?

Alpha channel represents transparency (0 = fully transparent, 1 = fully opaque). In CSS, use rgba(30, 64, 175, 0.5) for 50% transparent, or HEX with alpha like #1e40af80.

What are complementary colors?

Complementary colors are opposite each other on the color wheel (hue difference of 180°). They create high contrast when used together. Example: Blue (#1e40af) and Orange (#af7a1e) are complementary.

How do I use this for Tailwind CSS?

Tailwind uses a specific color palette. Use our tool to find the closest Tailwind color to your HEX code, or use it to define custom colors in tailwind.config.js using the exact HEX values.

ToolsArena

Search tools...

Color Picker

Pick colors and convert between HEX, RGB, HSL, and HSV color formats.

Updated Mar 2026100% Private — runs in browser

Enter any hex code

HEX#1e40af

RGBrgb(30, 64, 175)

HSLhsl(226, 71%, 40%)

RGBArgba(30, 64, 175, 1)

Shades & Tints

Complementary Color

#1e40af#e1bf50

Presets

How to Use Color Picker

1
Click anywhere on the color palette to pick a color, or drag the crosshair.
2
Adjust the hue slider to change the base color.
3
Adjust the opacity slider for transparent colors.
4
Copy the color value in HEX, RGB, HSL, or HSV format using the copy buttons.
5
Enter a HEX or RGB value directly in the input to convert to all formats.

About Color Picker

Our comprehensive free color picker lets you pick any color visually and instantly get its values in all major formats: HEX, RGB, HSL, and HSV/HSB — with full alpha/opacity support for RGBA and HSLA.

Key Features

All Color Formats: Pick once and get HEX, RGB, HSL, and HSV values simultaneously.
Alpha Channel: Full opacity/transparency control with RGBA and HSLA output.
Shades & Tints: Auto-generated lighter and darker variations of your chosen color.
Complementary Colors: See complementary, analogous, and triadic color combinations.
Direct Input: Type any HEX or RGB value to convert to all other formats instantly.

Who Is This For?

Web designers picking brand colors, frontend developers converting HEX to RGB for CSS variables, Figma and Tailwind CSS users finding exact color values, and anyone building accessible, harmonious color palettes.

Privacy & Security

Runs 100% in your browser — no signup, no uploads, no data stored.