// free tool
Color Converter
Convert between HEX, RGB, and HSL and check WCAG contrast against black and white.
To convert HEX to RGB, split the six-digit hex into three pairs and parse each as a base-16 integer. To convert RGB to HSL, normalize the channels and compute hue, saturation, and lightness. This tool does both instantly and checks WCAG contrast.
HEX
#39FF14
RGB
rgb(57, 255, 20)
RGB (space-separated)
57 255 20
HSL
hsl(111, 100%, 54%)
HSL (Tailwind CSS var)
111 100% 54%
WCAG contrast
on white
Sample text
1.36:1 · fail
on black
Sample text
15.49:1 · AAA
HSL sliders
// faq
Frequently asked questions
- What's the difference between HEX, RGB, and HSL?
- HEX is a compact 24-bit form (#RRGGBB). RGB expresses the same three channels as decimal 0-255. HSL uses hue (0-360°), saturation, and lightness — friendlier for design because adjustments feel perceptual. All three map to the same sRGB color.
- When should I use HSL over HEX?
- Use HSL in design tokens and Tailwind CSS variables when you want to tweak lightness or saturation programmatically (hover states, dark-mode variants). Use HEX in final marketing assets and brand guidelines where the value is fixed.
- What is the WCAG contrast ratio?
- A measure of the luminance difference between two colors, from 1:1 (identical) to 21:1 (black on white). WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1. This tool computes the ratio against black and white.
- Is my color data sent anywhere?
- No. All conversion and contrast math runs in your browser.
// related
Related pages
// let's build something
Start your project request
Tell us what you're building — engineering capacity, AI, QA, cloud, or a fixed-scope software engagement. Our NYC team responds within one business day.
// what to expect
- Response within 1 business day
- 30-minute discovery conversation
- Recommended engagement model & pricing
- NYC-focused — in-person available
Start Project Request
Inbound sales only. All form information is encrypted in transit.