Free tool
Convert HEX, RGB, HSL, and CSS colors instantly for design and development workflows.
Try HEX, rgb(), hsl(), or a CSS name like red.
Closest Tailwind color: green-500
Low contrast on white background · Contrast ratio 2.28:1
HEX
#22c55e
RGB
rgb(34, 197, 94)
HSL
hsl(142, 71%, 45%)
HSV
hsv(142, 83%, 77%)
CMYK
cmyk(83%, 0%, 52%, 23%)
Tailwind match
green-500 · #22c55e
CSS variable
--primary-color: #22c55e;
CSS color
color: #22c55e;
Optimized for CSS and Tailwind workflows
Ready for web development
Instant browser-based conversion
Preview
#22c55e
Need professional invoices for your business? Create free invoices with Invoicey.
Workflow
Three quick steps from input to a result you can use in your stack.
Step 1
Enter or pick a color
Step 2
Convert instantly
Step 3
Copy the format you need
Why teams use it
Overview
This tool parses common web color inputs — including HEX codes, rgb()/rgba(), hsl()/hsla(), and CSS named colors — then normalizes them and shows equivalent values in multiple formats. A large preview updates as you type so you can judge the color visually in one glance, without opening a full graphics suite.
Different tools and codebases prefer different representations. Designers often think in HEX or HSL for quick tweaks, while components and APIs may consume rgb() values. Converting instantly avoids mental math, reduces copy-paste errors, and keeps CSS variables and design tokens aligned across Figma notes, Tailwind configs, and production stylesheets.
For Tailwind projects, the closest default palette token can speed up class selection. The CSS variable line formats a ready-to-paste custom property such as --primary-color, which fits modern theming and component libraries. These outputs are optional helpers; you can still copy raw HEX or rgb() when that is what your stack needs.
Answers
Yes. It runs in your browser and does not require signup.
HEX, rgb/rgba, hsl/hsla, HSV and CMYK outputs, CSS variables, and common CSS named colors.
Yes. Paste an rgb() value and copy the HEX field instantly.
Yes. Enter hsl() or hsla() and all other formats update automatically.
Yes. Each format has a one-click copy action.
Discover more
Jump to another free utility at the same quality level. No signup wall.
