Summary
A color code converter is a tool that rewrites one color in the other notations used on screens and in print: HEX, RGB, HSL and CMYK. To convert a color code free and privately here, type or paste a color into Enter Color, for example #3B82F6, rgb(59, 130, 246), hsl(217, 91%, 60%), cmyk(76%, 47%, 0%, 4%) or blue, or use the picker beside it, then click Copy next to the format you need. The conversion runs in your browser and nothing is uploaded; you can check the Network tab in DevTools.
Formulas used: a HEX pair is a base-16 channel (3B = 3 x 16 + 11 = 59). For HSL, with R, G and B scaled to 0 to 1, lightness L = (max + min) / 2 and saturation S = (max - min) / (1 - |2L - 1|). For CMYK, K = 1 - max(R, G, B) / 255 and C = (1 - R / 255 - K) / (1 - K), with M and Y the same using G and B. For contrast, the ratio is (L1 + 0.05) / (L2 + 0.05), where L is each color's relative luminance and L1 is the lighter one.
Table of Use: What to Type and What You Get
| Situation | Type in Enter Color | Result |
|---|---|---|
| A designer sends a HEX code | #3B82F6 | rgb(59, 130, 246), hsl(217, 91%, 60%), cmyk(76%, 47%, 0%, 4%) |
| A CSS color name needs a code | coral | #FF7F50, rgb(255, 127, 80), hsl(16, 100%, 66%) |
| Shorthand HEX | #f80 | #FF8800, rgb(255, 136, 0), hsl(32, 100%, 50%) |
| A color with transparency | #FF000080 | rgba(255, 0, 0, 0.502), hsla(0, 100%, 50%, 0.502); CMYK leaves the alpha out |
| Print values for a screen | cmyk(0%, 100%, 100%, 0%) | #FF0000, rgb(255, 0, 0), named red |
| Modern CSS hue units | hsl(0.5turn 100% 50%) | #00FFFF, hsl(180, 100%, 50%), named aqua |
| Check text legibility on a color | #3B82F6 | White text 3.68:1, AA for large text only; black text 5.71:1, AA |
| A value that is out of range | rgb(300, 0, 0) | Clamped to #FF0000, as browsers do |
Features
- Wide input. HEX with 3, 4, 6 or 8 digits; rgb() and rgba() with numbers or percentages; hsl() and hsla() with deg, rad, grad or turn hue units; comma or space syntax with an optional / alpha; cmyk() as percentages or fractions; the 148 CSS color names; and transparent.
- Five results with a Copy button each: HEX, RGB, HSL, CMYK and a CSS Variable line such as
--color-primary: #3B82F6;. When the color has alpha, HEX becomes 8 digits and RGB and HSL become rgba() and hsla(). - Preview and name. A swatch shows the HEX code and, for an opaque color that exactly matches one, its CSS color name. A translucent color is previewed over a checkerboard.
- Picker and Quick Colors. Use the color picker, or one of ten swatches: red, lime, blue, yellow, magenta, cyan, orange, purple, black and white.
- Color Analysis. Hue, HSL saturation, HSL lightness, relative luminance, and the WCAG contrast ratio of white and of black text on the color.
- Forgiving errors. If a value is not recognised, the tool says so and keeps showing the last valid color instead of going blank.
Limits: one color at a time; no HSB, LAB or OKLCH output; CMYK uses the simple, uncalibrated formula without an ICC profile; and the contrast panel treats the color as solid, so it ignores transparency. Build gradients from the results with the CSS gradient generator or shadows with the box shadow generator.
How to Use the Color Code Converter
- Type or paste a color into Enter Color, or click the swatch beside it to open the picker, or click one of the Quick Colors.
- Read the HEX, RGB, HSL, CMYK and CSS Variable boxes, which update as you type.
- Click Copy beside the one you need. If the browser blocks the clipboard, select the text and copy it by hand.
- Scroll to Color Analysis to see the hue, saturation, lightness and the contrast of white and black text on the color.
Who Can Use It
Front-end developers can turn a design handoff into CSS and tidy it afterwards with the CSS beautifier or turn colors that repeat across a stylesheet into Sass variables with the CSS to SCSS converter. Designers can sample a shade from a screenshot with the image color picker or browse shades with the web color picker, and print designers can check what a screen color looks like in CMYK.
Accessibility testers can compare brand colors against text. Teachers and small organisations can use the same codes in the badge generator, the certificate generator and the business card generator. To shift the colors inside a photo rather than a code, try the saturation adjuster or the grayscale converter.
FAQs
How do I convert HEX to RGB, and RGB to HEX?
Paste the code, for example #3B82F6, into Enter Color and the other formats appear straight away. Each pair of HEX digits is one channel in base 16: 3B is 59 red, 82 is 130 green and F6 is 246 blue, so the result is rgb(59, 130, 246). To go the other way, type rgb(59, 130, 246) and the HEX result reads #3B82F6.
Which color formats can I type in?
HEX with 3, 4, 6 or 8 digits (with or without #), rgb() and rgba() with numbers or percentages, hsl() and hsla() with deg, rad, grad or turn hue units, the space-separated CSS syntax such as rgb(59 130 246 / 50%), cmyk() in percentages or fractions, the 148 CSS color names such as coral or rebeccapurple, and the keyword transparent.
What is the difference between 3-digit, 6-digit and 8-digit HEX?
A 3-digit HEX such as #F00 is shorthand in which each digit is doubled, giving #FF0000. Only colors whose channel pairs repeat a character can be written this way. 4- and 8-digit HEX add a fourth channel for transparency (alpha), so #3B82F680 is the same blue at about 50% opacity, and the tool then shows rgba() and hsla() values too.
Why do print colors look different from screen colors?
Screens use additive RGB, which mixes light, while print uses subtractive CMYK, which layers ink. Some vivid RGB blues and greens cannot be reproduced in ink. The CMYK shown here uses the simple formula without a color profile, so for professional print work convert with your printer's ICC profile in your design software and expect small differences.
How do I check that my text color has enough contrast?
Enter the background color and read the Color Analysis panel, which shows the contrast ratio of white text and of black text on it; it does not test other text colors. As of October 2026, the W3C's WCAG 2.2 success criteria 1.4.3 and 1.4.6 ask for 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 (4.5:1 for large text) at level AAA. The tool labels each result AAA, AA, AA large text only or Fails.
Are the conversions exact?
HEX and RGB are exact equivalents. HSL and CMYK are shown as whole numbers, so converting them back can shift a channel by a few steps: across all 16.7 million RGB colors the worst case is 5 out of 255 for HSL and 2 for CMYK. Use HEX or RGB when you need the exact color. Out-of-range values are clamped as browsers do, so rgb(300, 0, 0) becomes rgb(255, 0, 0).
What does the CSS Variable result do?
It gives you a ready-to-paste custom property, such as --color-primary: #3B82F6;, using the HEX value of the color. Copy it into the :root rule of your stylesheet and rename it to suit, for example --brand-blue. For a color with transparency it uses the 8-digit HEX form, so the opacity travels with the variable.
Is it safe to use, and is my color data uploaded?
The conversion is arithmetic done by your browser, and the color you type is not sent to any server. The Copy buttons use your device's clipboard. You can confirm that nothing is uploaded by opening the Network tab in your browser DevTools while you type colors and press Copy.