HEX, RGB and HSL
The three formats used in CSS, with rgba and hsla when your color has transparency.
DESIGN TOOL / COLOR
Free Color Converter
Convert colors between HEX, RGB, HSL, HSV and CMYK instantly. Paste a code or color name, or use the picker, and copy any format with one click.
Supports transparency (alpha) and every CSS color name. Everything runs in your browser.
✓ Free to use · No signup required · Processed in your browser
Color Converter workspace
ENTER A COLOR · SEE EVERY FORMAT · COPY
That is not a recognised color. Try a HEX code, rgb(), hsl() or a color name.
AaAa
Accepts HEX (#fff, #ffffff, #ffffff80), rgb(), rgba(), hsl(), hsla() and CSS color names.
Type a color or use the picker.
COLOR CONVERTER WORKSPACEMOSANKIT / DESIGN & COLOR
THE BASICS
What Are Color Formats?
Digital colors can be written in several ways. HEX (#c9f36b) and RGB (rgb(201, 243, 107)) describe the amount of red, green and blue light. HSL describes hue, saturation and lightness, which is easier to adjust by eye. CMYK describes ink for print.
Designers and developers constantly move between these formats — a brand guide gives a HEX, a stylesheet wants HSL, a printer asks for CMYK. This converter shows them all at once.
BUILT FOR THE JOB
Key Features of MoSanKit Color Converter
HSV and CMYK
Hue-saturation-value for design tools and CMYK percentages for print references.
Any Input Format
Type a HEX code with or without #, rgb(), hsl() or a CSS color name like tomato.
Live Preview
See the color on both light and dark text so you can judge it in use.
Random Color
Spin a random color for inspiration.
Private by Design
Conversions happen in your browser.
QUICK AND SIMPLE
How to Convert a Color
01 / ENTER
Enter a color
Type or paste it, or use the color picker.
02 / READ
See every format
HEX, RGB, HSL, HSV, CMYK and more appear instantly.
03 / COPY
Copy the one you need
Click Copy beside any format.
04 / USE
Paste it into your project
CSS, design tools or documents.
MADE FOR EVERYDAY WORK
Who Can Use This Tool?
Web DesignersMove between brand codes and CSS values.
Front-end DevelopersConvert design specs to HSL and RGB.
Graphic DesignersCheck approximate CMYK for print.
MarketersMatch brand colors across tools.
StudentsLearn how color models relate.
Brand ManagersKeep color values consistent.
GOOD TO KNOW
A few things, answered.
Quick answers about using the MoSanKit Color Converter.
It is a mathematical conversion from RGB, useful as a starting point. Real print colors depend on the printer, ink and paper, so use your printer's colour profile for final work.
HEX (3, 4, 6 or 8 digits, with or without #), rgb() and rgba(), hsl() and hsla(), plain "r g b" numbers and all standard CSS color names.
When your color has an alpha value you will see 8-digit HEX, rgba() and hsla() forms.
RGB values are whole numbers, so converting back to HSL rounds slightly. The color is visually identical.
Both use hue and saturation. HSL uses lightness (white at the top, black at the bottom) while HSV uses value (brightness of the color).
No. Everything is calculated in your browser.
KEEP BUILDING
Explore More Design & Color
Every color format,
one click away.
Explore more free design and color tools from MoSanKit.