Color Hex Converter
Turn any hex code into every color value you will ever need — RGB, HSL, HSV, CMYK, XYZ, Lab and OKLCH — plus ready-made color schemes and copy-paste CSS.
Convert any color
Pick a color
Type a hex code or pick visually — every value below updates instantly.
Accepts #RGB and #RRGGBB, with or without #, upper or lower case. Example: 336699, #369, #FF5733.
That does not look like a valid hex color — try e.g. #336699.
The native picker keeps hue, saturation and lightness in sync with the hex box.
Color spaces
The same color expressed in every major color model. Tap Copy on any row.
| Space | Value | Copy |
|---|---|---|
| HEX | — | |
| RGB | — | |
| HSL | — | |
| HSV | — | |
| CMYK | — | |
| XYZ | — | |
| Yxy | — | |
| CIE-Lab | — | |
| Hunter Lab | — | |
| OKLab | — | |
| OKLCH | — |
Base numbers
Each channel (red, green, blue) in binary, octal, decimal and hexadecimal.
| Channel | Binary | Octal | Decimal | Hex |
|---|---|---|---|---|
| Red | — | — | — | — |
| Green | — | — | — | — |
| Blue | — | — | — | — |
Channel percentages
RGB shares are measured against the channel sum; CMYK shares are the print percentages.
Color schemes
Harmonies built by rotating the hue. Tap any swatch to copy its hex.
This is a neutral gray — hue rotation has no effect, so only tints, shades and monochromatic steps are shown.
Complementary
Triadic
Analogous
Monochromatic
Tints (toward white)
Shades (toward black)
CSS codes
Copy-paste ready snippets for your stylesheet.
Background / text / border
—Text shadow (RGB)
—Text shadow (hex)
—Box shadow
—Live previews
See the color in real page elements before you use it.
Text in this color
Background in this color
Border in this color
Text shadow
Box shadow
On black background
On white background
Favorite colors
Saved in this browser only — no account needed. Tap a saved color to load it.
No favorites yet — pick a color you like and hit “Save to favorites”.
Keep exploring color
How It Works
Every color on a screen can be described with a short code that starts with # and is followed by six characters, like #336699. Those six characters are really three pairs: the first pair sets how much red the color contains, the second pair sets the green, and the third pair sets the blue. Red, green, and blue are the three primary colors of light — every pixel on your phone, laptop, or TV is a tiny cluster of red, green, and blue lamps, and mixing their brightness levels produces every color you see.
The pairs are written in hexadecimal, a compact way of counting to 255 with just two characters. Everyday counting uses ten digits (0–9); hexadecimal uses sixteen (0–9, then A–F, where A means 10, B means 11, all the way to F meaning 15). The value of a pair is sixteen times the first character plus the second: 33 means 3 × 16 + 3 = 51, and FF means 15 × 16 + 15 = 255. Each channel therefore covers the full range from 0 (lamp fully off) to 255 (lamp fully on). With 256 levels per channel, the total number of distinct colors is 256 × 256 × 256 = 16,777,216 — more shades than the human eye can tell apart.
You will also see three-character codes such as #369. That is simply shorthand: each digit is doubled, so #369 is exactly the same color as #336699. Uppercase and lowercase letters mean the same thing too — #FF0000 and #ff0000 are identical. The converter accepts every common spelling and normalizes it for you, so you never have to retype a code to make it “valid.”
RGB is the most direct reading of a code: it just lists the three lamp levels. #336699 means red 51, green 102, blue 153 out of 255. HSL describes the same color the way people naturally think about it: Hue (where the color sits on the color wheel, measured in degrees from 0 to 360), Saturation (how pure or washed-out it is, from 0 to 100%), and Lightness (how close it is to black or white, from 0 to 100%). To find the hue, the converter looks at which channel is strongest — red strongest lands near 0°, green strongest near 120°, blue strongest near 240° — then fine-tunes the angle from the balance of the other two channels. Saturation comes from the spread between the strongest and weakest channel: the wider the spread, the more vivid the color. Lightness is simply the average of the strongest and weakest. Gray colors, where all three channels are equal, have zero saturation and no meaningful hue.
HSV is a close cousin of HSL and the model behind most color pickers: Hue is the same wheel angle, Saturation measures how far the color is from gray, and Value is the brightest channel expressed as a percentage of full power. For #336699 the brightest channel is blue at 153 out of 255, so the value is 60%. Artists often prefer HSV because “turn the value down” maps directly onto the familiar idea of dimming a light.
CMYK answers a different question: how would a printer mix this color from ink? Printers layer cyan, magenta, yellow, and black ink on white paper, which absorbs light instead of emitting it — the physics is reversed. The black channel (K) equals one minus the brightest screen channel, and each ink amount is then scaled by whatever is left after black is removed. Because a glowing screen and printed paper behave so differently, a color converted to CMYK almost always looks a little different on paper than on your monitor. For anything brand-critical, always request a physical printed proof rather than trusting the numbers alone.
You may also notice XYZ and Lab values in the results. These describe color the way human vision works, independent of any particular screen or printer. Lab splits a color into lightness plus two opponent axes — green-versus-red and blue-versus-yellow — mirroring how our eyes and brain actually process color. Designers reach for Lab when they need to answer “how different do these two colors really look?”, for example when checking that two brand colors are distinguishable or that a chart’s series won’t blur together.
Why show so many formats at once? Because every craft has its favorite language. Web developers paste hex and RGB into stylesheets, UI designers nudge HSL sliders to build variations, print shops demand CMYK, and accessibility testers feed luminance numbers into contrast formulas. One code in, every translation out — that is the whole job of this converter.
Worked Example: Converting #336699 Step by Step
The setup
We will convert #336699 — a medium steel blue — into every major format, exactly as the tool does it.
Step 1 — Split into pairs and decode
33 → 3 × 16 + 3 = 51. 66 → 6 × 16 + 6 = 102. 99 → 9 × 16 + 9 = 153. So the RGB value is (51, 102, 153).
Step 2 — Channel shares
Add the channels: 51 + 102 + 153 = 306. Red contributes 51 ÷ 306 = 16.67%, green 102 ÷ 306 = 33.33%, blue 153 ÷ 306 = 50.00%. Blue supplies exactly half the total — this is unambiguously a blue-dominant color, which matches what your eyes tell you.
Step 3 — RGB to HSL
Scale the channels to the 0–1 range: 0.2, 0.4, 0.6. Strongest = 0.6, weakest = 0.2. Lightness = (0.6 + 0.2) ÷ 2 = 0.40 → 40%. Saturation = (0.6 − 0.2) ÷ (1 − |0.8 − 1|) = 0.4 ÷ 0.8 = 0.50 → 50%. Hue: blue is the strongest channel, so H = 60 × ((0.2 − 0.4) ÷ 0.4 + 4) = 60 × 3.5 = 210°. Result: HSL(210°, 50%, 40%).
Step 4 — RGB to HSV
Value is the brightest channel: 0.6 → 60%. Saturation = (0.6 − 0.2) ÷ 0.6 = 0.6667 → 67%. Hue is unchanged at 210°. Result: HSV(210°, 67%, 60%).
Step 5 — RGB to CMYK
Black K = 1 − 0.6 = 40%. Cyan = (1 − 0.2 − 0.4) ÷ (1 − 0.4) = 0.6667 → 67%. Magenta = (1 − 0.4 − 0.4) ÷ 0.6 = 0.3333 → 33%. Yellow = (1 − 0.6 − 0.4) ÷ 0.6 = 0 → 0%. Result: C67 M33 Y0 K40 — a sensible ink recipe for a dusty blue.
Step 6 — Shorthand and web-safe check
Every pair repeats a digit (33, 66, 99), so #336699 shortens exactly to #369. And each channel (51, 102, 153) already sits on the classic web-safe ladder — 0, 51, 102, 153, 204, 255 — so this color is web-safe exactly as written, with no rounding needed.
Common Mistakes With Hex Colors
- Judging a color from its digits.
#336699starts with “33” and can look reddish on paper, but it is blue-dominant — always trust the swatch, never the characters. - Expecting print to match the screen. Convert to CMYK and get a physical proof first. Screens glow; paper reflects. The same numbers live in two different physical worlds.
- Treating shorthand as a different color.
#369and#336699are bit-for-bit identical. There is no quality difference and no reason to prefer one in your CSS. - Thinking letter case matters.
#FF0000and#ff0000describe the same red. Pick whichever style your team prefers and stay consistent. - Forgetting about transparency. A six-digit code is always fully opaque. If you need see-through color, use the eight-digit form (
#RRGGBBAA) or a separate opacity setting — do not expect the converter’s six-digit output to carry alpha. - Approving a color on one screen only. The same hex value can look noticeably different on a phone, a budget laptop, and a projector. Check it on the devices your audience actually uses before locking in a brand color.
- Copying values by hand. A single mistyped digit —
#336699versus#336969— produces a visibly different color. Use the one-click copy buttons instead of retyping.
Tips for Working With Hex Codes
- Tweak in HSL, not in hex. When a color is almost right, nudge its lightness or saturation up and down — the hue stays put. Guessing new hex digits is far less predictable than sliding lightness from 40% to 45%.
- Copy the ready-made CSS. The background, text, border, and shadow snippets are paste-ready for your stylesheet, so you spend time designing instead of formatting code.
- Build outward from one good color. Found a hex you love? Feed it into the palette generator to get matching companions in one click, instead of hunting for pairs by trial and error.
- Check readability before you ship. An attractive text color is not automatically a readable one. Run every text/background pair through the contrast checker — it takes ten seconds and saves you from illegible pages.
- Save and name brand colors. Keep the hex codes your team reuses in the in-browser favorites with clear names (“Brand Blue”, not “#336699”), so everyone grabs the same value every time.
- Sample, don’t guess. Lifting a color from a photo or logo? Use a picker or eyedropper rather than estimating hex digits by eye — human estimates of exact channel values are wildly unreliable.
- Document the “why.” Next to each brand hex in your style guide, note where it is used (buttons, links, charts). Six months later, nobody will remember what “#336699” was for.
My saved numbers reuse them in any calculator
Save a number once — like your rent or hourly rate — then just type its name instead of the number, in any calculator here. You can also type formulas like 5000 * 1.1 right into any box.
Saved only in this browser — nothing is sent to us.
Frequently Asked Questions
How do I convert a hex color to RGB?
Split the hex into three pairs: #336699 becomes red 0x33 = 51, green 0x66 = 102, blue 0x99 = 153, so RGB(51, 102, 153). Our converter does this instantly for all color spaces at once.
What is the difference between HSL and HSV?
Both describe hue, saturation and a brightness axis, but HSL uses lightness (0% = black, 100% = white, 50% = pure color) while HSV uses value (100% = brightest). Designers often prefer HSL for picking tints and shades.
What are tints and shades of a color?
Tints mix the color with white and shades mix it with black, in even steps. Our tool shows 11 of each — handy for hover states, gradients and accessible text variants.
How do I find colors that go with my hex color?
Use the schemes section: complementary (opposite on the wheel) for contrast, analogous (neighbors) for harmony, triadic for balance. Tap any swatch to copy its hex.