HEX, RGB and HSL color converter
Convert colors between HEX, RGB and HSL, pick colors with the color picker and generate a shade scale ready to copy as CSS variables.
- Contrast vs white
- —
- Contrast vs black
- —
Shade scale (click to copy)
Harmonies
How it works
Type a color in any format (#3b82f6, rgb(59 130 246), hsl(217 91% 60%) or a CSS name such as "tomato") and get all its equivalents instantly.
The tool also generates a 10-step scale from lightest to darkest and exports it as CSS variables, ideal for building a brand palette or a design system.
Frequently asked questions
What is the difference between RGB and HSL?
RGB defines a color by its amounts of red, green and blue. HSL defines it by hue, saturation and lightness, which makes lighter or darker variants easier to create.
What does an 8-digit HEX mean?
The last two digits are the opacity (alpha). For example, #3b82f680 is the same blue at 50% opacity.
Related tools
Favicon generator online
Design your website favicon with text, initials or an emoji, or create it from an image. Download favicon.ico, PNGs in every size, a manifest and HTML code.
Open toolFree QR code generator
Create free QR codes for links, text, WiFi, email or WhatsApp. Pick colors and size and download them as PNG or SVG. No expiry, no sign-up.
Open toolColor contrast checker (WCAG)
Compute the contrast ratio between text and background colors and check whether it meets WCAG 2.1 AA and AAA accessibility guidelines.
Open toolCSS gradient generator
Create linear, radial and conic gradients with multiple colors, preview them live and copy the ready-to-use CSS code.
Open toolResize, compress and convert images
Shrink, compress and convert images to JPG, PNG or WebP without uploading them anywhere. Ideal for speeding up your site and meeting size limits.
Open toolNeed a custom tool for your business?
Tell us about your case and in 30 minutes we'll give you a clear diagnosis: what's going on, what to do first and what it might cost. No strings attached.