Color Converter Online Free
Paste any color in any format and instantly get every other format. Type a HEX, RGB, HSL, CMYK, or even a CSS named color (like coral or rebeccapurple) and watch the live preview, plus 10 output formats, RGB Float, HSV, HSLA, RGBA, Hex Short, perceptual brightness, and more.
How to Convert Color Codes
Enter a Color
Type or paste any color value: hex, RGB, HSL, CMYK, or a named color.
See Every Format Instantly
See every format converted instantly side by side.
Click to Copy
Click any value to copy it to your clipboard for use anywhere.
Convert Colors Across Every Format
Designers think in HEX, web devs read RGB, marketers spec colors in CMYK, and brand guidelines often list HSL. The converter handles all four plus named colors from a single input field.
Click any output to copy it instantly, paste straight into your CSS, design tool, or print spec.
Why Use Our Color Converter?
Universal Smart Input
A single input box accepts any format the moment you paste it. HEX (with or without #), short HEX, rgb()/rgba(), hsl()/hsla(), bare comma-separated triples like "255, 0, 128", and any CSS named color including modern ones like rebeccapurple, lavender, peachpuff. Invalid input is highlighted in red, valid input cascades to every output instantly.
10 Output Formats
Featured outputs at the top: HEX (uppercase) and RGB. Below: RGB Float (0-1 range for shaders and 3D apps), HSL, HSV, CMYK (for print), HSLA, RGBA, Hex Short (when applicable), and a perceptual Brightness metric using ITU-R BT.601 weights with Light/Mid/Dark labels.
Built-in Native Color Picker
A circular eyedropper button in the bottom-right of the live preview opens your browser’s native color picker. Pick a color visually and every output field updates immediately, no need to know the hex of the shade you want.
One-Click Copy
Every output field has its own copy button, and you can also click directly on the value text to copy. A toast notification at the bottom of the screen confirms each copy with the actual value that was copied. Falls back to the legacy execCommand path on older browsers that block navigator.clipboard.
Similar Tools
More Image tools you might find useful.
Frequently Asked Questions
Common questions about color conversion.
What is RGB Float and when do I need it?
RGB Float represents the color as three numbers in the 0.0-1.0 range instead of 0-255. It is the standard format used by GPU shaders (GLSL, HLSL), 3D modelling apps (Blender, Cinema 4D), and most game engines (Unity, Unreal). For example, pure red is rgb(255, 0, 0) but in float form it is (1.00, 0.00, 0.00).
When should I use HSL vs HSV?
Both rotate around hue but treat brightness differently. HSL (Hue, Saturation, Lightness) is intuitive for designers because pure white and pure black are at the lightness extremes. HSV (Hue, Saturation, Value) goes from black to a fully-saturated pure color at full value, most graphic editors (Photoshop, Figma) use HSV in their color pickers. Use HSL for CSS color manipulation and HSV when matching a graphics tool.
How is Brightness calculated?
The tool uses the standard ITU-R BT.601 perceptual luminance formula: brightness = 0.299×R + 0.587×G + 0.114×B. The weights reflect that the human eye is most sensitive to green, then red, then blue. The result is an integer from 0 to 255, with the Light/Mid/Dark label using a 90/160 split, useful for choosing whether to overlay white or black text on the color.
Does the tool understand CSS color names?
Yes. Any CSS Level 4 color keyword works, basic colors like red, blue, gray; modern names like rebeccapurple, peachpuff, lavender, midnightblue; and edge cases like transparent and currentcolor (transparent resolves to rgb(0,0,0) since the parser does not yet pass alpha through the rest of the pipeline).