palette

Color Converter

Convert colors between HEX, RGB, and HSL instantly — with live preview.

HEX
#
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)

How to Use

  1. 1
    Pick a color

    Click the color picker swatch to open the native color chooser and select any color visually.

  2. 2
    Enter any color format manually

    Type a HEX value, or adjust R/G/B or H/S/L numbers directly — all fields are editable and synced.

  3. 3
    See all formats instantly

    HEX, RGB, and HSL values update in real time as you interact with any input or the color picker.

  4. 4
    Copy any format

    Click the copy button next to the format you need to copy it straight to your clipboard.

Common Use Cases

code

Web Development

Convert between HEX and RGB to match the color format required by your CSS properties, SVG attributes, or JavaScript canvas APIs.

style

Design Systems

Translate brand palette colors from design tools like Figma (HEX) to HSL for consistent theming across your design system tokens.

variable_insert

CSS Variables

Get HSL values to define flexible CSS custom properties with adjustable lightness — perfect for dark mode and dynamic theming.

palette

Brand Colors

Verify and document brand color values in multiple formats for brand guidelines, developer handoffs, and asset specifications.

Related Tools

auto_fix_high
Smart Text Cleaner Remove extra spaces, fix line breaks, and clean formatting.
arrow_forward
text_fields
Word Case Swap Convert text between UPPER, lower, Title Case and more.
arrow_forward
counter_1
Character Counter Count characters, words, sentences, and estimate reading time.
arrow_forward

Frequently Asked Questions

What color formats does this tool support?

The tool supports HEX (hexadecimal), RGB (red, green, blue), and HSL (hue, saturation, lightness) — the three formats most commonly used in web development and design.

How do I convert HEX to RGB?

Enter or paste your HEX value in the HEX field, or pick the color with the color picker. The RGB values update instantly. Click the Copy button next to RGB to copy the result.

What is HSL and why is it useful?

HSL stands for Hue, Saturation, Lightness. It is more intuitive than RGB for adjusting colors: you can change brightness or vibrancy without affecting the base hue. HSL is widely used for CSS custom properties and theming.

Is my color data sent to a server?

No. All conversions happen entirely in your browser. Your color data is never sent to our servers.

Can I enter RGB or HSL values manually?

Yes. All input fields are editable. Type any RGB channel value (0–255) or HSL value (H: 0–360, S/L: 0–100) and the other formats will update immediately.