Convert colors between HEX, RGB and HSL, pick from a color wheel, and get shades, tints and contrast ratios.
Shades & tints
🔒 This tool runs entirely in your browser. Nothing you enter or upload is sent to our servers.
How to use the Color Converter
- Type a color in any format — #1e90ff, rgb(30, 144, 255) or hsl(210, 100%, 56%) — or use the picker.
- All formats update together and the swatch previews the color.
- Copy any value, and use the shades row to find lighter and darker variants.
About this tool
HEX and RGB describe the same thing — how much red, green and blue light to mix — while HSL (hue, saturation, lightness) is easier for humans to reason about when adjusting a colour. The contrast ratios follow WCAG 2 guidelines: body text should reach at least 4.5:1 against its background, large text 3:1.
Frequently asked questions
What is the difference between #FFF and #FFFFFF?
Nothing — the 3-digit form is shorthand where each digit is doubled. #F80 equals #FF8800.
How do I add transparency?
Use an 8-digit hex (#1e90ff80), rgba(30,144,255,0.5) or hsla(). The tool shows the alpha slider value in those formats.
Which format should I use in CSS?
Any — browsers support all of them. HSL is handy when you want to derive hover or disabled states by changing lightness.