読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

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|株式会社エムハンド