Color Converter

Convert a color from hex, rgb(), hsl(), or a common CSS color name to every common format. Space-separated rgb()/hsl() and hex without # are accepted. See a live preview swatch on the Convert tab.

  • Runs entirely in your browser
  • No data stored or sent to a server
  • Free forever — no signup
  • Instant conversion

Input and Output

Use the interactive encoder and decoder on this page to process your text.

Learn more about color conversion

How to Convert Colors Between Formats

Color Conversion

Supported Input Formats

  • Hex: #RGB, #RRGGBB, #RRGGBBAA, or without #
  • RGB: comma or space-separated rgb(59, 130, 246), rgb(59 130 246), or with / alpha
  • HSL: comma or space-separated hsl(217, 91%, 60%) or hsl(217 91% 60%)
  • CSS names: common names like tomato, navy

When Developers Use This

Convert design handoff colors to CSS values, translate hex palette values to HSL for theming, or double-check rgba alpha channels during UI debugging. The live swatch updates as you type valid input.

Common Mistakes

  • Assuming HSL and HSV are the same — CSS uses HSL
  • Forgetting alpha channel when matching design opacity
  • Using 0-255 RGB values in hsl() — HSL uses degrees and percentages

Developer Tips

  • Use HSL for theme variables — adjust lightness without shifting hue
  • Click Run for copy-ready output in all formats
  • CSS custom properties: store HSL components for easy dark mode variants

Frequently asked questions

Does the preview update before I click Run?

Yes. The swatch updates live as you type a valid color. Click Run for the full format breakdown and copy-ready CSS.

Are all CSS color names supported?

Common named colors are supported. For uncommon names, use hex, rgb(), or hsl() instead.