Colour Converter
HEX / RGB / HSL / HSV conversion with shades, palettes and contrast advice
Preview
Format representations
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217.22, 91.22%, 59.8%)
HSV
hsv(217.22, 76%, 96%)
Properties
- Perceived luminance122 / 255
- Light or darkDark
- Nearest named colourNo close named colour
- Grayscale value#7a7a7a
Shade scale (light → dark)
e7effeb6d0fc85b1f95492f72473f50a5adb0846ab06327a031e49
Analogous palette
Contrast suggestion
Recommended foreground text colour on this background
Last updated: 2026-10-10
About this tool
A designer hands you a HEX value but you want HSL so you can adjust lightness in CSS; or you pick a colour from a wheel and need it as a hex code for the build. This tool shows all four common formats at once, and then answers the questions that usually follow: how bright is it, what should the text colour be, and what does a full palette look like.
Features
Four-way conversion
HEX for stylesheets, RGB for screen work, HSL for adjusting lightness and saturation, HSV as the model behind most colour pickers - all four shown at once.
Forgiving input parsing
Accepts #f80 shorthand, #rrggbbaa with alpha, rgb(255,136,0), rgba(...), hsl(32,100%,50%) and bare hex without the hash - paste straight from a design file.
Built-in colour picker
A native picker lets you sample a colour from screen or nudge one on the wheel - useful when you have no design file to work from.
Perceived luminance and light/dark
Luminance is computed with the ITU-R BT.601 weighting and used to classify a colour as light or dark, which is the basis for choosing a text colour.
Shade scales and palettes
Expand a brand colour into a nine-step shade scale, or rotate the hue at fixed intervals for an analogous palette - ready to use as CSS variables.
Contrast suggestions
Recommends a readable foreground text colour from the background’s brightness, avoiding problems like dark text on a dark button.
How to use
- 1
Enter a colour
Type any supported format, or pick one with the colour picker. Every result updates in real time.
- 2
Copy the format you need
Find your target format under "Format representations" and copy it straight into your code or design tool.
- 3
Check the properties
Use luminance and the light/dark verdict to settle text colour; the named-colour hint tells you roughly what colour you are looking at.
- 4
Take the shades
When you need a full set, copy values from the shade scale as --color-primary-100 … -900 style variables.
Options
- HEX
- Hexadecimal notation such as #ff8800. The three-digit shorthand #f80 equals #ff8800; in the eight-digit form the last two digits are alpha, which this tool ignores.
- RGB
- Red, green and blue channels, each 0–255. The additive model that matches screens, well suited to blending and opacity maths.
- HSL
- Hue (0–360°), saturation (0–100%) and lightness (0–100%). Hue is circular, so -30° equals 330°; adjusting lightness here is far more intuitive than in RGB.
- HSV
- Hue, saturation and value. Unlike HSL, V is the brightest channel, which is the model Photoshop and similar pickers use.
- Perceived luminance
- Weighted as 0.299R + 0.587G + 0.114B (ITU-R BT.601), range 0–255. Green carries the most weight and blue the least, matching human vision.
- Grayscale value
- The colour folded down to grey by perceived luminance - useful for a black-and-white preview or for judging how it will print.
- Shade scale
- Hue and saturation held fixed while lightness steps linearly from 95% to 15%, producing the nine-step structure most common in design systems.
Common use cases
- Turning a design-file HEX into HSL so lightness is easy to adjust in CSS
- Sampling a colour from a screenshot and converting it to hex for the stylesheet
- Deciding whether a background needs white or black text
- Generating a full shade scale from a brand colour as design tokens
- Producing a set of evenly-spaced hues for chart series
- Migrating rgb() values to HEX for easier maintenance
- Checking whether two colours remain distinguishable in grayscale print
FAQ
Questions you may have about this tool
What is the difference between HEX, RGB and HSL?
They describe the same colour from different angles and convert losslessly. HEX and RGB are two notations of one colour space (hexadecimal and decimal). HSL takes another view entirely - what colour, how vivid, how bright - which matches how people reason about colour, making lightness adjustments much easier.
Why does HSL convert back to RGB with an error of 1?
Because hue is a continuous floating-point value in HSL while RGB channels must be integers from 0 to 255, so rounding occurs and a round trip can drift by up to 1. It is visually undetectable and does not affect use.
Should I use HSL or HSV?
CSS only supports HSL, so use HSL for stylesheets. HSV is common in colour pickers such as Photoshop’s wheel because pushing V to maximum gives the most vivid colour, which suits picking. The meaning of hue and saturation also differs slightly, so the numbers are not interchangeable.
How is perceived luminance calculated, and why weight it?
It uses the ITU-R BT.601 coefficients 0.299R + 0.587G + 0.114B. The human eye is most sensitive to green and least to blue, so a simple average of the three channels would rate pure blue and pure yellow as equally bright, which contradicts what we see. Weighting brings the figure in line with perception.
How do I decide between black and white text?
Look at perceived luminance. Below 128 the colour counts as dark and light text is recommended; above 128 it counts as light and dark text is recommended. This tool states the recommendation under "Contrast suggestion" so you can copy it. It uses near-black and near-white rather than pure values, which is gentler over large areas.
How is the shade scale generated?
Hue and saturation stay fixed while lightness steps evenly from 95% down to 15%, producing nine steps. Every step still reads as the same colour family while covering the full range from background to accent, which is why design systems organise palettes this way.
Why does it say there is no named colour for my input?
The tool ships 12 of the most common CSS named colours (red, green, blue and so on). If the input is further than the threshold from all of them, it says so plainly instead of forcing a name that is obviously wrong. That trade-off is deliberate: a wrong answer is worse than no answer.
Does it support colours with transparency?
You can enter eight-digit HEX (#ff880080) or rgba() notation, but this tool focuses on the colour itself and ignores the alpha channel. If you need to composite transparency, use a dedicated tool.