カラーパネルについて①／AffinityPhoto2・AffinityDesiner2

色を指定する際には必須となる「カラーパネル」について解説します。

初期表示されているカラーパネルは「ホイール」です。
共通項目も多いので、とりあえず「ホイール」から解説していきます。

境界線カラーセレクター／塗りつぶしカラーセレクター

境界線の色（ドーナツ型）と、塗りつぶしの色を表示します。
前に出ているほうが、アクティブです。
色を選択するとアクティブな方（前に出ているほう）に色が設定されます。



境界線と塗りつぶしのアクティブを切り替えたい場合は、カラーセレクターをクリックするか、Ｘキーで切り替えられます。

塗りつぶしなし（色なし）を設定

クリックすると、アクティブな方のカラーを削除します。



境界線がアクティブになっていると、境界線の色を削除します。


「塗りつぶしなし」というと、境界線は削除できなそうに見えますが、翻訳の関係でそうなっているだけで、動作的には「色なし」です。

境界線と塗りつぶしの色を入れ替え

境界線と塗りつぶしの色を交換します。
ショートカットキーはShift＋Ｘ　です。
結構使ってます。

ちなみに、Ｄキーを押すと、「塗りが白、境界線が黒」にリセットできます。
選択中のオブジェクトも色がリセットされてしまうので押し間違いに注意。

カラーピッカー

画面上の色をスポイトすることができます。
確か、MACの人はコレ使おうとすると何か許可を求めるメッセージが出るハズ…
（自分はWindowsユーザーなので詳細分からず…。ウイルスっぽいメッセージが出るけど大丈夫です）

スポイトアイコンを掴み、ドラッグして、色を拾いたいところでマウスを離すと、カーソルがある場所の色をスポイトして拾うことができます。





画面外にドラッグすれば、AffinityDesignerじゃないウィンドウの色とかも拾えます。

一度スポイトした色は、スポイトアイコンの横に記憶されます。
スポイトアイコンをクリックすると、その色が適用されます。

色相／彩度・明度

外側のホイールで色相（赤、青、黄色などの色）を選び、
真ん中の三角部分で明度（明るい／暗い）と彩度（色が鮮やか／無彩色グレー）を選びます。

外側のホイールを選ぶとき、Shiftを押しながらドラッグすると、45度ごとにスナップします。

最近使用したもの

ホイールの右側に、最近使用した色が10個表示されます。
左上から右下にかけて、過去のものが押し出されていきます。

その上に、黒と白のスウォッチが置いてあります。ちょっとややこしい。

カラーコード

現在選択している色のカラーコードが表示されます。
ここに直接カラーコードを入力して、色を指定することもできます。
WEB制作している人には便利。

ＨＳＬの値

現在選択している色のＨＳＬの値が表示されます。

不透明度

色の不透明度を設定します。
0に近づくにつれて、背景の色が透けて見えます。





効果を狙ってならいいですが、単純に「色を薄くしたいから」という理由で、不透明度をいじるのは避けたほうがいいです。

下にオブジェクトがあれば透けますし、カラーモードや設定によっては予期せぬ色になったりします。

カラーパネルについて②で紹介する、「色合い」や「ＨＳＬ」を使うと簡単に色が薄くできるので、そちらを使ってください。

ノイズ

「不透明度」と書かれている下の〇部分をクリックすると、ノイズに切り替わります。
色にノイズを加えることができます。
ちょっとした質感が出るので便利です。

パネル環境設定

カラーパネルの環境設定を表示します。
「スライダー」「ボックス」「色合い」については次回説明するとして、先に他の部分を説明します。

正方形

カラーホイールの三角部分（彩度・明度）を四角にします。
上下が明度、左右が彩度です。

色を16進数としてクリップボードにコピー

16進数のカラーコードをクリップボードにコピーします。
カラーパネルの右下に表示されているコードです。



たまにうまく動かないことがあるので、その際は色を指定し直すとちゃんとコピーできます。

色をスウォッチに追加

現在アクティブな色をスウォッチの最後に追加できます。
スウォッチの使い方については後日ブログを書く予定(=・ω・=)

コードをスウォッチに追加

指定した色から、それぞれいい感じに調和のとれた色を作成します。
作成した色はスウォッチの最後に追加されます。



どんな色かは、カラーホイールを見ていくと分かりやすいかと思います。





正直、配色を考えるときは専門のサイト使ってるので、あんま使ってないです(´・ω・`)

一応、それぞれの役割として

インパクトを出したいときは「補色」
補色ほどインパクトを強くしたくないなぁって時は「分裂補色」

落ち着いた雰囲気や安心感を出したいときは「類似色」
調和を保ちつつもちょこっとにぎやかにしたいときは「アクセント色と類似色」

カラフルで元気な印象にしたいときは「３色配列」
もう一色加えたいときは「正方形」
華やかにしつつもちょっと正方形より抑えたいときは「４色配列」

色を統一したいとき、
明るく華やかで清潔感や軽やかさを表現したいときは「色合い」
力強さや重厚感、深み・立体感を出したいときは「陰影」
落ち着きや穏やかさ、シックなイメージを作りたいときは「色調」

というのがあるんですが、皆さま。
「赤の反対の色は緑」とどこかで聞いたことがあるのではないでしょうか？

(=・ω・=)あれ？　赤の反対の色は「水色」だよね？？？



こちら、「物理補色」というのと「心理補色」というのがありまして、
赤の物理的な補色（色を混ぜ合わせるとグレーになる）は水色なんですが、赤色をじーっと見た後に、残像で浮かび上がってくる色は青緑色です。

この青緑色を「心理補色」と呼び、それをもとに配置し直した色相環がいろいろあります。
マンセル表色系やオストワルト表色系、色彩検定でおなじみのＰＣＣＳなど。

配色を考える際、物理補色より、心理補色の方がキレイに行くことが多いです。

AdobeColorの色相環はこんな感じで、補色が緑になってます。


なので、Affinityの「コードをスウォッチに追加」で色を作るのではなく、AdobeColorとかを使った方がいいんじゃないかなーって思います。(=・ω・=)
あくまで、好みなので参考程度に。

AdobeColor
https://color.adobe.com/ja/create/color-wheel

「探索」をクリックすると他の人が作った配色案がいろいろ出てくるので、その中でいい感じのを探すのもアリかなって思います。

一応、Adobe製品使っていなくても使えます。

閉じる・グループを閉じる

他のパネルと同じです。
閉じる…パネルを閉じる
グループを閉じる…後ろにあるパネルごと全部閉じる。

カラーパネルについて②　に続く