ADVERT

🌈 RGB ⇄ HSL

Convert colors between RGB and HSL with a live color swatch.

RGB ⇄ HSL Converter

Convert between HEX, RGB, and HSL color formats. Pick a color or enter values manually and copy or download the results.

Pick a Color

RGB

HSL

How to use this tool

Pick a color using the HEX input or enter RGB values manually.
Review the synchronized HEX, RGB, and HSL values as you tweak sliders.
Copy or download the results to hand off to designers or developers.

Design workflows

Translate design tokens between CSS-friendly formats in seconds.
Check hue and saturation adjustments before pushing updates to a design system.
Share color specs with marketing teams that rely on HEX while developers consume RGB/HSL.

Tips & tricks

Use the swatch as a quick visual check to catch typos.
RGB inputs clamp to 0–255 to prevent invalid CSS values.
When you need opacity, pair this tool with the RGBA converter elsewhere in the gallery.

FAQ

Why does the HEX update when I edit RGB?: All fields stay in sync so you always see the equivalent color no matter which format you edit.
Can I enter shorthand HEX codes?: Provide the full 6-character HEX value. Expand shorthand manually to keep conversions accurate.
Does it support alpha values?: This converter focuses on opaque colors. Combine with CSS rgba() notation for transparency needs.

ADVERT

More like this

Upload an image and extract dominant colors. Generate beautiful palettes for design, branding, or art.

Create linear CSS gradients and copy code instantly. Design custom gradients with multiple colors and directions.

Build coordinated light and dark theme CSS variables from a single neutral and accent color. Tune contrast and vibrancy then copy the finished tokens in seconds.

Design and preview CSS filters including blur, brightness, contrast, grayscale, sepia, saturate, and hue-rotate. Copy the CSS instantly.

Browse Google’s Material Design color palettes. View all shades, copy hex codes instantly, and preview text on background colors.

Browse the Flat UI Colors palettes (v1 & v2). View all swatches and copy hex codes instantly for use in your designs and code.

ADVERT