sRGB · CSS-ready

Color Converter

Edit any field — HEX, RGB, or HSL — and all other formats update instantly with a live color preview.

HEX

RGB

HSL

How to Convert Colors

  1. 1Edit any color field — type a HEX code like #3366ff, or adjust the RGB or HSL sliders.
  2. 2All formats sync instantly — change one value and HEX, RGB, and HSL all update in real time with a live preview swatch.
  3. 3Copy to clipboard — click "Copy HEX", "Copy rgb()" or "Copy hsl()" to paste directly into your CSS or design tool.

HEX vs RGB vs HSL — when to use each?

HEX (#3366ff) is the most common format in web development and design tools. RGB (rgb(51, 102, 255)) is useful when you need to manipulate individual channels programmatically or use CSS rgba() for transparency. HSL (hsl(220, 100%, 60%)) is the most human-readable format — H = hue (0–360°), S = saturation, L = lightness. It's ideal for building color palettes and understanding color relationships.

What is sRGB?

sRGB is the standard color space for the web. All conversions performed here are within the sRGB gamut, which matches standard monitors and ensures CSS color values are accurate across devices. Wide-gamut formats (Display P3, Rec. 2020) are outside the scope of this tool.

Frequently Asked Questions

HEX is just RGB written in base-16 (hexadecimal). #3366ff = R:0x33=51, G:0x66=102, B:0xFF=255. Both represent the exact same color — HEX is more compact, RGB is easier to read numerically.

HSL maps to how humans think about color: hue (color wheel position), saturation (vivid vs. gray), and lightness (dark vs. light). This makes it easy to create consistent palettes — e.g., keep the same H and S, vary L to get shades of a brand color.

This tool handles opaque colors (RGB, no alpha). For transparency, copy the output and append the alpha value manually: rgba(51, 102, 255, 0.5) or hsla(220, 100%, 60%, 0.5). CSS also accepts 8-digit HEX: #3366ff80 for 50% opacity.