カラーパレットの作り方

自分だけのパレットの作り方は無数にあります。有名な配色ルール、写真から拾う、オンラインジェネレーターなど。でも一色一色を丁寧に選びたいときはどうでしょう。

ゼロから5色パレットを作る

ステップ1

First, go to PaletteMaker App and empty the palette by clicking on x on each color cell. Leave only first color (of your choice), must be bold strciking accent color. Find the preview of your choice, we recommend the “branding and logo” grid preview with little arrow symbols inside. With this preview, you instantly will see bunch of variations and understand how colors work on top of each other, and quickly know if the value is correct. Learn more about the value here

ステップ2

二色目もはっきりしたアクセントにしますが、明度のバランスが二人で取れるか確認してください。

ステップ3

三番目と四番目はニュートラルに。最後の五番目もはっきりしたアクセントにし、最初の二色と補色的にまとまるようにします。まとめると次のようになります。

例

3色パレットの作り方

3色なら60/30/10のルールが有効です。配色の定番で、デザインへの色の配分の目安になります。

1. 60%は主役のメインカラー。舞台を整え、他の色を引き立てます。
2. 30%は補完的な色。
3. 10%は目を引くアクセント。個性を出します。

出発点のルールであって絶対ではありません。自由に試してプロジェクトに合う組み合わせを探してください。「Web / モバイルUI」のランディングページプレビューは60/30/10の確認にバランスが良いです。