Web開発
Color Converter
HEX、RGB、HSL、HSV/HSB、CMYK間で色を変換します — いずれかのフィールドに値を入力すると、他のフィールドが即座に更新されます。
The same color can be written differently depending on context: HEX and RGB are convenient for code, HSL is intuitive for picking a hue and lightness, and CMYK is for print. This tool converts between all of them at once.
How to use it
- Enter a value in any field (HEX, RGB, HSL, HSV/HSB, or CMYK) — every other format updates instantly.
- The "random color" button generates a random hue for quickly browsing a palette.
- Copy the format you need with one click to paste into CSS or a graphics editor.
Which format to use when
- HEX — a compact notation for CSS and design systems (#4453b8).
- RGB — when you need transparency via rgba() or programmatic access to individual color channels.
- HSL — the easiest for manual tuning: lighten or darken a color by changing just one value.
- CMYK — for materials headed to print, where colors mix subtractively, unlike the additive RGB used on screens.
Things to keep in mind
CMYK on screen is only an approximation — the exact printed color depends on the printer, paper, and color profile used.
Conversion between color spaces isn't always exact for extreme, highly saturated colors, due to differences in gamut coverage between models.
よくある質問
コンバーターはアルファ(透明度)チャンネルをどう処理しますか?
アルファはHEX(#RRGGBBAA)、RGBA、HSLAでサポートされています — 入力した内容は透明度をサポートする他の形式に引き継がれますが、通常のCMYKのようにアルファチャンネルのない形式では単に無視されます。
CMYKに変換してHEXに戻すと値がわずかに変わるのはなぜですか?
CMYKは印刷向けのモデルで、RGBとの間で変換する単一の固定式がないため、往復変換で値が1〜2単位の丸め誤差でずれることがあります。視覚的には色はほぼ同じままです。
私のカラーデータはどこかに送信されますか?
いいえ、すべての変換はJavaScriptを使ってブラウザ内でローカルに行われます — サーバーには何もアップロードされません。
OKLCHはHSLと何が違いますか?
OKLCHは明度（L）、クロマ（C）、色相（H）で色を表現しますが、HSLと違って人間の目が実際に明度をどう知覚するかを考慮しています——OKLCHでLを変えても知覚される彩度が歪まないため、色合いの間の遷移がより均一に見えます。
色が「out of gamut(色域外)」とはどういう意味ですか?
OKLCHやDisplay P3のような広いカラースペースの一部の色は、sRGBのみをサポートするディスプレイでは物理的に再現できません——その場合、ブラウザはサポートされている色域内で最も近い利用可能な色に置き換えます。