Color Converter

Color Converter

Convert between HEX, RGB, HSL, and HSV color formats instantly. Whether you are writing CSS, designing in Figma or Photoshop, or building a brand color palette, this converter translates any color value into every other format so you always have the exact code your tool expects.

How Color Conversion Works

All screen color models encode colors as three numerical components representing the same underlying color.

RGB to HEX — convert each of the three 0-255 decimal values to a 2-digit hex pair and concatenate with a # prefix. Example: rgb(255, 87, 51) becomes FF (255), 57 (87), 33 (51) = #FF5733.

RGB to HSL — normalize each channel to 0-1, find the max (M) and min (m) values, then: Hue = angle based on which channel is max, Saturation = (M - m) / (1 - |2L - 1|), Lightness = (M + m) / 2. Example: rgb(255, 87, 51) converts to hsl(11, 100%, 60%).

HEX to RGB — parse each 2-character hex pair as a base-16 number. #1A8FE3 gives R = 0x1A = 26, G = 0x8F = 143, B = 0xE3 = 227.

Worked Examples

Example 1 — Brand color audit. A brand guideline specifies Pantone 485 C, roughly #DA291C. A developer needs the CSS rgb() version for a gradient: rgb(218, 41, 28). A designer needs the HSL version to create a lighter tint: hsl(4, 76%, 48%). Increasing lightness to 70% gives hsl(4, 76%, 70%) = a salmon pink tint, all from the same original hex.

Example 2 — Accessibility check. A button uses #767676 text on a #FFFFFF background. Converting to RGB gives rgb(118, 118, 118) vs rgb(255, 255, 255). The relative luminance of #767676 is about 0.216 and white is 1.0, giving a contrast ratio of 4.54:1 — just barely passing WCAG AA for normal text (minimum 4.5:1).

Example 3 — Dark mode palette generation. A UI uses #0057B8 (HSL: 214, 100%, 36%) as its primary blue on light backgrounds. For dark mode, keep the hue at 214, keep saturation at 100%, and raise lightness to 60% to get #3399FF — a visibly lighter blue that maintains the brand hue but works on dark surfaces.

Reference Table

When to Use

• Copy a HEX color from a design file and need the rgb() or hsl() version for CSS variables or Tailwind config.
• Generate color palette shades by adjusting lightness in HSL while keeping hue and saturation fixed.
• Check whether two colors in different formats are actually the same color before finalizing a design system.
• Convert a Photoshop-exported hex value to RGBA with an alpha channel for CSS overlay effects.
• Match a web color to a print specification by converting to the closest CMYK equivalent for a printer.

Common Mistakes

1. Using 3-digit HEX as if it were 6-digit. #F53 is shorthand for #FF5533, not #F05030. Each digit in a 3-digit hex code is doubled, so only use the shorthand when both digits of each channel pair are identical.
2. Treating HSL lightness and HSV value as the same thing. A color at HSL lightness 50% and HSV value 100% look very different — HSL 50% is a fully saturated midtone, while HSV value 100% is the brightest possible shade of that hue. Mixing up these values when switching tools produces wrong colors.
3. Ignoring alpha channel in RGBA conversions. Converting rgba(255, 87, 51, 0.5) to HEX requires 8 digits: #FF573380. Dropping the alpha produces #FF5733, which is fully opaque — a completely different visual result on any non-white background.
4. Rounding errors accumulating across multiple conversions. Converting RGB to HSL and back can introduce 1-unit rounding errors (e.g., rgb(255, 87, 51) might round-trip to rgb(255, 86, 51)). Store original values and only convert once before use.

Real-World Applications

CSS custom properties use HSL well because generating a complete palette from one base color is straightforward — define --brand-hue: 214 and compute all shades by varying lightness from 10% to 90%. Design systems at companies like GitHub, Stripe, and Atlassian publicly document their color tokens in both HEX (for static references) and HSL (for programmatic generation). WCAG contrast calculations require converting any color format to relative luminance, which is derived from linear RGB values, making this converter a practical step in accessibility audits.

Tips

1. Memorize the 6 corner colors: #FF0000 red, #FFFF00 yellow, #00FF00 green, #00FFFF cyan, #0000FF blue, #FF00FF magenta. Every other hue sits between two of these on the color wheel.
2. To lighten any color without changing its hue, convert to HSL and raise the L value. To darken it, lower the L value. Keep H and S unchanged.
3. Any HEX color where all three pairs are equal (#333333, #AAAAAA, #F5F5F5) is a shade of gray. The higher the value, the lighter the gray.
4. Use CSS custom properties — --brand-color: #FF5733 — to define a color once and reuse it. Changing one value updates the whole stylesheet.
5. For dark mode design, avoid pure #FFFFFF text on pure #000000 backgrounds. Try #E8E8E8 on #1A1A1A (HSL lightness ~91% on ~10%) to reduce eye strain with essentially the same contrast ratio.
6. Eight-digit hex codes add an alpha channel as the final two digits: #FF573300 is fully transparent and #FF5733FF is fully opaque. Values like #FF573380 give roughly 50% opacity.