Color Converter
Use white text on this background

Color Converter Online Free — HEX to RGB to HSL CSS Colors — Free Online Tool

Convert colors between HEX, RGB and HSL online free. Color picker, tint and shade palette generator, contrast check and 20 preset swatches. Instant results.

Free Forever
No Signup
No Upload
100% Private
Browser-based

Features

Built for real developer workflows. No fluff, just the tools you need.

🎨

HEX RGB HSL Conversion

Convert between HEX, RGB and HSL with live update. Change any field and all three update simultaneously.

🖱️

Visual Color Picker

Use the browser color picker for precise selection. The picker syncs with all format fields in real time.

🎨

Palette Generator

Get 9 tints and shades from any base color — click any swatch in the palette to load it as the active color.

Contrast Indicator

Plain-English advice on whether to use light or dark text over the selected color for readable contrast.

🔲

20 Preset Swatches

Common colors from Tailwind CSS palette. Click any swatch to instantly load it.

📋

Copy Each Format

HEX, RGB, HSL and CSS variable each have dedicated Copy buttons.

How to use

Get results in seconds — no account, no file upload required.

1

Pick or enter a color

Use the color picker, or type a HEX value like #2563eb. All format fields update immediately.

2

Copy the format you need

HEX for CSS stylesheets, RGB for JavaScript, HSL for animations and transitions.

3

Explore the palette

Nine tints and shades are generated from your color. Click any to use it as the new base.

More free tools

Every tool at itsseven is free, private and browser-based.

Frequently asked questions

What is the difference between HEX and RGB?
HEX is compact hexadecimal RGB — #2563eb means R=37, G=99, B=235. Both describe the same color.
When should I use HSL?
HSL is intuitive for color variations. Rotating hue creates analogous colors. Adjusting lightness creates tints (lighter) and shades (darker).
What is a tint vs a shade?
A tint mixes a color with white, making it lighter. A shade mixes with black, making it darker. The palette shows 9 steps from light tint to dark shade.
How do I check color accessibility?
WCAG requires 4.5:1 contrast ratio for normal text. The contrast indicator gives a basic recommendation. Use a dedicated WCAG contrast checker for precise ratios.
Can I enter RGB values directly?
Type in the RGB field using rgb(37, 99, 235) format and press Tab to trigger conversion.
What is a CSS custom property for colors?
The CSS Variable field shows --color-primary: #2563eb; formatted for copy-paste into a :root block in your stylesheet.