Convert HEX, RGB and HSL colour codes with a live colour preview — instant lookup for designers and developers.
This tool runs entirely in your browser — no data is sent to our servers. If JavaScript is disabled, the fully interactive version will not run; enable JavaScript to compute results.
Designers and developers move between colour formats all day. A brand book might give you a HEX (#1f7ae0). Photoshop and Illustrator default to RGB. CSS often uses HSL because it makes adjustments easier — "the same hue but 10% darker" is a single-character change in HSL and a head-scratch in HEX. All three formats describe the same colour. They just package the information differently, and each one is convenient for a different job.
HEX is a six-digit hexadecimal representation of red, green and blue channels (00 to FF each, where FF is 255 in decimal). RGB is the same three channels in plain decimal (0 to 255 per channel). HSL is geometrically different: it represents a colour as a point on a cylinder, with hue as the angle around the wheel (0 to 360 degrees, where 0 is red, 120 is green, 240 is blue), saturation as the distance from the central grey axis (0% is grey, 100% is fully vivid), and lightness as the position along the vertical axis (0% is black, 100% is white, 50% is the pure hue). HSV/HSB is a close cousin that uses "value/brightness" instead of lightness; designers often prefer HSL because tonal adjustments are more linear.
HEX has two shorthand forms. The three-digit form (#f00) expands by repeating each digit, so #f00 is identical to #ff0000 — pure red. The eight-digit form adds an alpha channel for transparency (#ff0000ff is fully opaque red, #ff000080 is roughly 50% transparent red). The shorthand only works when each channel happens to use a repeated digit, which is why #fa1b3c cannot be shortened. CSS named colours (red, rebeccapurple, papayawhip, dodgerblue and about 140 others) map to specific HEX values — useful for prototyping but generally discouraged in production design systems because the names are not consistent enough to predict.
Screens use additive RGB (red + green + blue light combine to make white), while printers use subtractive CMYK (cyan, magenta, yellow and black ink combine on white paper to reduce reflected light). A colour that looks vivid on screen can dull dramatically when printed, particularly bright cyans, oranges and purples that fall outside the printable gamut. Professional print work uses a CMYK colour profile from the start; for desk publishing, a soft-proof step in Photoshop or InDesign catches the worst surprises. A separate quirk is gamma correction: sRGB values are stored non-linearly to match human visual perception, which means averaging two HEX values does NOT give you their perceptual midpoint. Tools that blend colours correctly do the maths in a linear colour space and then convert back.
For interfaces, accessibility lives or dies on contrast. The WCAG 2.x guidelines require a contrast ratio of at least 4.5:1 between text and background for normal body copy, and 3:1 for large text (roughly 18pt or 14pt bold). Important interactive controls should meet 3:1 against adjacent colours. The ratio is computed from the relative luminance of the two colours, so a perfectly readable dark grey on white can fail when moved to a tinted background. This calculator converts between HEX, RGB and HSL live and shows a preview swatch; pair it with a dedicated contrast checker before shipping production UI.
Yes — they are different notations for the same RGB values. HEX is just the channel values written in hexadecimal instead of decimal. #ff0000 and rgb(255, 0, 0) are identical pixels on the screen.
Because monitors have different colour calibrations, panel technologies (IPS, OLED, VA), brightness settings and ambient lighting. Professional design work uses calibrated monitors and colour profiles (sRGB, Display P3, Adobe RGB) to keep colours consistent across devices, but on uncalibrated consumer screens variation of 10–20% is normal.
The HEX/RGB/HSL conversion is for opaque colour. For transparency, append a two-digit alpha to the HEX (#rrggbbaa), or use rgba()/hsla() in CSS with an alpha value between 0 and 1. The RGB and HSL channels remain unchanged when alpha is added.
Both use hue and saturation the same way. HSL has lightness (50% is the pure colour, 100% is white, 0% is black). HSV (sometimes called HSB) has value/brightness (100% is the pure colour, 0% is black; pure white is at saturation 0 and value 100). HSL is friendlier for picking light/dark variants; HSV is closer to how a paint-mixing artist thinks.
Yes — modern browsers recognise about 140 named colours like crimson, slategray and papayawhip, plus the special transparent and currentColor keywords. They are handy for prototyping but unpredictable for design systems, because the names give no clue to brightness or contrast. Most teams convert them to HEX before shipping.
Because CMYK ink on paper covers a smaller colour gamut than RGB light on a screen. Bright neons, deep blues and vivid oranges are the usual casualties. Design in sRGB, soft-proof in a print profile (such as ISO Coated v2) before sending to the printer, and ask for a press proof for anything brand-critical.
The Color Converter lives alongside Age Calculator, Date Convert to Major Calendars, Date Count Calculator on the Productivity page. That landing page collects every productivity tool Dailiyo publishes, plus the editorial notes on formula sources, review cadence and how each result should (and should not) be interpreted. If a related productivity calculation isn't yet in the collection and you'd like to see it, drop a line via the contact page — the editorial team reviews every request and prioritises tools that come up most often in reader questions.