色選び、配色に利用したいHSB

2021年8月8日 09:00

先日、すぴか式『分かりやすいデザイン！』のおはなしというオンラインセミナーに参加しました。その中で講師のすぴかあやか（角田綾佳）さんのHSBについての説明「水彩絵の具に例えると…」がわりやすく、ストンと落ちました。

• H（Hue 色相）：どの色のチューブを選ぶか
• S（Saturation 彩度）：水を足していくと薄くなる
• B（Brightness 明度）：黒を足していくと暗くなる

「すぴか式『分かりやすいデザイン！』」でのHSBの説明が絶妙にわかりやすかった。

・H：どのチューブを選ぶか
・S：水を足していくと薄くなる
・B：黒を足していくと暗くなる

（@motionelements の主催イベントでの @spicagraph さんの講演「色選びはRGBよりHSBがおすすめ」から） pic.twitter.com/P1Tt8sInRC
— DTP Transit (@DTP_Transit) August 7, 2021

知らない方はいないと思うのですが、すぴかあやか（角田綾佳）さん。

⚡️ "デザイナーの秘密道具@spicagraph"https://t.co/nc3sgPQqdB
— すぴかあやか（角田綾佳）＠キテレツ (@spicagraph) October 10, 2017

Photoshopの「HUDカラーピッカー」

Photoshopでは「HUDカラーピッカー」がHSBの仕組みになっています。

「HUDカラーピッカー」の表示方法：

• Mac：⌘ + option + control + クリック
• Windows：Alt + Shift + 右クリック

Photoshopの［カラー］パネル

Photoshopの［カラー］パネルは初期設定では「色相キューブ」となっています。HSBカラーピッカーのように利用できます。

［HSBスライダー］に変更した際、［RGBスペクトル］を表示すると、

次のようにHSBカラーピッカーとして利用できます。

Illustratorの［カラー］パネル

Illustrator でカラーモードを変更するには［カラー］パネルメニューから選択するほか、スペクトルバーをshift + クリックする方法があります。

［カラー］パネルの高さを変更し、スペクトルバーを広げると、HSBカラーピッカーとして利用できます。

図解版。

IllustratorのHSB-01

ライブカラーを使った配色（Illustrator）

統一感のある配色を行いたいときに有効なのがトーン（彩度と明度）を合わせること。Illustratorなら［オブジェクトの再配色］（通称「ライブカラー」）を使うとスピーディに行えます。

2020年10月リリースのIllustrator 2021から［オブジェクトの再配色］のUIが変更になりました。それ以前のIllustratorをお使いの方は、［編集］タブに切り替えて設定します。

iPad向けの各アプリのUI

iPad向けのPhotoshop、Fresco、IllustratorではデフォルトのカラーホイールにてHSBの仕組みになっています。

HSB設定-02

ただし、細かい点でUIには統一感がなく、同じ会社の製品とは思えないくらい自由です…!!

クリップスタジオペイント

クリップスタジオペイント（クリスタ）でもHSBカラーピッカーが実装されているようです。

HSBって言うと特殊フォーマット？難しそう！に感じるかもしれないんですが、簡単に言えばクリスタのデフォルトのカラーサークルであり、色調補正に出てくる
色相（Hue）彩度（saturation）明度（Brightness）
の事で、要はあのカラーサークルの○と□の数字版なんですよね https://t.co/3HAL7edSme
— シガニーウィーバー〄 (@tokitamonta) August 7, 2021