カラー変換 (HEX, RGB, HSL)

What the numbers in a color code actually mean

A color on a screen is ultimately three numbers: how much red, green, and blue light a pixel emits, each from 0 to 255. Every format this tool produces — HEX, RGB, HSL, HSV, and CMYK — is just a different way of writing or rearranging that same information. HEX is the most common in web design: #FF6B35 is nothing more than the three RGB values written in base 16, two hex digits per channel (FF = 255, 6B = 107, 35 = 53). RGB writes the same three numbers in plain decimal: rgb(255, 107, 53). Because they describe identical light, converting between HEX and RGB is lossless and exact.

HSL and HSV take a different approach. Instead of three light channels, they describe a color the way a human thinks about it: its hue (the position on the color wheel, 0–360°), its saturation (how vivid versus gray), and its lightness or value (how bright). This is why designers reach for HSL when they want a "slightly darker" or "less saturated" version of a color — you change one number instead of juggling three.

The conversions this tool performs, step by step

Suppose you enter #FF6B35. The tool first splits it into R=255, G=107, B=53. To find HSL it divides each channel by 255, finds the maximum (1.0 from red) and minimum (0.208 from blue), and computes lightness as their average: (1.0 + 0.208) / 2 ≈ 0.60, or 60%. Saturation comes from the spread between max and min, and hue is derived from which channel is largest — here red dominates with green above blue, placing the hue at about 18°. The result is hsl(18, 100%, 60%).

HSV uses the same hue but defines "value" as simply the maximum channel (100%) and saturation relative to that maximum, giving hsv(18, 79%, 100%). CMYK is computed for print: the tool finds C = 1 − R/255, M = 1 − G/255, Y = 1 − B/255, then pulls out the common black component K = min(C, M, Y) and rescales the rest. For #FF6B35 that lands near cmyk(0%, 58%, 79%, 0%).

Why CMYK is labelled "approximate"

The CMYK value here is a straightforward mathematical inversion, not a color-managed conversion. Real print output depends on the specific ink set, paper, and an ICC profile that maps screen colors to what a press can physically reproduce. RGB can display vivid colors — bright cyans and oranges — that simply do not exist in CMYK ink, so any on-screen formula is only a starting estimate. Treat the CMYK output as a useful ballpark for picking ink-friendly colors, but always proof critical print jobs through your print shop's profile.

Practical uses

• Translating a brand color across tools. A logo spec might give you a HEX value, but your CSS-in-JS library wants RGB and your design app wants HSL. Paste once, copy the format you need.
• Building tints and shades. Convert to HSL, then keep hue and saturation fixed while lowering lightness to get a coherent darker variant — far cleaner than guessing at HEX digits.
• Adding transparency. Once you have the RGB triplet, wrapping it as rgba(255, 107, 53, 0.5) gives a semi-transparent overlay that still matches your base color exactly.
• Checking print feasibility. A glance at the CMYK estimate tells you whether a neon screen color will dull noticeably when printed.

Tips and common mistakes

• Shorthand HEX expands predictably. A three-digit code like #F63 means each digit is doubled: #FF6633. This tool expands it automatically, but writing it out yourself avoids confusion.
• Rounding is expected. HSL and HSV percentages are rounded to whole numbers for readability, so converting HEX → HSL → HEX may shift by one unit in a channel. For pixel-exact work, keep the original HEX or RGB as your source of truth.
• Hue is meaningless for grays. Pure black, white, and gray have zero saturation, so their hue value is reported as 0 by convention — it does not mean "red." Don't read significance into the hue of a desaturated color.
• Don't confuse HSL lightness with HSV value. They look similar but differ: at 100% lightness HSL is always white, whereas at 100% value HSV shows the fully saturated color. Pick the model your design tool actually uses.

Does anything leave your browser?

No. Every conversion is pure arithmetic performed in JavaScript on your device — the color you type is never uploaded, logged, or stored. The live swatch and all five output formats update instantly as you type, and the tool keeps working with your network disconnected.