HueRollは、HTMLカラーコードの確認や配色探しに使える無料カラーパレットツールです。256色のパレットから色を選び、HEX・RGBなどのカラーコード、補色・類似色、白・黒とのコントラスト比を確認できます。気に入った色はコピーしたり、マイパレットに保存したりできます。
マイパレット
保存した色はまだありません。
HTMLカラーパレット
256色カラーパレット
HueRollの使い方
- 256色のパレットから気になる色を選びます。
- 開いたパネルでカラーコードや配色候補を確認し、必要に応じてカラーピッカーやHEX入力で色を調整します。
- 使いたい色のHEXコードをコピーするか、現在の色をマイパレットへ保存します。
パネル内の色見本を選ぶと、その色が現在の色になり、色情報と配色候補が更新されます。現在の色と表示された色見本が選択中の色です。「HEXをコピー」や各候補の「コピー」を押した場合は、現在の色を変えずにHEXコードだけをコピーできます。
色の調整、コピー、保存の詳しい操作は「HueRollの使い方・マニュアル」で紹介しています。
HueRollの配色ガイド
HueRollに表示される配色候補やコントラスト比をどう使うか、具体的な色を使った例で説明しています。
- 補色と類似色の使い方――違いと組み合わせ方：目立たせたい部分と、近い色でまとめたい部分の考え方を紹介します。
- UI配色で60–30–10ルールを使う方法：背景・補助・アクセントに色の役割を分ける方法を紹介します。
- HueRollで文字と背景のコントラストを確認する方法：白文字・黒文字の比較と、表示された比率の読み方を紹介します。
色の基本用語
色の言葉は、名前だけ覚えるよりも「どんなときに使えるか」と一緒に知ると役立ちます。ここでは、HueRollに表示される色や配色の意味を、初めての方にも分かるように説明します。
HEX、RGB、HSL、HSVは何が違いますか？
同じ色を異なる方法で表した数値です。HEXは赤・緑・青の成分を16進数で表し、RGBは各成分を数値で表します。例えば、赤の#FF0000とrgb(255, 0, 0)は同じ色です。HSLは色相・彩度・明度、HSVは色相・彩度・明るさで表しますが、HSLの明度とHSVの明るさは計算方法が異なり、数値をそのまま置き換えることはできません。HueRollでは選択色の各形式を表示します。貼り付け先がHEXに対応していればコピーボタンを使い、別の形式が必要な場合は表示された値を参照してください。
色相とは何ですか？
色相は、赤、黄、緑、青、紫といった色の種類です。雰囲気を変えながら別の色を探したいときに役立ちます。HueRollの256色は横方向に色相が変わり、詳細パネルでは補色、類似色、トライアディックなど、選択色から色相を動かした候補を確認できます。
彩度と明度は何を表しますか？
彩度は色の鮮やかさ、明度は色の明るさを表します。鮮やかな色はボタンや小さなアクセントに、彩度を抑えた色や明るい色は広い背景に使いやすい傾向があります。ただし、HSLの明度が同じでも、人の目には黄色が明るく、青が暗く見えることがあります。文字の読みやすさは明度の数値だけで決めず、コントラスト比も確認してください。
ティントとは何ですか？
ティントは、基準色に白を加えたような明るい色です。背景、カード、淡い装飾など、基準色の雰囲気を保ちながら広い面積へ使いたいときに向いています。基準色をボタンやアクセント、ティントを背景にすると、色数を増やしすぎず統一感を作れます。HueRollでは、選択色と白を段階的に混ぜた4色を表示します。
シェードとは何ですか？
シェードは、基準色に黒を加えたような暗い色です。見出し、濃い背景、ボタンを押した状態など、基準色より重さや強さが必要な場所に使えます。同じ基準色のティント、元の色、シェードを組み合わせると、ひとつの色を中心に役割を分けられます。HueRollでは、選択色と黒を段階的に混ぜた4色を表示します。
トーンとは何ですか？
トーンは、明るさと鮮やかさの組み合わせから生まれる色調を指す言葉です。狭い意味では、色にグレーを加えて落ち着かせた色を指すこともあります。明るく穏やかな色同士、暗く落ち着いた色同士のようにトーンをそろえると、色相が違ってもまとまりやすくなります。HueRollの256色は、上に明るい色、中央に鮮やかな色、下に暗い色を並べています。
補色とは何ですか？
補色は、色相環で基準色の反対側にある色です。ふたつの色の違いが大きいため、ボタン、通知、グラフなど、注目させたい部分のアクセントに使えます。両方を同じ面積と強さで使うと競い合って見えることがあるので、一方を主役、もう一方を小さなアクセントにすると扱いやすくなります。HueRollでは、選択色から色相を180度動かした色を表示します。
類似色とは何ですか？
類似色は、色相環で基準色の近くにある色です。青と青緑、オレンジと黄色のように自然につながりやすく、背景、グラデーション、イラストなどに穏やかな統一感を作れます。一方で、似た色だけではボタンや文字の区別が弱くなる場合があります。重要な要素では、色だけでなく明るさ、形、余白、ラベルでも違いを示してください。両者の違いと使い分けは、補色と類似色の使い方――違いと組み合わせ方で詳しく説明しています。
トライアディック、スクエア、分離補色は何ですか？
どれも色相環上の位置を使って複数色を選ぶ方法です。トライアディックは3方向、スクエアは4方向へ均等に広げ、分離補色は正反対の色そのものではなく、その両側の色を使います。複数の色を持つイラスト、資料、データ表示の出発点になりますが、候補をすべて同じ強さで使う必要はありません。主役をひとつ決め、残りは補助として使うと整理しやすくなります。
60–30–10とは何ですか？
60–30–10は、背景や広い面に約60%、補助色に約30%、注目させる色に約10%を使う考え方です。色を混ぜる割合ではなく、画面内で使う面積の目安です。HueRollでは、選択色をアクセント、明るいティントを背景として、2種類の補助色候補を表示します。完成を保証する配色ではないため、用途に合わせて調整し、文字のコントラストは別に確認してください。実際の使い方は、UI配色で60–30–10ルールを使う方法で確認できます。
コントラスト比とは何ですか？
コントラスト比は、文字色と背景色の明るさの差を数値で表したものです。見た目が好きな組み合わせでも、差が小さいと文字を読みにくいことがあります。HueRollでは、選択色に対する白と黒のコントラスト比を表示します。白文字と黒文字のどちらを使うか考える出発点として利用できますが、文字サイズ、太さ、実際の背景、ボタンの状態なども含めて最終確認してください。詳しい手順は、HueRollで文字と背景のコントラストを確認する方法で確認できます。
どの順番で色を選べばよいですか？
まず使いたい基準色をひとつ選び、ティントとシェードで背景や濃い色の候補を探します。自然なまとまりが必要なら類似色、強いアクセントが必要なら補色を比べます。複数色が必要な場合は配色候補や60–30–10パレットを参考にし、最後に文字と背景のコントラストを確認します。使いたい色が決まったらMy Paletteへ保存すると、候補を見失わずに比較できます。
色データについて
色情報や配色候補は、選択した色をもとにブラウザ上で計算しています。CMYKはsRGBから求めた参考値であり、印刷環境やカラープロファイルに基づく色校正値ではありません。実際の色の見え方は、ディスプレイや端末の設定によって異なる場合があります。
コントラスト比は、背景色と文字色の見やすさを検討するための参考情報としてご利用ください。
保存した色について
My Paletteへ保存した色は、お使いのブラウザのCookieに保存されます。アカウント登録は不要で、保存した色をWordPressのデータベースや外部サービスへ送信しません。
Cookieを無効にしている場合は保存できません。ブラウザの設定変更、Cookieの削除、または保存期間の経過によって、保存した色が消えることがあります。