A hex color converter translates color codes between the formats used in CSS, design tools, and image editors. Enter any HEX, RGB, HSL, or HSV value and instantly see all formats simultaneously — plus a live color preview, complementary and analogous colors, and WCAG contrast ratios to check accessibility.
Enter a Color
Preview
WCAG Contrast Ratio
Related Colors
How to Use the Hex Color Converter
Color codes appear in different formats depending on the tool you are using. CSS uses HEX and HSL. Design apps like Figma and Adobe XD use HSB (HSV). APIs and image processing libraries often expect RGB. Our free hex color converter lets you work in any format and instantly see all the others.
Step 1: Enter Your Color
Type a color value into any of the four input fields: HEX (like #7c3aed or #f00), RGB (like 124, 58, 237), HSL (like 263, 84%, 58%), or HSV (like 263, 75%, 93%). Or select a named color from the CSS dropdown to start with a standard color.
Step 2: See All Formats Instantly
All four format fields update simultaneously. The large color swatch on the right shows a live preview of the selected color. This makes it easy to grab any format you need for CSS, Tailwind, design tokens, or API calls.
Step 3: Check Accessibility
The WCAG Contrast Ratio section shows your color's contrast ratio against white and black backgrounds. This tells you whether text in your color will be readable on white or black backgrounds, with AA and AAA pass/fail badges based on WCAG 2.1 guidelines.
Step 4: Explore Related Colors
The Related Colors section shows the complementary color (opposite on the color wheel), analogous colors (30 degrees away), and triadic colors (120 degrees away). These are useful starting points for building color palettes and design systems.
Step 5: Copy Any Format
Use the Copy HEX, Copy RGB, Copy HSL, and Copy HSV buttons to instantly place any format on your clipboard. This is ready to paste into CSS files, Tailwind config, design tools, or any other application.
FAQ
Is the hex color converter free?
Yes, completely free with no account required. All color conversions happen instantly in your browser using JavaScript — no data is sent to any server.
What color formats does this converter support?
The tool converts between HEX (#RRGGBB and shorthand #RGB), RGB (red, green, blue values 0-255), HSL (hue 0-360, saturation 0-100%, lightness 0-100%), and HSV/HSB (hue, saturation, value). All four formats are shown simultaneously whenever you enter a color.
What is the difference between HSL and HSV?
Both HSL and HSV use hue and saturation, but differ in the third component. HSL uses Lightness where 50% is a fully saturated color and 100% is white. HSV uses Value (also called Brightness) where 100% is a fully saturated color and 0% is black. HSV is often more intuitive for design tools, while HSL is common in CSS.
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text. This tool shows the contrast ratio of your color against both white and black backgrounds.
How do I convert a 3-digit hex color to 6 digits?
A 3-digit hex color like #ABC is shorthand for #AABBCC. Each digit is duplicated: A becomes AA, B becomes BB, and C becomes CC. This tool automatically expands 3-digit hex codes when you enter them.
Can I enter CSS named colors like 'red' or 'navy'?
Yes, the tool includes a CSS named color dropdown with all 140 standard named colors. Select a color from the dropdown to instantly see all its format equivalents.