HueRollの使い方・マニュアル

HueRollで色を選び、カラーコードや配色候補を調べ、使いたい色をコピー・保存するまでの操作を説明します。HueRollのカラーパレットを開いて試せます。

色を選んで詳細を開く

TOPの「256色カラーパレット」で色見本を選ぶと、「色の詳細」パネルが開きます。選んだ色のHEX、RGB、HSL、HSV、CMYKなどの値と、その色から作られる関連色・配色候補を確認できます。

CMYKはsRGBから求めた参考値です。印刷環境やカラープロファイルを反映した色校正値ではありません。

パネル右上の「×」で閉じると、パレットに戻れます。別の色を調べたい場合は、もう一度色見本を選びます。

入力できるのは3桁または6桁のHEXコードです。先頭の#は省略でき、大文字・小文字のどちらでも入力できます。入力エラーが出た場合は、形式を確認して入力し直してください。

色を見ながら調整したい場合は、カラーピッカーを操作します。現在の色が変わると、カラーコード、関連色、配色候補、コントラストの表示も更新されます。

現在の色のコードを使う場合は、パネル上部の「HEXをコピー」を押します。関連色や配色候補のコードを使う場合は、対象の「コピー」を押します。どちらも現在の色を変えずにコードをコピーできるため、候補の色見本を選び直す必要はありません。

コピーされるのは、#2563EBのような6桁のHEXコードです。制作中のWebページや、HEX入力に対応したデザインツールの色指定に貼り付けて使います。

「コピーできませんでした。」と表示された場合は、コピーは完了していません。現在の色については、パネル上部に表示されたHEXコードを選択し、手動でコピーすることもできます。候補色を手動でコピーしたい場合は、その色見本を選んでから上部のコードを確認してください。

「コントラスト」には、選択した色に対する白と黒のコントラスト比が表示されます。文字の表示例と合わせて、背景に白文字・黒文字のどちらを使うかを検討できます。

現在のHueRollで比較できる文字色は白と黒です。任意の2色の比較や、AA・AAAの自動判定には対応していません。比率の読み方や使用条件は、コントラストのガイドで確認してください。

残しておきたい色を選び、「マイパレットに保存」を押します。保存されるのは現在の色です。候補色を保存したい場合は、先にその色見本を選んで現在の色にします。

保存した色はTOPの「マイパレット」に表示されます。そこから色を選ぶと、その色の詳細パネルが開きます。コードを確認したり、コピーしたり、そこから別の配色を調べたりできます。

同じ色をもう一度保存すると、その色がマイパレットの先頭へ移動します。同じ色が重複して増えることはありません。

保存できる色は最大64色です。色は利用中のブラウザのCookieに保存されるため、別の端末や別のブラウザには自動で共有されません。Cookieの削除や保存期間の経過によって消えることがあるので、制作物に必要なカラーコードは手元にも控えてください。

TOPの「マイパレットを空にする」を押すと、確認画面が開きます。すべての保存色を削除する場合は、確認画面でも「マイパレットを空にする」を選びます。取りやめる場合は「キャンセル」を選びます。

この操作は保存色をまとめて削除します。現在のHueRollには、保存色を1色ずつ削除する操作はありません。削除した色は元に戻せないため、必要なコードを控えてから実行してください。

「保存できませんでした。Cookieを有効にしてください。」と表示された場合は、ブラウザでCookieの保存が許可されているか確認します。「マイパレットにこれ以上保存できません。」と表示された場合は、保存数の上限に達しています。

削除する前に必要な色を控え、保存後は「マイパレット」に色が表示されていることを確認してください。問題が続く場合は、表示されたメッセージと操作内容をお問い合わせページからお知らせください。