色相は色の系統を選ぶ
赤、黄、緑、シアン、青、マゼンタを円状に移動します。彩度が0の場合、色相を変えても見た目にはほとんど現れません。
無料ブラウザカラーツール
HSBカラーピッカーとHEX RGB変換
色相・彩度・明度で色を選ぶか、正確なHEXまたはRGB値を入力してください。すべての形式が同期し、見た目を調整しながら必要なコードをコピーできます。
2026年7月18日更新
HSBカラーピッカー
このHSBカラーピッカーでできること
色相を0〜360度、彩度と明度を0〜100パーセントで編集し、同じ表示色を6桁HEXとRGBへ変換します。どの入力も同期し、結果はすぐコピーできます。アニメ調パレットの調整、デザイントークンの確認、色が変わった原因となるチャンネルの学習、Toon ToneのDelta E計算機へ渡す色の準備に利用できます。
HSB · HEX · RGB
色を選択して変換
スライダー、数値、プリセット、HEX入力のどれを使っても、プレビューと各形式が同じ色から更新されます。
ライブカラープレビュー#2FB8D8
RGB 47, 184, 216
HSB 191°, 78%, 85%
CSS変数
--toon-color: #2FB8D8;アニメ調カラープリセット
編集可能なToon Toneの例であり、作品やブランドの公式指定色ではありません。
HSBの3チャンネルを読む
HSBは色の判断を、系統・鮮やかさ・明るさに分けます。違いの原因を知りたいときは、1項目ずつ動かします。
彩度は鮮やかさを調整する
下げるとグレーに近づき、上げると色相が強くなります。単に暗くしたり明るくしたりする操作ではありません。
明度は光の上限を決める
0は黒です。上げると選んだ色相と彩度が現れますが、知覚上の明るさは色の種類や画面にも左右されます。
目的に合う操作を選ぶ
各形式は同じ色を異なる角度から表します。先に判断したい内容を決め、それに答えるチャンネルや測定を使います。
| 目的 | 最初に使う値 | 次の確認 |
|---|---|---|
| 赤・緑・青などの系統を選ぶ | 色相 | 彩度、次に明度 |
| 鮮やか／落ち着いた色にする | 彩度 | 色相を固定して比較 |
| 明るく／暗くする | 明度 | 実際の背景でコントラスト確認 |
| Webやデザイン値をコピー | HEXまたはRGB | 出典と色プロファイルを記録 |
| 2色の違いを測る | Delta E計算機 | 見本とHSB差分を確認 |
HSBが色の判断を整理する仕組み
HSBはHue（色相）、Saturation（彩度）、Brightness（明度）の略です。色相は円形の色相環における位置、彩度は無彩色のグレーからどれだけ離れているか、明度は表示に使うチャンネルの最大値を表します。この分け方は、まず大きな色の系統を選び、次に強さを決め、最後に明るさを整える編集手順に近いものです。3つの数値が組み合わさって1つのデジタルカラーを表し、どれか1つだけで品質を評価することはできません。
同じモデルはHSVとも呼ばれ、Valueという語がBrightnessの代わりに使われます。一般的なデジタルツールではHSBとHSVは同じ計算を指します。HSLは異なり、Lightnessの中間に純色を置き、それより上で白へ混ぜる構造です。そのためHSLの割合を同じ数字のままHSBへ貼り付けると別の色になる場合があります。このページではチャンネル名とHEX・RGBを同時に表示し、アプリごとの用語や尺度の違いを確認しやすくしています。
色相・彩度・明度を調整する安定した順序
最初は彩度と明度を十分に上げ、色相の系統が見える状態にします。小さな数値差を追う前に、赤、オレンジ、黄、緑、シアン、青、紫のどこにあるかを決めます。次に彩度を下げ、必要な落ち着きへ近づけます。記憶しているアニメの色は、名前から想像するより彩度が低いことがあります。影、圧縮、周囲の色が印象を変えるためです。最後に明度を調整すると、正しい色相の暗い版を別の色の系統と取り違えにくくなります。
精密に作業するときは一度に1チャンネルだけ変え、前の値を残します。3項目を大きく同時に動かすと魅力的な色になっても、どの修正が問題を解決したのか分かりません。視覚的な調整が終わったら、同期されたHEXまたはRGBを引き渡し用の値として使えます。承認済みトークンがある場合は、スライダーで再現せず直接入力してください。このツールは探索を正確な値へ接続するためのもので、既知の出典を新しい近似値へ置き換えるものではありません。
HEX・RGB・HSB変換で行われること
HEXとRGBは画面表示用の赤・緑・青の量を記録します。6桁HEXは各チャンネルを2桁の16進数で表し、RGBは通常0〜255の10進数で同じ内容を示します。ピッカーは値をHSBへ変換し、編集した座標を再び表示可能なRGBへ戻します。3桁HEXは変換前に6桁へ展開されます。連続的な割合を画面上の整数へ丸めるため、何度も往復すると表示値にごく小さな差が出ることがあります。
変換は公式色名、ブランド仕様、塗料配合、物理的な見本を発見する処理ではありません。モニターを校正したり、画像の埋め込みプロファイルを推定したり、別の端末で同じ見た目を保証したりもしません。正確な再現が必要なら元のトークンを保存し、デザインシステム、原画、スクリーンショットのどこから来た値か記録します。圧縮画像のピクセルはすでに変化している可能性があり、入力値に対する計算が正しくても、その入力が求める権威ある色とは限りません。
この色をさらに活用する
HSBカラーピッカーのよくある質問
HSBとHSVは同じですか？
通常は同じデジタルカラーモデルを指します。HSBはBrightness、HSVはValueという語を第3チャンネルに使います。移行前に範囲を確認してください。
HSBとHSLは同じですか？
違います。どちらも色相と彩度を使いますが、HSLのLightnessはHSBのBrightnessと計算方法が異なり、同じ割合でも別の色になります。
3桁HEXも変換できますか？
はい。#0afのような省略形は#00AAFFへ展開してから変換します。6桁は先頭の#があってもなくても入力できます。
色はアップロードや保存されますか？
アカウントやサーバーへの送信は不要です。処理はブラウザ内で行い、コピー操作は許可された場合に表示テキストだけをクリップボードへ渡します。
HSB明度でアクセシブルなコントラストを判断できますか？
できません。コントラストは前景と背景の相対輝度から計算します。HSB明度だけではWCAGのコントラスト評価になりません。
別のピッカーと数値が少し違うのはなぜですか？
丸め方、HSLとの違い、カラーマネジメント、小数精度が原因になります。最終HEXまたはRGBと、使用モデルの説明を比べてください。