Color Converter
HEX · RGB · HSL · HSB · CMYK
Click to open your color picker
Current Color
Click to copy
#f97316
HEX#f97316
RGBrgb(249,115,22)
HSLhsl(25,95%,53%)
HSB / HSVhsb(25,91%,98%)
CMYKcmyk(0%,54%,91%,2%)
CSS hsl()hsl(25 95% 53%)
Complementary#169CF9
Color Model Reference
To convert HEX to RGB, split the code into three pairs and read each pair as a base-16 number: #1E90FF = rgb(30, 144, 255). From RGB the converter works out HSL, HSB (HSV) and CMYK with the standard formulas used by CSS and design apps. It also runs the other way: type values in any model and every other format updates.
All models represent the same colors differently. HEX and RGB are used in web and screen design. HSL and HSB are easier for designers to adjust intuitively. CMYK is for print.
| Model | Range | Used In |
|---|---|---|
| HEX | #000000: #FFFFFF | CSS, HTML, web design |
| RGB | 0 to 255 per channel | Screens, CSS, programming |
| HSL | H:0-360 S/L:0-100% | CSS, design systems |
| HSB/HSV | H:0-360 S/B:0-100% | Photoshop, Illustrator |
| CMYK | 0 to 100% per channel | Print, InDesign |
Common Colors in Every Model
Computed with this page's own conversion code. HSL, HSB and CMYK values are rounded to whole numbers, the way the converter shows them.
| Color | HEX | RGB | HSL | HSB / HSV | CMYK |
|---|---|---|---|---|---|
| Red | #FF0000 | 255, 0, 0 | 0°, 100%, 50% | 0°, 100%, 100% | 0, 100, 100, 0 |
| Orange | #FFA500 | 255, 165, 0 | 39°, 100%, 50% | 39°, 100%, 100% | 0, 35, 100, 0 |
| Yellow | #FFFF00 | 255, 255, 0 | 60°, 100%, 50% | 60°, 100%, 100% | 0, 0, 100, 0 |
| Green (CSS) | #008000 | 0, 128, 0 | 120°, 100%, 25% | 120°, 100%, 50% | 100, 0, 100, 50 |
| Lime | #00FF00 | 0, 255, 0 | 120°, 100%, 50% | 120°, 100%, 100% | 100, 0, 100, 0 |
| Cyan | #00FFFF | 0, 255, 255 | 180°, 100%, 50% | 180°, 100%, 100% | 100, 0, 0, 0 |
| Dodger blue | #1E90FF | 30, 144, 255 | 210°, 100%, 56% | 210°, 88%, 100% | 88, 44, 0, 0 |
| Blue | #0000FF | 0, 0, 255 | 240°, 100%, 50% | 240°, 100%, 100% | 100, 100, 0, 0 |
| Navy | #000080 | 0, 0, 128 | 240°, 100%, 25% | 240°, 100%, 50% | 100, 100, 0, 50 |
| Purple | #800080 | 128, 0, 128 | 300°, 100%, 25% | 300°, 100%, 50% | 0, 100, 0, 50 |
| Magenta | #FF00FF | 255, 0, 255 | 300°, 100%, 50% | 300°, 100%, 100% | 0, 100, 0, 0 |
| Gray | #808080 | 128, 128, 128 | 0°, 0%, 50% | 0°, 0%, 50% | 0, 0, 0, 50 |
| White | #FFFFFF | 255, 255, 255 | 0°, 0%, 100% | 0°, 0%, 100% | 0, 0, 0, 0 |
| Black | #000000 | 0, 0, 0 | 0°, 0%, 0% | 0°, 0%, 0% | 0, 0, 0, 100 |
The Formulas, Worked Through
Example color: #1E90FF.
- HEX to RGB. 1E = 1×16 + 14 = 30, 90 = 9×16 + 0 = 144, FF = 15×16 + 15 = 255. So rgb(30, 144, 255).
- Scale to 0 to 1. Divide by 255: R = 0.118, G = 0.565, B = 1. The largest value (max) is 1 and the smallest (min) is 0.118, so the spread is 0.882.
- HSL. Lightness = (max + min) ÷ 2 = 0.559, or 56%. Saturation = spread ÷ (1 − |2L − 1|) = 0.882 ÷ 0.882 = 100%. Blue is the largest channel, so hue = 60 × ((R − G) ÷ spread + 4) = 209.6, rounded to 210°.
- HSB / HSV. Brightness = max = 100%. Saturation = spread ÷ max = 88%. The hue is the same 210°.
- CMYK. K = 1 − max = 0. C = (1 − R − K) ÷ (1 − K) = 88%, M = 44%, Y = 0%.
The complementary color keeps saturation and lightness and turns the hue by 180°: 210° becomes 30°, which is #FF8D1E, a warm orange.
Why Round Trips Can Shift by One
RGB has 16,777,216 colors. HSL, HSB and CMYK shown as whole numbers have fewer distinct steps, so some precision is lost when you convert and convert back. We ran every RGB color through this page's code:
| Round trip (whole-number values) | Colors that come back exactly |
|---|---|
| RGB to HSL to RGB | 1,775,056 (10.6%) |
| RGB to HSB to RGB | 2,044,805 (12.2%) |
| RGB to CMYK to RGB | 2,136,545 (12.7%) |
The rest land on a neighbor, usually one or two steps away in a channel. #1E90FF, for example, becomes hsl(210, 100%, 56%) and returns as rgb(31, 143, 255). The difference is invisible, but if an exact brand color matters, keep the HEX or RGB value as the master and treat HSL or CMYK as derived.
Common Mistakes
- Mixing up HSL lightness and HSB brightness. Pure red is 50% lightness in HSL but 100% brightness in HSB.
- Treating this CMYK as a print proof. The formula is the simple device conversion. Printers use ICC color profiles, ink limits and paper type, so their numbers for the same color will differ.
- Expanding shorthand wrongly. #1AF means #11AAFF, not #1AF000.
- Reading alpha as a percentage. In #RRGGBBAA the alpha 80 is 128 out of 255, or 50.2% opacity, not 80%.
Method and sources. HEX and RGB notation and the HSL to RGB algorithm follow the W3C CSS Color Module Level 4. HSB/HSV follows the hexcone model (A. R. Smith, 1978). CMYK uses the standard device conversion K = 1 − max(R, G, B), without an ICC profile. All table values and round-trip counts were computed with the conversion code on this page.
🌐
Namecheap: Domains from $0.99/year
Reliable hosting, free WhoisGuard, easy DNS management
Sponsored: we may earn a commission at no cost to you
Color Conversion Questions
HEX is a 6-digit hexadecimal code (e.g. #FF5733) used in CSS and HTML. RGB specifies amounts of Red, Green and Blue (0 to 255 each). HSL describes Hue (0 to 360 degrees on the color wheel), Saturation (0 to 100%) and Lightness (0 to 100%). All three describe the same colors but in different ways. Designers often prefer HSL because it is more intuitive to adjust.
Split the HEX code into three pairs and convert each from base 16 to base 10. Example: #FF5733 → R=FF=255, G=57=87, B=33=51 → rgb(255, 87, 51). In JavaScript: parseInt("FF",16) = 255. Our converter does this instantly: just paste the HEX code and all formats are shown.
HSB (Hue, Saturation, Brightness) is also called HSV (Hue, Saturation, Value). In HSB, maximum brightness = pure color. In HSL, 50% lightness = pure color (100% lightness = white, 0% = black). HSB is used in Adobe Photoshop and most design apps. A pure red: HSL = (0, 100%, 50%) = HSB = (0, 100%, 100%). Both use Hue 0 to 360 and Saturation 0 to 100%.
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in print design. Printers mix these four ink colors to produce full-color output. RGB is for screens (additive light mixing). CMYK values are 0 to 100%. Pure black in CMYK = (0, 0, 0, 100). CMYK cannot reproduce all colors achievable in RGB: the difference is called "out of gamut."
The # prefix indicates a hexadecimal color code in CSS and HTML. #RRGGBB uses 6 hex digits: 2 each for red, green, blue. #RGB is shorthand (3 digits, each duplicated: #FFF = #FFFFFF). #RRGGBBAA adds alpha transparency (8 digits). Colors can also be written as rgb(), hsl(), or named colors (e.g. "tomato", "steelblue") in modern CSS.
The complementary color is directly opposite on the color wheel: add or subtract 180 from the Hue value. Example: Hue 30 (orange) → complementary Hue 210 (blue). In CSS: use the HSL representation and add 180 to H. Split-complementary uses Hue ±150. Triadic uses Hue ±120. Analogous uses Hue ±30.
Alpha (A) controls transparency. In CSS rgba() and hsla(), alpha is 0 (fully transparent) to 1 (fully opaque). In HEX with alpha (#RRGGBBAA), alpha is 00 (transparent) to FF (opaque). In design tools, opacity is expressed as 0 to 100%. Example: 50% opacity = rgba(R,G,B,0.5) = hex alpha 80 (128 in decimal).
Web-safe colors are 216 colors that display consistently on all monitors at 8-bit depth, using only hex digits 00, 33, 66, 99, CC, FF in each channel. Examples: #FF0000 (red), #00FF00 (lime), #0000FF (blue), #FFCC00 (amber). In modern web design with 24-bit displays, web-safe colors are no longer necessary: all 16.7 million RGB colors display correctly.
CSS supports multiple color syntaxes: hex (#RRGGBB), rgb(), rgba() (with opacity), hsl(), hsla(), named colors (140+ names), and in CSS Color Level 4: lab(), lch(), oklch() for perceptual uniformity. Modern browsers support all of these. For design systems, HSL is popular because you can easily adjust brightness without changing the hue.
First normalize RGB to 0 to 1 by dividing by 255. Then K = 1 − max(R,G,B). Then C = (1 − R − K) / (1 − K), M = (1 − G − K) / (1 − K), Y = (1 − B − K) / (1 − K). Example: rgb(255,87,51) → CMYK(0%, 66%, 80%, 0%). Note: screen-to-print conversion is not exact; professional printers use ICC color profiles for accurate matching.
Yes. A 3-digit code is shorthand where each digit is doubled: #FFF = #FFFFFF (white), #09C = #0099CC and #F60 = #FF6600. Type it with or without the # sign and the converter expands it. Only colors whose pairs repeat can be written this way, so #1E90FF has no short form.
Because HSL, HSB and CMYK are shown as whole numbers, which have fewer steps than RGB. #1E90FF becomes hsl(210, 100%, 56%) and comes back as rgb(31, 143, 255). Across all 16.7 million RGB colors, only about 1 in 9 survives an HSL round trip exactly. Keep the HEX value if you need the exact color.