RGB / HEX / HSL Color Converter

How to Convert Colors

1. Select the input format: HEX, RGB, HSL, or another supported format.
2. Enter your color value. The live preview updates instantly.
3. All equivalent values in every supported format appear simultaneously.
4. Click any value to copy it.

The converter handles shorthand hex and full hex formats. For the decimal equivalent of any hex code, the Number Base Converter shows binary and decimal alongside hex. The converter handles shorthand hex (#FFF), 8-digit hex with alpha (#FF5733FF), and RGB/RGBA/HSL/HSLA values with or without the rgba()/hsla() wrapper.

Color Format Reference

When to Use Each Color Format

• HEX — use in CSS for solid colors. Short, universally supported, copy-paste friendly. The default choice for most CSS color values.
• RGB/RGBA — use when you need to manipulate color values programmatically, or when you need transparency (rgba). Easy to understand intuitively (red + green + blue).
• HSL — use in design systems and dynamic color generation. HSL is much easier to reason about than RGB: adjust the lightness to make a color lighter/darker, adjust saturation to make it more/less vivid.
• oklch — the modern recommendation for design systems (supported in all browsers since 2023). Perceptually uniform — equal changes in L always appear equally bright regardless of hue, unlike HSL.

Using HSL for Design Systems

HSL is uniquely useful for generating color variations programmatically. A brand color at hsl(220, 80%, 55%) can produce a full scale:

:root {
  --brand:       hsl(220, 80%, 55%);
  --brand-light: hsl(220, 80%, 75%);
  --brand-dark:  hsl(220, 80%, 35%);
  --brand-muted: hsl(220, 30%, 55%);
}

Adjusting only the lightness or saturation keeps the hue consistent — critical for a coherent palette. This pattern is far more maintainable than hardcoding separate HEX values for each variant.

Color Design Workflow

Color format conversion connects to the full design toolchain:

• Pick colors visually and get all format values at once
• Generate a color palette from your converted color
• Create a create a CSS gradient using the converted color values using the converted color values
• Minify your CSS after adding the converted color values

Related Tools

• Working with a palette defined in CSV? Convert to JSON for programmatic color processing. → convert color data from a CSV palette file
• Building a design system? Export your color definitions as CSV for the design team. → export color palette data to a spreadsheet
• Writing a color style guide? Document it in Markdown and convert to HTML for publishing. → document color usage in a style guide
• Passing color values in URL parameters? URL-encode the hash (#) character in hex colors. → URL-encode hex color values
• Migrating color handling from VB.NET to C#? Convert the System.Drawing.Color syntax. → convert VB.NET color code to C#