Lightness
L = (M + m) ÷ 2
Average of the strongest and weakest channel.
Color converter
Quickly switch a color between HEX, RGB, and HSL notation and retrieve the corresponding values for your web projects.
- Clipboard
Color
Hex code (#3366FF, #36F), rgb(51, 102, 255) or hsl(225, 100%, 60%), with optional transparency.
Color not recognized: enter a hex code, an rgb() or an hsl() value.
Result
Was this tool useful?
How does this tool work?
The same colour can be written several ways in CSS: #3366FF, rgb(51, 102, 255) or hsl(225, 100%, 60%). This converter reads any of these notations and shows the other two straight away, transparency included, so you can move from a mock-up to code, tidy up a stylesheet or find the hue and lightness behind a hex code.
Type a colour into the field: a 3, 4, 6 or 8-digit hex code (#36F, #3366FF80), rgb() or rgba() with commas or spaces, or hsl() and hsla() with a hue in degrees, turns or radians. You can also click the swatch to pick a colour with your system's colour picker.
Conversion is instant. HEX is shown in capitals, RGB as whole numbers from 0 to 255 and HSL with at most one decimal. Transparency below 100% adds a fourth byte to the hex code and gives rgba() and hsla(). Out-of-range values are clamped: rgb(300, 0, 0) becomes rgb(255, 0, 0).
Each result has its own Copy button. CSS colour names such as "red" or "navy" are not recognised: enter their code instead.
How to use this tool
Enter the colour
Type a hex code, an rgb() or hsl() value, or choose it in the picker.
Read the equivalents
The HEX, RGB and HSL fields update as you type; a message flags input that is not recognised.
Copy the result
Click the Copy icon next to the notation you need.
From RGB to HSL
The three channels are scaled to 0–1; their maximum M, minimum m and spread Δ = M − m give lightness, saturation and hue.
Saturation
S = Δ ÷ (1 − |2L − 1|)
Zero when the three channels are equal (grey).
Hue
H = 60° × ((G − B) ÷ Δ mod 6, (B − R) ÷ Δ + 2 or (R − G) ÷ Δ + 4)
The formula depends on the strongest channel; the result is wrapped to 0–360°.
- R, G, B
- red, green and blue channels divided by 255
- M, m
- largest and smallest of the three channels
- Δ
- spread M − m
Use cases
From mock-up to CSS
Turn a mock-up's hex code into hsl() to create lighter or darker variants easily.
Tidy up a stylesheet
Make colours written sometimes in hex and sometimes in rgb() consistent across a project.
Understand a colour
Read the hue, saturation and lightness of a code to see why it looks dull or too bright.
Examples
A brand blue in three notations
33, 66 and FF in hexadecimal are 51, 102 and 255. Blue dominates: hue 225°, full saturation, 60% lightness.
Input
#3366FFResult
HEX #3366FF; RGB rgb(51, 102, 255); HSL hsl(225, 100%, 60%)An HSL colour with transparency
The HSL colour is converted to rounded 0–255 channels, then 50% opacity becomes the byte 80 in hexadecimal (128 out of 255).
Input
hsl(210 70% 50% / 50%)Result
HEX #2680D980; RGB rgba(38, 128, 217, 0.5); HSL hsla(210, 70%, 50%, 0.5)Tips and best practices
- To lighten or darken a colour without changing its hue, switch to HSL and change only the lightness.
- A 3-digit hex code doubles each digit: #36F is the same as #3366FF.
- 8-digit hex (#RRGGBBAA) works in current browsers, but some design programs only accept 6 digits.
- Converting HSL to hex rounds the channels to whole numbers, so two very close HSL values can give the same hex code.
Sources and references
- W3C, CSS Color Module Level 4 (opens in a new tab)Page in English
Frequently asked questions
Which notations can I enter?
Hex with 3, 4, 6 or 8 digits, with or without #, rgb() and rgba(), hsl() and hsla(), with commas or the modern space syntax using "/" for opacity.
Are colour names such as "tomato" accepted?
No. Only numeric notations are read; look up the hex code of the named colour and enter that.
Why is the hue 0 for a grey?
A grey has no hue: its three channels are equal, saturation is zero and the hue is set to 0 by convention.
How is transparency converted?
Opacity from 0 to 1 is multiplied by 255 to form the fourth byte of the hex code: 0.5 gives 80, and 1 drops the byte.
Is the conversion exact?
Hex and RGB are equivalent bit for bit. HSL is computed without intermediate rounding and shown with one decimal; going to hex rounds each channel to a whole number.
Is my colour sent anywhere?
No. The conversion is a calculation in your browser, with no network request.
Related tools
Keep going with these tools
Tools similar or complementary to this one.
Similar tools
Build a complementary, analogous, triadic or monochromatic palette from one color.
Images & graphicsUse this tool
Extract a dominant color palette from an image without uploading it to a server.
Images & graphicsUse this tool
Preview an image as it may appear with different types of color vision deficiency.
Images & graphicsUse this tool
Read next
ReferenceConcepts and technologiesBeginner
RGB, HEX, or HSL: Which Color Notation Should You Use?
Understand how RGB, HEX, and HSL describe sRGB colors so you can choose readable CSS notation and convert values without confusion.
31 August 202613 min
GuideBest practicesIntermediate
How to Optimize an SVG Without Changing Its Appearance
Reduce SVG file size by cleaning markup, precision, paths, styles, and metadata while protecting rendering, accessibility, and security.
31 August 202614 min
GuideFormatsBeginner
SVG: Understanding the Vector Format
Learn how SVG describes shapes, uses viewBox, integrates into Web pages, and should be handled for responsiveness, accessibility, and security.
31 August 202622 min
GuideBest practicesBeginner
WCAG Contrast: How to Make Colors Accessible
Understand WCAG contrast thresholds, measure color combinations, and fix cases that make an interface harder to read or use.
31 August 202618 min