We use cookies.This website uses essential cookies to operate core features. With your consent, we also use analytics cookies to understand traffic and improve the service. For more details, see our .
We use cookies.This website uses essential cookies to operate core features. With your consent, we also use analytics cookies to understand traffic and improve the service. For more details, see our .
Was this tool helpful to use?
Your feedback helps us make it better
An essential two-way color converter for designers and developers to instantly switch between RGB, HSL, and Hex color codes with pinpoint accuracy.
Overview
Understand what the tool solves, how it works, and the boundaries of its data.
Use a six-digit HEX color or adjust red, green, and blue channels to see a color preview and the corresponding values. You can also set hue (H), saturation (S), and lightness (L) to generate RGB and HEX. The page shows six-digit uppercase HEX, integer RGB channels from 0 to 255, and HSL controls from 0–360° and 0–100%. It can copy the RGB string, individual HSL values, or a combined text summary.
HEX and RGB directly represent sRGB channel values. CSS HSL is another coordinate system for describing sRGB: hue selects an angle around the color wheel, saturation describes distance from neutral gray, and lightness runs from black through the color to white. Under the standard model, red is HSL 0°, 100%, 50%, while green is 120°, 100%, 25% for a darker shade.
There is a behavior caveat for RGB/HEX-to-HSL: the page’s forward conversion uses an HSV-style saturation value while labeling it S in an HSL display. For example, entering #3B82F6 displays approximately H 217°, S 76%, L 60%; standard CSS HSL saturation for the same color is about 91%. The reverse HSL-to-RGB direction interprets S as HSL saturation. That means using the displayed forward HSL values in CSS can produce a different color. W3C CSS Color defines the standard HSL meaning and conversion.
Guide
Follow the workflow and verify inputs and outputs with practical examples.
For a known color, enter a six-digit value such as #FF0000. Alternatively, adjust the R, G, and B sliders. Review the preview to confirm the input was recognized.
Read the HEX and RGB output. The HSL controls are useful for exploring hue, saturation, and lightness, but the RGB/HEX-to-HSL saturation caveat above means the displayed S may not match standard CSS HSL for some colors.
Copy RGB for a functional notation string or HEX for a compact color token. The combined copy option includes RGB, HEX, and the displayed HSL labels; it is a summary, not a ready-made CSS hsl() declaration.
Set H, S, and L to explore a color and read the generated RGB/HEX. If you need a standards-sensitive CSS value, independently check the HSL coordinates using the standard model before shipping them.
Use cases
See how the tool fits into real work and everyday tasks.
Paste a known HEX color and copy its RGB channel string for a design note or development ticket. Keep the HEX value with it so reviewers can compare the original swatch.
Adjust HSL controls to preview alternate colors, then retain the generated HEX or RGB value as a candidate. Verify the chosen color in the target design system before adoption.
Copy the combined summary to communicate the current color state. Clarify whether the receiving workflow expects RGB, HEX, or standards-compliant CSS HSL.
Q&A
Find concise answers to common questions and confusing cases.
They are different representations when converted correctly. This page’s forward HSL saturation caveat can make the displayed HSL numbers describe a different color if interpreted as standard CSS HSL.
At zero saturation, hue does not affect the gray. The interface displays a numeric hue value even though no hue is perceptible.
The copied HSL summary uses labels such as H: 120°, S: 100%, L: 25%, not a CSS function. More importantly, verify the saturation with standard CSS HSL because forward conversion can show an HSV-style value.
No. It works with six-digit HEX and three RGB channels; it has no alpha control. Preserve transparency separately if your input uses an alpha channel.
Notes
Review scope, result limitations, and important precautions before use.
The RGB/HEX-to-HSL direction can report HSV-style saturation under an HSL label. For #3B82F6, the page displays about 76% saturation, while the standard HSL value is about 91%. Its reverse HSL-to-RGB direction uses standard HSL interpretation, so round-tripping can change the color. Check standard CSS HSL independently for CSS declarations, design tokens, or automated color data. Values are integer-rounded, and this converter does not handle alpha transparency, display calibration, or print color profiles.
Related
Discover related tools, collections, and available API capabilities.