What is a color code converter?
A color code converter translates one color into the other formats used across the web, design software and print. You enter a value you already have, such as a HEX code from a brand guide, and get the matching RGB, HSL, HSV and CMYK values, plus the closest named CSS color, without doing any math.
This free tool from Floan also lets you pick a color visually, fine-tune it with sliders, generate matching palettes, check text contrast and download the result. It runs in your browser, so it is fast, works on phones and never uploads your colors.
HEX, RGB, HSL, HSV and CMYK explained
Every format describes the same color in a different way. Choosing the right one makes your code easier to read and your designs easier to adjust.
HEX color codes
HEX codes such as #FF3B30 are the most common way to write a color in HTML and CSS. The six digits are three pairs for red, green and blue. Short forms like #F00 and forms with transparency like #FF3B3080 also exist.
RGB color values
RGB mixes red, green and blue light on a 0 to 255 scale, for example rgb(255, 59, 48). It matches how screens produce color, which makes it handy for programmatic blending and for adding transparency with rgba().
HSL color values
HSL stands for hue, saturation and lightness, as in hsl(3, 100%, 59%). Hue is an angle on the color wheel from 0 to 360. Because lightness is a separate number, HSL is the easiest format for making lighter and darker versions of one color.
HSV (HSB) color values
HSV, also called HSB, uses hue, saturation and value (brightness). Many design tools show their color picker this way. It is not valid CSS, so convert it to HEX, RGB or HSL before using it on the web.
CMYK color values
CMYK (cyan, magenta, yellow, key/black) is the model used in printing. The values here come from a standard mathematical conversion. Printed color also depends on paper, ink and printer profiles, so treat CMYK as a starting point and proof important colors.
How to use this color code converter
- Enter a color. Type or paste a HEX code, rgb(), hsl(), hsv(), cmyk() value, three plain numbers or a CSS name. You can also use the color picker, the sliders or the screen eyedropper where your browser supports it.
- Read the results. All formats update instantly. Press Convert to tidy the input and add the color to your recent colors.
- Copy what you need. Tap any card to copy that value, or use Copy all for the full list. Code snippets are ready for CSS, Tailwind, Swift, SwiftUI, Android and Flutter.
- Explore and download. Try the palettes, check contrast, then use Download to save a PNG color card, CSS variables, JSON or plain text.
- Start over any time. The Reset button returns the tool to its default color.
How the conversions work
HEX and RGB
HEX is simply RGB written in base 16. Take #FF3B30: FF is 255, 3B is 59 and 30 is 48, so the color is rgb(255, 59, 48). To go back, write each channel as a two-digit hexadecimal number and join them.
RGB to HSL
Divide each channel by 255, then find the largest and smallest values. Lightness is their average. Saturation depends on the gap between them, and hue is an angle worked out from which channel is largest. For rgb(255, 59, 48) this gives hsl(3, 100%, 59%).
RGB to CMYK
With channels as fractions of 1, K = 1 − max(R, G, B). Then C = (1 − R − K) ÷ (1 − K), and the same for M and Y. For our example that gives cmyk(0%, 77%, 81%, 0%).
Common color codes quick reference
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| Hot pink | #FF69B4 | rgb(255, 105, 180) | hsl(330, 100%, 71%) |
Color contrast and accessibility
A beautiful color is only useful if people can read the text on it. The Web Content Accessibility Guidelines (WCAG) measure this with a contrast ratio from 1:1 (no contrast) to 21:1 (black on white).
- AA, normal text: at least 4.5:1.
- AA, large text (about 24px, or 19px bold): at least 3:1.
- AAA, normal text: at least 7:1.
The contrast checker above tests your current color against white and black text and shows which levels pass. Read the full rules in the W3C contrast guidance, and see all supported CSS color syntax on MDN Web Docs.
Who uses a color converter?
- Web developers turn a brand HEX into
rgba()for overlays and shadows, or into HSL for hover states. - UI and UX designers keep one hue and adjust lightness to build a consistent design system.
- App developers copy ready-made Swift, Android and Flutter color code.
- Print and brand teams get a quick CMYK starting point from a screen color.
- Students and creators learn how color models relate and match colors in slides, videos and thumbnails.
Tips for working with color codes
- Store colors as CSS variables so you can change a brand color in one place.
- Prefer HSL when you need to generate tints and shades by hand.
- Always check contrast before choosing text and background pairs.
- Use 8-digit HEX or
rgba()when you need transparency. - Name your palette colors by purpose (primary, surface, danger) rather than by appearance.
Frequently asked questions
What is a color code converter?
A color code converter translates one color between formats such as HEX, RGB, HSL, HSV and CMYK, so you can paste the right value into CSS, design software, an app or a print file.
How do I convert HEX to RGB?
Split the six-digit HEX code into three pairs and convert each pair from base 16 to base 10. For #FF3B30, FF is 255, 3B is 59 and 30 is 48, so the result is rgb(255, 59, 48). The converter does this instantly when you type or paste a code.
How do I convert RGB to HEX?
Convert each of the red, green and blue values (0 to 255) to a two-digit hexadecimal number and join them after a hash sign. For example, rgb(255, 59, 48) becomes #FF3B30.
What is the difference between HSL and HSV?
Both describe color with a hue angle and a saturation percentage. HSL uses lightness, where 0 percent is black and 100 percent is white. HSV (also called HSB) uses value or brightness, where 100 percent is the brightest version of the hue. HSL is supported natively in CSS, while HSV is common in design tools.
Is the CMYK value accurate for printing?
The CMYK value is a mathematical conversion from RGB and is useful as a starting point. Real print results depend on the paper, ink and the printer's ICC color profile, so always confirm important brand colors with a proof from your printer.
Can I convert colors with transparency?
Yes. You can enter 8-digit HEX such as #FF3B3080, rgba() or hsla() values, or use the Alpha slider. The result shows HEX with an alpha pair, rgba() and hsla().
Which input formats does the converter understand?
You can type 3, 4, 6 or 8 digit HEX codes with or without the hash sign, rgb() and rgba(), hsl() and hsla(), hsv() or hsb(), cmyk(), plain numbers such as 255, 59, 48, or any of the 148 CSS color names such as tomato or rebeccapurple.
Is this tool free and private?
Yes. The tool is free, needs no account and runs entirely in your browser. Your colors are never uploaded. Recent colors are saved only in your own browser and can be cleared at any time.
What contrast ratio do I need for readable text?
WCAG 2.1 asks for at least 4.5 to 1 for normal text and 3 to 1 for large text at level AA. Level AAA asks for 7 to 1 for normal text. The contrast checker on this page shows the ratio against white and black text.
More free tools from Floan
- Temperature Converter
- File Size Converter
- Image Converter Tool
- Image Cropper Pro
- CSS Minifier
- QR Code Generator
Browse everything on the Floan homepage or the free tools directory. For deeper reading on color models, see the W3C CSS Color Module Level 4.