Color Converter
Convert colors between multiple formats with accessibility features and export options
Examples
Convert a single color across every space
#3B82F6HEX #3B82F6
RGB rgb(59, 130, 246)
HSL hsl(217, 91%, 60%)
HSV hsv(217, 76%, 96%)
CMYK cmyk(76%, 47%, 0%, 4%)The same color in the five formats the converter produces — paste any one to populate the others.
Resolve a CSS named color to HEX
tomatoHEX #FF6347
RGB rgb(255, 99, 71)
HSL hsl(9, 100%, 64%)140+ CSS named colors map to fixed sRGB values, so a name like "tomato" becomes a copy-pastable hex.
Batch-convert a palette
#3B82F6
#10B981
#F59E0B
#EF4444IN HEX → HSL
#3B82F6 → hsl(217, 91%, 60%)
#10B981 → hsl(160, 84%, 39%)
#F59E0B → hsl(38, 92%, 50%)
#EF4444 → hsl(0, 84%, 60%)Drop a whole Tailwind-style palette and get HSL tokens for CSS variables in one go.
About this tool
The same color can be written many ways — HEX for CSS, RGB for canvas and images, HSL for intuitive lightness and saturation tweaks, HSV for color pickers, CMYK for print, and LAB for perceptually-uniform comparisons. Moving a color between these spaces by hand is error-prone, and small rounding differences matter in design systems. This converter translates a single color across all six formats at once so you always have the exact representation each tool expects.
It also helps with accessibility and workflow: simulate how a color appears to people with different types of color blindness, search 140+ named CSS colors, convert many colors in a batch, and export results for your design pipeline. Everything runs in the browser.
How to use
Enter a color
Type a value in any supported format (e.g. #3B82F6, rgb(59,130,246)) or pick from named colors.
Read every format
The tool instantly shows the equivalent HEX, RGB, HSL, HSV, CMYK and LAB values.
Check accessibility
Use the color-blindness simulation to see how the color reads for different vision types.
Copy or export
Copy any single format, or batch-convert and export multiple colors for your design system.
Use cases
Moving between design tools
A color you sampled as HEX in a picker needs to live as `hsl()` in your design tokens, or as `rgb()` in a canvas pipeline — keep every representation in sync without manual math.
Building accessible color systems
Convert a base color to HSL so you can tune lightness for AA/AAA contrast, then re-export as HEX to drop into Figma or a CSS file.
Print preparation
Translate a screen RGB or HEX into its CMYK approximation so a designer can sanity-check what a brand color will look like on press.
Generating theme tokens from a brand color
Use HSL output to derive hover/active/dark variants of a primary color by tweaking only the lightness, keeping hue and saturation stable.
Supported color spaces
| Format | Typical use |
|---|---|
| HEX | CSS and web — #RRGGBB |
| RGB | Screens, canvas, image pipelines |
| HSL | Human-friendly hue/saturation/lightness editing |
| HSV | Color pickers and design tools |
| CMYK | Print production |
| LAB | Perceptually-uniform comparison and color difference |
Includes color-blindness simulation and 140+ named CSS colors.
Common mistakes
Mistake:Mixing up HSL and HSV.
Fix:They share the same hue wheel but differ on the third axis: HSL's L=50% is the perceptual midpoint; HSV's V=100% is the brightest a color can be. "Make it lighter" usually means HSL.
Mistake:Round-tripping CMYK → RGB → CMYK to "fine-tune" a print color.
Fix:Each conversion drifts slightly out of gamut, so looping through it bakes in error. Convert CMYK to RGB once and edit from the screen representation.
Mistake:Trusting CSS color names to be the same forever.
Fix:Color names were redefined in CSS Color Level 4 (e.g. `rebeccapurple`) — old references can list a different HEX than the current spec.
Mistake:Assuming a color-blindness simulation equals a real check.
Fix:The simulation shows how a viewer may perceive your palette, but WCAG contrast ratios are the actual accessibility gate — check the contrast ratio against your background, not just the simulation.
Frequently asked questions
Related guides
Understanding WCAG Color Contrast (With Examples)
What WCAG color contrast ratios mean, the AA and AAA thresholds, how the ratio is computed from relative luminance, and how to fix text that fails accessibility checks.
HEX, RGB, HSL, and LCH: A Developer's Guide to CSS Colors
The four ways CSS lets you write a color, what each one is good at, and why HSL feels intuitive while LCH solves the gamut problems everyone trips over.
References & standards
Related tools
Color Blindness Simulator
Simulate color blindness on palettes and images. Compare protanopia, deuteranopia, tritanopia, and more side-by-side.
Color Contrast Checker
Advanced WCAG accessibility compliance checker with color blindness simulation, multiple text sizes, and comprehensive analysis features.
Color Extractor
Extract colors from uploaded images by hovering over pixels to get precise color values.
Color Generator
Generate color palettes, analyze colors, and create gradients with this comprehensive color tool.
Color Mixer
Blend two colors together by any ratio. See intermediate steps and copy the result in HEX, RGB, or HSL.
Color Names Finder
Look up CSS color names or find the closest named colors to any hex value.