ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【design】配色について【随時更新】

  1. 「色」の基礎知識
    1. 大まかな分別
    2. 3つの要素
  2. webdesignでの配色
    1. 目的で考える
    2. 色相から考える

1.「色」の基礎知識

大まかな分別

物体色
光の反射によって受け取る色。
光源色
光を放つ光源自体から受け取る色。

3つの要素

Hue(色相)
色の相違(赤、青、黄など)
Saturation(彩度)
色の鮮やかさ
Brightness(明度)
色の明るさ、明暗。

2.webdesignでの配色

目的で考える

ベースカラー(全体の70%)
一番大きい面積を占める色。目立つというよりは背景的に使用するため、他の色やコンテンツを引き立てるものを選ぶ。
メインカラー(全体の25%)
そのサイトのメインとなる色。個人的にはロゴの配色から選ばれている事が多い印象です。この色でサイトの印象を決めます。
アクセントカラー(全体の5%)
サイトを引き締める役割を持つ色。他の2色に合いつつも、目立つものを選択する。ボタンだったり注目してほしい要素に使用。個人的にはロゴの色がアクセントカラーに使用されている場合も多い気がします。

色相から考える

Monochrome モノクロ
同じHue(色相)内でSaturation(彩度)とBrightness(明度)を変えて行く。シンプルな印象や高級感のある配色になる。
Triad トライアド
色相を三分割(90度ずつ割る)して3つの色を使う。それぞれが一番遠い距離にある色な為、違いがハッキリする。バラエティに富んだ印象に?彩度低めに使っても地味すぎない配色になる。
Complementary color 補色
色相で向かい合う2色の色を使う。違いがかなりハッキリする為、両方の色が目立つ。派手な印象に。

参考
覚えるのは色相・彩度・明度の三属性だけ! 初心者のための色彩講座 | いちあっぷ
絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎 | 秋田県webデザイナー【weblog】|秋田HP制作・webサイト制作
Adobe Color CC
WEBデザインで押さえるべき配色(ベース、メイン、アクセント)の基本「3つのカラー」|TECHNICAL BLOG|株式会社エムハンド