カラーツール
オンラインカラーコンバーター | RGB、HEX、HSL、HSV、CMYK 同期
色コードをRGB・RGBA・HEX・HSL・HSV・CMYK間で相互変換。どれか1つを編集すると他の形式も即座に同期する無料のオンラインカラーコンバーターです。
ライブ同期アップロード不要
ビジュアルプレビュー
スウォッチ、ネイティブピッカー、アルファスライダーを使って、同じ色をすべての形式で細かく調整できます。
プレビューカラー
#3B82F6
rgba(59, 130, 246, 0.84)
カラーピッカー
#3B82F6
アルファ
0.8401
ライブチャンネル
HEX- R
- 59
- G
- 130
- B
- 246
- A
- 0.84
編集のヒント
入力中に一時的に無効な値になっても、最後に有効だった色は保持されます。入力を完成させると他の形式が再び自動で同期されます。
ライブ同期アップロード不要
双方向カラーフォーマットエディター
以下のすべての形式を直接編集できます。HEX、RGB、RGBA、HSL、HSLA、HSV、HSVA、CMYK、CMYKA のいずれかを変更すると、他のカラーモデルもすぐに同期されます。
RGB
RGBA
HSL
HSLA
HSV
HSVA
CMYK
CMYKA
説明
説明
RGB
RGB は赤（R）、緑（G）、青（B）の 3 つのチャンネルで構成される標準的なカラーモデルです。各チャンネルを組み合わせることで、画面上のほとんどの色を表現できます。デジタル表示で最も一般的な色体系のひとつです。
RGBA
RGBA は RGB に透明度を表すアルファチャンネルを加えた形式です。R、G、B は通常 0〜255、A は 0〜1 または 0%〜100% で表され、CSS で透過色を扱うときによく使われます。
HEX
HEX は 16 進数で色を表す方法です。短くて扱いやすいため、Web デザインや CSS で広く使われています。#2E8B57 のような値は赤・緑・青を 16 進数のペアで表し、拡張形式では透明度も含められます。
HSL
HSL（色相、彩度、明度）は RGB を円柱座標で表す方法です。H は色の種類、S は鮮やかさ、L は明るさを示し、0% は最も暗く、50% は中間、100% は最も明るい状態です。
HSLA
HSLA は HSL にアルファチャンネルを加えた形式です。色相、彩度、明度を保ったまま透明度を扱えるため、影、半透明の塗り、オーバーレイ、UI 状態色に向いています。
HSV
HSV（色相、彩度、明度）は 1978 年に A. R. Smith が提案した色空間で、Hexcone Model とも呼ばれます。V が見た目の明るさを直接表すため、直感的な色選択に向いています。
HSVA
HSVA は HSV にアルファチャンネルを加えた形式です。色相・彩度・明度ベースで色を扱いながら、不透明度も一緒に管理したい UI やグラフィックに便利です。
CMYK
CMYK は印刷で使われる代表的なカラーモードです。印刷物は外部光を反射して見えるため、新聞、パッケージ、パンフレットなどに適しています。RGB が画面向けなのに対し、CMYK はインク表現向けです。
CMYKA
CMYKA は CMYK にアルファチャンネルを加えた形式です。印刷寄りの色指定と透明度を同時に扱いたいデザイン受け渡しやレイヤー素材に便利です。
オンラインカラーコンバーターの使い方
01
HEX、RGB、RGBA、HSL、HSV、CMYK など、任意の入力欄に色値を貼り付けるか入力します。
02
有効な値になると、ツールが他のすべての対応形式へ自動変換します。
03
プレビュー、カラーピッカー、アルファスライダー、コピー操作を使って、必要な色に調整して書き出します。
主な機能
双方向フォーマット同期
対応しているどの形式を変更しても、RGB、RGBA、HEX、HSL、HSLA、HSV、HSVA、CMYK、CMYKA がリアルタイムで同期されます。
視覚的なカラー操作
ライブスウォッチ、ブラウザーのカラーピッカー、アルファスライダー、チャンネル表示で現在の色をすぐ確認できます。
ブラウザー内変換
各入力欄は一般的な関数構文に対応し、すべてブラウザー内で高速かつプライベートに変換されます。
カラーコンバーター FAQ
どの色形式を編集しても他の形式を更新できますか？
はい。双方向同期に対応しています。RGB、RGBA、HEX、HSL、HSLA、HSV、HSVA、CMYK、CMYKA のどれを編集しても、値が有効になれば他の形式もすぐ更新されます。
変換時の透明度はどう扱われますか？
HEX はこのページではアルファなしで表示しています。透明度は RGBA、HSLA、HSVA、CMYKA に保持され、プレビューにも現在の不透明度が反映されます。
このカラーコンバーターはプライベートですか？
いいえ。変換処理はすべてブラウザー内で実行されるため、色値がサーバーへ送信されることはありません。
HEX、RGB、RGBA、HSL、HSLA、HSV、HSVA、CMYK、CMYKA を 1 つの画面でまとめて相互変換できます。どれか 1 つの入力欄を編集すると、双方向同期で他のすべての形式が即座に書き換わります。ライブプレビュー、ブラウザー標準のカラーピッカー、アルファスライダーで色味や不透明度を微調整でき、変換処理はすべてブラウザー内で完結するため、色データがサーバーへ送信されることはありません。
カラーコンバーターの使い方
- 1
色の値を入力する
いずれか 1 つの形式の入力欄に値を貼り付けるか入力します。たとえば HEX なら #2E8B57、RGB なら rgb(46, 139, 87)、HSL なら hsl(146, 50%, 36%) のように指定します。
- 2
全形式が同期するのを確認する
値が有効になった瞬間に、RGB、RGBA、HEX、HSL、HSLA、HSV、HSVA、CMYK、CMYKA など他のすべての対応形式へ同時に変換されます。
- 3
色を微調整する
ライブスウォッチ、ブラウザー標準のカラーピッカー、アルファスライダーで色相や不透明度を調整できます。ランダムボタンで新しい色を探すこともできます。
- 4
コピー・書き出しする
各入力欄をクリックすればその値をコピーでき、「すべてコピー」を使えば全形式を一度に取得して、CSS やデザインデータ、コードにそのまま貼り付けられます。
参考資料
- W3C — CSS Color Module Level 4
HEX、rgb()、hsl()、hwb() など CSS のカラー形式と最新の色指定構文を定義した W3C 公式仕様です。
- MDN — CSS <color> value
HEX、RGB/RGBA、HSL/HSLA など CSS のすべての色表記と、アルファ（透明度）の扱いを解説した MDN のリファレンスです。
関連ツール
よくある質問
- どの色形式を編集しても他の形式を自動更新できますか？
- はい。双方向同期に対応しています。RGB、RGBA、HEX、HSL、HSLA、HSV、HSVA、CMYK、CMYKA のどれを編集しても、値が有効になった時点で他の形式がすぐに更新されます。
- HEX から RGB、RGB から HEX への変換はどうやりますか？
- HEX 欄に #2E8B57 のような値を入力すると、RGB 欄にすぐ rgb(46, 139, 87) が表示されます。逆方向も同じで、すべての形式が常に同期しているため、別の操作をしなくてもどちらの向きにも変換できます。
- HSL から RGB、HSV から RGB へも変換できますか？
- できます。HSL や HSV の入力欄に値を入れると、RGB をはじめ HEX や CMYK など他の形式へ同時に変換されます。色相・彩度・明度で指定した色をそのまま画面用の RGB やコード用の HEX に落とし込めます。
- RGB を印刷用の CMYK に変換できますか？
- はい。他の形式を変更するたびに CMYK・CMYKA 欄が更新され、印刷向けのシアン・マゼンタ・イエロー・キーの値が得られます。ただし CMYK はデバイス依存のため、画面表示と実際の印刷結果は多少異なる場合があります。
- 変換時の透明度（アルファ）はどう扱われますか？
- HEX はこのページでは透明度なしで表示しています。アルファは RGBA、HSLA、HSVA、CMYKA に保持され、プレビューにも現在の不透明度が反映されます。
- このカラーコンバーターはプライベートに使えますか？
- はい。変換処理はすべてお使いのブラウザー内で実行されるため、入力した色データがサーバーへアップロードされることはありません。