この計算機の使い方
What the two notations mean
Hex and rgb() are two spellings of the same thing: three channel values that say how much red, green, and blue a color mixes. A hex code like #3498db is the three channels written in base 16 — the pairs 34, 98, db — while rgb(52, 152, 219) writes the same numbers in decimal. The converter is pure arithmetic on those channels: each hex pair is parsed with parseInt(·, 16) and each decimal channel is converted back to two base-16 digits, so the two forms are always exact, never approximated.
That is the tool’s entire job, and it is why the conversion is instant and lossless: #3498db is rgb(52, 152, 219), and rgb(52, 152, 219) is #3498db, with nothing lost in either direction. The hex form is the compact notation style guides and design systems use; the rgb() form is what many charting libraries, canvas APIs, and older CSS code expect.
The input forms that just work
Values copied out of a browser inspector, a design tool, or a mockup arrive in different shapes, and the converter accepts them as pasted: a 6-digit code, a 3-digit shorthand like #fff (which expands to #ffffff, matching CSS behavior), an optional leading #, uppercase or lowercase digits, and even the full function syntax rgb(52, 152, 219) or a bare triplet 52, 152, 219. Output is always normalized to the unambiguous 6-digit lowercase hex form, so the result never carries the ambiguity of shorthand.
Validation is strict about what a color can be: hex digits must be valid hex, and each RGB channel must be an integer from 0 to 255. A triplet with a channel of 300 is rejected with a clear message rather than silently clamped — CSS clamps out-of-range values, but a conversion tool should not invent a color the input did not describe.
Why the precedence rule exists
When both fields are filled, the hex value wins and converts to RGB; the rgb field is ignored. The rule is documented rather than guessed because a converter that silently picked a side would produce a result that disagreed with what the user intended to change. The behavior is predictable: edit the field you want to be authoritative, and the other side updates to match.
The same predictability applies to case and formatting: hex output is always lowercase because hex digits are case-insensitive and lowercase is the convention most tooling and minifiers use, and shorthand input always expands to the full form so the result is unambiguous.
The honest limits
The converter handles three-channel colors only: 4- and 8-digit hex (#rgba, #rrggbbaa) and rgba() carry an alpha channel this tool does not parse, and named CSS colors (red, blue, rebeccapurple) are not accepted — convert those by looking up their hex or rgb form first. For colors with transparency, convert the 6-digit base color here and keep the alpha separately. And as with everything on the site, the conversion runs entirely in your browser: no value you enter is uploaded, logged, or stored.
よくある質問
3桁と6桁のHexの違いは？
#fffのような3桁のコードはCSSの短縮形式で、各桁が2倍に展開されます。#fffは#ffffffと同じ意味です。すべてのモダンブラウザが対応しています。このツールは両方を受け付け、常に完全な6桁形式で出力するため、結果に曖昧さはありません。
アルファ（透明度）値には対応していますか？
現時点では対応していません。8桁のHex（#rrggbbaa）やrgba()には透明度チャンネルが含まれますが、このツールでは解釈しません。アルファ付きの色は、6桁の基本色をここで変換し、アルファは別に管理してください。
なぜHexの出力は小文字なのですか？
16進数は大文字小文字を区別しません。#3498dbと#3498DBは同じ色です。小文字はモダンなツールやミニファイアの慣例であり、コピー&ペーストしやすい一貫した出力になります。
HexとRGBの両方に入力した場合はどうなりますか？
Hexの値が優先されRGBに変換されます。RGB側は無視されます。ツールは推測せずこの優先順位を明記しているため、結果は常に予測可能です。
Why is #fff the same color as #ffffff?
CSS 3-digit shorthand doubles each digit: #fff means #ff ff ff, which is exactly #ffffff. The converter accepts both and always outputs the expanded 6-digit form, so the result is unambiguous.
Is 300, 0, 0 ever a valid color?
No — each channel must be an integer from 0 to 255. CSS clamps out-of-range values silently; this converter rejects them with an error instead, because converting a value that was not a color would produce a misleading result.