RGB to HEX Converter (With HSL & CSS Output)

Convert RGB color values into HEX format instantly. Adjust red, green, and blue sliders or enter numeric values to see the color update in real time.

The tool also shows matching HSL values and a ready-to-use CSS declaration.

How It Works

Set your RGB values between 0 and 255 for each channel:

• R — Red
• G — Green
• B — Blue

As you adjust the sliders, the preview updates instantly. The converter calculates:

• HEX — Example: #228FCB
• RGB — Example: rgb(34, 143, 203)
• HSL — Example: hsl(201, 71%, 46%)
• CSS — Example: color: #228FCB;

Example

• R: 34
• G: 143
• B: 203
• HEX Output: #228FCB

Features

• Real-time color preview
• Slider and numeric input support
• Automatic HEX conversion
• Live HSL calculation
• Copy buttons for each format
• Ready-to-use CSS snippet

All calculations run locally in your browser using JavaScript. No requests are sent to a server.

When to Use RGB vs HEX

• RGB is common in design tools and dynamic styling.
• HEX is widely used in CSS and web development.
• HSL is useful when adjusting lightness and saturation.

This converter lets you move between formats without manual math.

Fast and Private

• No backend processing
• No saved color values
• No account required

Adjust the sliders, copy the format you need, and keep building.