Design Stock

デザインのアレコレ

  1. HOME
  2. 混色系と顕色系 ー ひとが色選びに失敗する理由とその解決策

混色系と顕色系 ー ひとが色選びに失敗する理由とその解決策

色のついた葉

デザイン制作で特に難しいのが色の組み合わせ、つまり「配色」だ。
配色はとても奥が深く、専門家が作り上げた配色理論が多く存在するほどだ。

しかし、うまい色の組み合わせを実現するためにそれらの配色理論を学ぶのは骨が折れるだろう。なので今回はノンデザイナー向けに、ひとが色選びに失敗する大きな要因の一つ、「混色系と顕色系」の考え方について紹介し、表現したいイメージに適した配色を実現してくれる便利なツールについて紹介する。

 

混色系と顕色系

混色系と顕色系

色を数値や記号で表す方法は主に2種類。それは「混色系」と「顕色系」だ。
この2つの違いに実はひとが色選びに失敗する理由が隠されている。

 

混色系

RGB色空間

混色系とは、「赤・白・黒」など何個かはじめに元となる色を決めて、それらの混ぜ具合によって色を表現する方法だ。
RGBやCMY、XYZなどがこれにあたる。

そして重要なのが、この表現手法は人間向きではないということだ。
というのも、混色系は機械で使われることを想定して数学的に扱いやすよう設計されているのだ。

 

顕色系

顕色系

一方、顕色系とは「色相・明度・彩度」という色の三属性で表現する方法だ。
こちらは混色系とは異なり、人間の知覚に近い形で色を配置したものになる。

つまり、人間向きの表現手法なのだ。

すると、上手い色の組み合わせを実現するには、

  • 色相
  • 明度
  • 彩度

の3点を意識すること大切だといえる。

 

上手な色の組み合わせ方

カラフルなサボテン

では色相・彩度・明度とは一体何なのか、既に知っている方もいるかもしれないが改めて説明する。
また、それらを変えて上手い色の組み合わせを実現する具体的な方法を紹介しようと思う。

 

意識すべき3つのポイント

色相

色相環
色相とは、赤や青といった「色みの性質」の違いのことを指す。
上図は見かけたことのある人も多いと思う。無数にある色の中から代表的な色をピックアップして円にした「色相環」と呼ばれるものだ。

 

彩度

彩度

彩度とは、「色の鮮やかさ」のことだ。
もっとも彩度が高い色を「純色」、もっとも彩度が低い色を「無彩色(グレー)」になる。

 

明度

明度

明度とは「色の明るさ」の度合いを指す。
明度が高ければ高いほど「白」に近づき、低くなればなるほど「黒」に近づく。

 

色相・彩度・明度を変える方法

3つの値を調整するには、以下のカラーピッカーと呼ばれるツールを使用する。
赤枠で囲ってある「HSB」というバーが「色相(Hue)・彩度(Saturation)・明度(Brightness)」と対応している。

カラーピッカー

IllustratorやPhotoshopなどのデザインツールを普段から使用している人は見慣れているだろう。
メインカラーを一つ決めたら、これらの値を何度か調整してみて、統一感のある色を見つけるのがいい。

ただし、注意しなければならないのが、先ほども述べたとおり、これはRGB空間といって人間向きではない。
RGB空間は可視光の空間のことをいい、彩度が高くなりやすいのだ。

もちろんRGB空間でも最適な色が見つかれば問題ないのだが、いかんせん彩度の高い配色はノンデザイナーにとっては難易度が高い。

そこでおすすめなのが、顕色系の色空間「マンセル色空間」を使って最適な色を見つけることができる「HUE/360」というサービスだ。

 

顕色系の配色ツール「HUE/360」

HUE/360

HUE/360」では、好きな色を選択すると、それに合う他の色を自動的に検出してくれる。
選択した色は下のバーに表示され、「Print User Color」というボタンを押すと16進数で表記されるのでコピー&ペーストも簡単だ。

開発してくださったのはフリーのデザイナーとして活動されているおばら つかささん。

ぜひ、今回紹介した方法とツールを使って目的に合った色の組み合わせを見つけてほしい。