HEX・RGB・HSLを相互変換できます。色プレビューやワンクリックコピーにも対応しています。
rgb(59, 130, 246)
hsl(217, 91%, 60%)
このツールについて
はい、完全無料です。ユーザー登録やインストールも不要です。
いいえ。すべての処理はブラウザ内で完結します。入力した色の値が外部に送信されることはありません。
HEX（#RRGGBB）・RGB（0〜255）・HSL（H: 0〜360、S/L: 0〜100）の3形式に対応しています。カラーピッカーによる色選択も利用できます。
はい。#rgb 形式（例：#f00）を入力すると #rrggbb 形式（例：#ff0000）に自動展開して変換します。
RGB は赤・緑・青の光の三原色で色を表現します（各 0〜255）。HSL は色相（H: 0〜360°）・彩度（S: 0〜100%）・明度（L: 0〜100%）で表現します。HSL は人間の感覚に近く、色味や明暗を調整しやすい特徴があります。
はい。カラーピッカーで色を選択すると、HEX・RGB・HSL の各フィールドと色プレビューが即座に更新されます。
対応していません。HEX・RGB・HSL の基本3形式のみサポートしています。
はい、スマートフォンのブラウザからもご利用いただけます。アプリのインストールは不要です。
Web で色を指定する方法は主に HEX・RGB・HSL の3つ。どれも同じ色を表せますが、「読みやすさ」「調整のしやすさ」に違いがあります。ここでは3形式の読み方と使い分け、そして見落とされがちなコントラスト（読みやすさ）の考え方までまとめます。
#3b82f6）：先頭から R・G・B を16進数2桁ずつ。3b=赤、82=緑、f6=青。CSSで最もよく使う簡潔な表記。rgb(59, 130, 246)）：赤・緑・青を 0〜255 で指定。HEXと中身は同じで、10進数で読みやすい。hsl(217, 91%, 60%)）：色相（H: 0〜360°）・彩度（S: %）・明度（L: %）。人の感覚に近い指定方法。同じ青でも表記が違うだけで、指す色は同一です。本ツールはどれか1つを入れれば残りが自動で埋まります。
HEX や RGB は、色を少しだけ明るく／薄くしたいときに直感が効きません。「#3b82f6 をもう少し明るく」と言われても、どの桁をどう動かせばいいか分からないからです。
HSL なら、色味（H）を保ったまま 明度（L）を上げれば明るく、彩度（S）を下げれば淡く なります。ホバー時に少し暗い色、無効状態は彩度を落とした色、といったバリエーションを作るのに最適です。HSLで感覚的に調整し、最終的な HEX 値を本ツールでコピーする、という流れが効率的です。
HEX には #f00 のような3桁の短縮形があります。これは各桁を2回繰り返した #ff0000 と同じ意味です。本ツールは短縮形を入力すると6桁に展開して変換します。
なお、透明度（アルファ）を含む rgba() や #RRGGBBAA は本ツールの対象外です。半透明が必要な場合は、変換で得た色に CSS 側で opacity やアルファ値を足してください。まず不透明の色を決め、透明度は別に調整するのが分かりやすい進め方です。
色選びで見落とされがちなのが、文字と背景のコントラスト比です。おしゃれでも、薄い灰色の文字を白背景に置くと読めません。
アクセシビリティの指針（WCAG）では、本文テキストで 4.5:1 以上、大きな文字で 3:1 以上のコントラストが推奨されています。HSLの明度（L）を手がかりに、文字と背景の明るさに十分な差をつけると、読みやすさを確保しやすくなります。色だけで情報を区別せず、明暗の差も併用するのがバリアフリーなデザインの基本です。
デザインツール（Figma など）で選んだ色を、そのまま CSS に持っていくときにも本ツールが使えます。ツールが表示する値をコピーして、CSS 変数やスタイルシートに貼り付けるだけです。
色の仕組みをもう少し体系的に知りたい方は カラーコード完全ガイド もどうぞ。RGBの成り立ちから実用的な色設計まで解説しています。
このサイトでは、アクセス解析や広告配信のために Cookie を使用します。詳しくはプライバシーポリシーをご覧ください。