
色選び、配色に利用したいHSB
先日、すぴか式 『分かりやすいデザイン!』のおはなしというオンラインセミナーに参加しました。その中で講師のすぴかあやか(角田綾佳)さんのHSBについての説明「水彩絵の具に例えると…」がわりやすく、ストンと落ちました。
• H(Hue 色相):どの色のチューブを選ぶか
• S(Saturation 彩度):水を足していくと薄くなる
• B(Brightness 明度):黒を足していくと暗くなる
「すぴか式 『分かりやすいデザイン!』」でのHSBの説明が絶妙にわかりやすかった。
— DTP Transit (@DTP_Transit) August 7, 2021
・H:どのチューブを選ぶか
・S:水を足していくと薄くなる
・B:黒を足していくと暗くなる
(@motionelements の主催イベントでの @spicagraph さんの講演「色選びはRGBよりHSBがおすすめ」から) pic.twitter.com/P1Tt8sInRC
知らない方はいないと思うのですが、すぴかあやか(角田綾佳)さん。
⚡️ "デザイナーの秘密道具@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)
統一感のある配色を行いたいときに有効なのがトーン(彩度と明度)を合わせること。Illustratorなら[オブジェクトの再配色](通称「ライブカラー」)を使うとスピーディに行えます。
2020年10月リリースのIllustrator 2021から[オブジェクトの再配色]のUIが変更になりました。それ以前のIllustratorをお使いの方は、[編集]タブに切り替えて設定します。
iPad向けの各アプリのUI
iPad向けのPhotoshop、Fresco、IllustratorではデフォルトのカラーホイールにてHSBの仕組みになっています。
ただし、細かい点でUIには統一感がなく、同じ会社の製品とは思えないくらい自由です…!!
クリップスタジオペイント
クリップスタジオペイント(クリスタ)でもHSBカラーピッカーが実装されているようです。
HSBって言うと特殊フォーマット?難しそう!に感じるかもしれないんですが、簡単に言えばクリスタのデフォルトのカラーサークルであり、色調補正に出てくる
— シガニーウィーバー〄 (@tokitamonta) August 7, 2021
色相(Hue)彩度(saturation)明度(Brightness)
の事で、要はあのカラーサークルの○と□の数字版なんですよね https://t.co/3HAL7edSme
自分も最初HSB見たときになんじゃこりゃ?と思ったのですがHueの単位が度数なことに気づきカラーサークルと一致して一気に楽になりましたw
— シガニーウィーバー〄 (@tokitamonta) August 7, 2021
MotionElementsのセミナー
すぴか式 『分かりやすいデザイン!』のおはなしは、MotionElements主催のオンラインセミナーでした。MotionElements(通称「モーエレ」)は、動画素材、アフターエフェクト、テンプレート、ロイヤリティフリー音楽素材を扱っているロイヤリティーフリー動画素材サイトです。
「これは受けたい!」という興味深いセミナーを継続的に企画されています。
定額制プランに入ると、過去のセミナーのアーカイブ動画を見られるとのことで、観念して加入しました…
ここから先は

DTP Transit 定期購読マガジン
マガジン限定記事やサンプルファイルをダウンロードできます。
定期マガジンを購読されるとサンプルファイルをダウンロードいただけます。 https://note.com/dtp_tranist/m/mebd7eab21ea5