きれいな色を選ぶ方法

良い色を選ぶことは芸術ですが、きれいな色を簡単に選ぶために使用できるいくつかのトリックがあります。この記事には2つのパートがあります。まず、優れたカラーパレットを構成するものについて説明し、次に、見栄えの良いパレットに到達するために使用できる数式の概要を説明します。

免責事項:これは、良い色を選択する唯一の方法から遠く離れており、私が採用するようになった経験則のセットです。私の希望は、これがあなたのウェブサイト/アプリ/ゲーム/あなたが持っているものに合った色を選ぶのに役立つことです。

カラーパレットとコントラスト

まず、色が孤立して存在しないことを認識する必要があります。きれいな色とは、明るい色や暗い色、彩度の高い色、彩度の低い色ではありません。色の選択について考えるとき、個々の色について考えるのではなく、色のセットやカラーパレットの選択について考える必要があります。

左から右:スーパーマリオラン、モニュメントバレー、アルトのオデッセイ、ララクロフトゴー

色のセットの観点から考えるとき、それらの相互作用について考える必要があります。特定の色を際立たせるべきなのか、それとも互いに溶け込むべきなのか?これはコントラストと呼ばれます。

きれいな色を選ぶことは、多くの場合、設計に適したコントラストを選ぶことになります。

デザインで使用する色がどのように機能するかによって、見た目の美しさが決まります。しかし、色のコントラストに関しては、いくつかの方法があります。

明るさ別名。ライト/ダーク

明るさは、視覚化が容易なコントラストの一種です。 HSBカラーピッカーでは、これは垂直軸に沿って移動することに対応します。

輝度

一般に、明るさの差を増やすだけで、2色間のコントラストの量を増やすことができます。

輝度コントラスト

これは簡単ですが、素晴らしいパレットを作成するには不十分です。白と黒の量が異なるだけの色は、より多くの次元で相互作用する色ほど興味深いものではありません。それは…

色調コントラスト

色調と彩度レベルの観点から色調のコントラストを考えることができます。明度と同様に、色相または彩度の差を大きくすると、一般に色間のコントラストの量が増加します。

色相コントラスト彩度(HSBの水平軸)、および彩度コントラスト

それでも、これらの値だけでは全体像を描くことはできません。色相や彩度が異なっていても、コントラストの低い色を選択できます。

異なる色相と貧弱なコントラスト異なる彩度と低いコントラスト

何が得られますか?答えは、色相ごとに固有の色調値が異なるということです。多くの人々(私自身も含む)にとって、さまざまな色相がどのような色調の値をとることができるか想像するのは困難です。それは私のお気に入りのトリックに私をもたらします...

グレースケールハック

カラーをグレースケールで表示する場合、結果のグレーの明るさは、さまざまなカラートーンの値の適切なインジケータとして機能します。それだけでなく、アクセシビリティのために設計するときにも役立ちます。これは、色相に依存しないデザインに存在するコントラストの量を視覚化する簡単な方法です。

異なる色相の固有の色調値

これらの色調値がHSBカラーピッカーでどのように見えるかを見てみましょう。また、右端の列で強調表示されている各色相のスペクトルで色調値がどのように変化するかに注意してください。

前のサンプルの一部をグレースケールで見ると、どの色が高コントラストと低コントラストを持っているかがより簡単にわかります。

彩度コントラスト:上部のコントラストが高く、下部のコントラストが低い。色相コントラスト:上部のコントラストが高く、下部のコントラストが低い。

上記のゲームをもう一度見てみましょうが、今はグレースケールです。

フォアグラウンドがバックグラウンドからどのようにポップするか、インタラクティブな要素が非インタラクティブな要素とどのように対比されるか、ゲームがずっとグレースケールである場合にどのようにプレイできる可能性が高いかを簡単に確認できます。重要なポイントは次のとおりです。

グレースケールハックを自由に、そして頻繁に使用して、デザインに存在するコントラストを視覚化します。

かなりのコントラストがきれいなカラーパレットを作るので、私はあなたに提示します…

プリティカラーパレットを選択するための式

上記で行った分析を適用しますが、逆に、グレースケールデザインから始めて、対応する色の選択に向かっていきましょう。

1:コントラストが必要な場所を決定する

デザインのワイヤフレームを作成し、ワイヤフレームのどの領域に多くのコントラストが必要で、どの領域にコントラストをあまり必要としないかを決定します。

2:グレーシェードを使用してデザインに色を付ける

ワイヤフレームデザインをグレーの濃淡だけで色付けしてみてください。デザインの中で最もコントラストが必要な領域の輝度の差が最も大きくなるようにしてください。デザインの最終解像度でこの手順を必ず実行してください。小さいデザイン(ロゴやアプリアイコンなど)では、より細かい要素を定義するために、特に高いコントラストが必要になる場合があります。

3:ベースの色相を選択してください
使用する基本色相を選択します。これは主観的な部分であり、ShapeFactoryのPigmentやAdobe Color CCなどのツールを使用して選択できます。おもしろい事実:一部のカラーコンボは人気が高いため、ロープステータスに達しました。

4:調色値が一致するように色を調整します
色相を決定したら、その色相の下の色調値の範囲が、前にスケッチしたグレーの色調値にほぼ対応していることを確認します。カラーピッカーで明るさと彩度の値を操作しながら、画面の色とグレースケールを切り替えます。目標は、グレースケールで表示したときに、パート2のデザインと一致するカラーパレットに到達することです。

例1

(1)ワイヤーフレームと(2)グレーの濃淡での好ましいコントラスト(3)基本色の選択

上記のカラーパレットを作成する場合、各色のどの領域がグレースケールデザインにほぼ対応するかを見つけます。

基本色の対応する階調値領域

これらの領域内のどこからでも色の組み合わせを選択できるようになりました。

(4)カラーパレットのオプション

例2

アプリオーバーリンクを開発するときのプロセスは次のとおりです。

プロセス:左から右、上から下:ワイヤフレーム、グレースケール、ベースカラー、最終

おめでとうございます!うまくいけば、必要な場所とは対照的な色のセットを選択し、そうでない場所をブレンドし、全体的にきれいに見える色のセットを選択できるようになります。

コントラストだけでは、デザインが見栄えが良いかどうかを決定する重要な要素にはなりませんが、カラーパレットが見栄えがするかどうかで重要な役割を果たします。

オーバーリンクは、この記事を刺激したプロジェクトです。 3Dロジックパズルが好きなら、iOSで(無料で)ダウンロードできます:https://itunes.apple.com/au/app/overlink/id1453086788