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

Color Picker

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

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 Color Picker is a comprehensive color tool for designers and developers. Pick any color from a visual color palette and instantly get the values in all major color formats: HEX (#1e40af), RGB (30, 64, 175), HSL (226°, 71%, 40%), and HSV/HSB (226°, 83%, 69%).

The tool includes a color gradient picker, hue slider, and opacity/alpha channel control for full RGBA and HSLA support. It also generates lighter and darker shades of your chosen color, complementary colors, analogous colors, and the full color palette — perfect for building a design system or choosing accessible color combinations.

You can also input any HEX code or RGB values directly to convert between formats. This tool is built for Tailwind CSS, CSS custom properties, Figma, and any design or development workflow where accurate color values are needed.