Color Converter (HEX / RGB / HSL)
Instant HEX, RGB, and HSL color code conversions.
Color Converter (HEX / RGB / HSL)
Convert between HEX, RGB, and HSL color representations with precise visual feedback.
Select & Convert Color
Color Formats & Copy
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
Color Harmony & Palettes
Complementary Color
Analogous Palette
Triadic Palette
Split-Complementary Palette
Monochromatic Palette
Shades & Tints
Tints (Adding White)
Shades (Adding Black)
What is the Color Converter and How Does It Work?
The Color Converter translates a color between HEX, RGB, and HSL formats instantly and in both directions - enter a value in any one format and see the equivalent values in the other two immediately, with a live swatch preview.
HEX and RGB are mathematically the same value in different number bases (base-16 vs base-10). HSL is calculated from RGB by finding the maximum and minimum channel values to determine lightness and saturation, and the relative channel differences to determine hue.
Maximum red channel with zero green and blue produces hue 0° (red) at full saturation and mid lightness.
Equal-ish channels with a green bias produce a desaturated green hue around 120°.
Common Real-World Use Cases
Convert a designer-provided HEX code into the RGB or HSL syntax your codebase or framework prefers.
Translate colors between design tools and code when different platforms expect different formats.
See how HSL's hue/saturation/lightness values relate to a color's underlying RGB channels.
How This Compares
Both use the same underlying workspace. This page is for when you already have a value in one format (HEX, RGB, or HSL) and just need the equivalent in another. Color Picker is better when you're starting from scratch or want to visually explore colors rather than convert an existing one.
- 1Enter a color value in the HEX, RGB, or HSL field.
- 2The other two formats convert automatically.
- 3Use the live swatch preview to confirm the color looks correct.
- 4Copy whichever format you need for your project.
- •HSL is often easier for programmatically generating color variations (e.g. lighten by adjusting only the L value).
- •RGB and HEX carry identical color information - the choice between them is purely about which syntax your tooling expects.
Frequently Asked Questions
Color & Design Tools
Design utilities for HEX to RGB/HSL conversions, color palette contrast, and color matching.
Related Calculators & Tools
Color Picker & Matcher
Select colors, extract HEX, RGB, and HSL values, and match color combinations for design projects.
Color Contrast Checker (WCAG)
Check color contrast ratios against WCAG 2.1 accessibility guidelines for AA and AAA compliance.
Color Matcher
Identify an existing color and convert it across HEX, RGB, and HSL formats, then generate a matching complementary palette and tint/shade scale from it.
Color Palette Generator
Generate harmonized color palettes including complementary, analogous, triadic, and monochromatic schemes.
Color Shade & Tint Generator
Generate lighter tints and darker shades for any base HEX color code.
Aspect Ratio Calculator
Calculate image and video aspect ratios, resize dimensions proportionally, and simplify aspect ratios.