HSBの色相環

HSBは色相を角度で表しますので、色相環を作ることは非常に簡単です。20色の色相環なら18°ずつ色を変えて色相環を作っていくだけでよいのです。

しかし右の色相環をご覧いただければおわかりのように、HSBの色相には偏りが見られます。aとbはほぼ同じように見えるのに対して、cとdはかなり大きな差があるように感じられます。それぞれの色相環の色の差が均等でないと、配色について考えることが難しくなります。

HSBの色相環と均等な色相環

ここでは見た目の色の差が均等な色相環を用い、それに基づいて配色を考えていくことにします。これにより色彩調和論に基づいた配色が可能となります。PCCSやマンセルシステムのような知覚的に等間隔な色相環をご存じない方は、下記の表を用いて色相の差を考えていくことにしましょう。ただしモニターなどの閲覧環境やHSBの特性によって必ず正しい色が再現できているるわけでないことをご了承下さい。

関連記事：

• 色相とは
• 色相だけを変えてサブカラーを作る
• 色相を分析する
• 線の太さと色のコントラストから強調を考える
• 「文字の読みやすさ」に関するアンケートの設問について

トーンとは明度と彩度の複合概念

※今までに色彩を学習したことのある方でPCCS（日本色研配色体系）やCCIC（商工会議所カラーコーディネーションチャート）のトーン表をお持ちの方は、このページに掲載しているトーン表は見ずに、そちらの方をご覧下さい。PCCSのトーン表の掲載は著作権の侵害となりますので、このウェブサイトでは独自でHSBを使ったトーン表を作成したことをご了承の上下さい。

トーンとは日本語で色調のことで、明度と彩度を複合した概念です。まずは下のトーン表をご覧下さい。同じトーン同士で配色をまとめると明度、彩度が近い色が集まるため、調和しやすくなります。

HSBを使い、SとBを変えずにHだけを動かせばトーンが出来ます。ここでは便宜上、彩度の段階を4つに分けておりますが、他の数値でも全く問題はありません。ご自分のイメージに近いトーンを作り出してから配色を考える方法もありますので、一度トーンの作成をお試し下さい。

明度、彩度が100のトーン

明度と彩度が共に100の場合は原色となります。派手なイメージが表現できますが、このまま使用して配色するとまぶしくて目が疲れる配色となる可能性がありますので、なるべく使わないようにすると、妙に華美でうさんくさい配色から一歩遠ざかることが出来ます。

関連記事：

• トーンからのイメージ
• 彩度とは
• 明度とは
• HSBカラーモデル
• リンク、トラックバック、コメントについて

トーンからのイメージ

また同じトーン同士でまとめると非常にイメージが作りやすく、明度、彩度が近いため調和しやすく、「派手な」とか「優しい」などといったイメージを生み出しやすいのが特徴です。

トーンを上手く利用できれば、配色の幅が広がります。トーンから生み出される代表的なイメージを下記の表にまとめております。ご自分が表現したいイメージの単語を見つけだしておけば、トーンを用いた配色が出来るようになりますので、自分が今から配色するウェブサイトのイメージにふさわしいトーンを見つけておきましょう。

トーン12を見て明るくかわいらしいイメージが浮かぶなど大きくトーンがずれる場合はともかく、隣接したトーンくらいでイメージとイメージワードがずれていても、それほど大きな問題ではありません。どの辺りのトーンが自分が表現したいことに近いのかを覚えておくだけでも結構です。

関連記事：

• トーンとは
• 言葉からの色彩イメージ
• 配色の調整
• 情報を見せる背景色
• 関連サイトの紹介

「FE – Color Palette」のご紹介

Windowsをお使いの方で、HSBを扱うことの出来るグラフィックソフトをお持ちでない方は、何らかのソフトを用意してHSBを扱える環境を整える必要があります。

他のソフトでも可能ですが、「FE – Color Palette」という非常に優秀なソフトがフリーソフトとして配布されておりますので、こちらを利用して配色を進めていくことをおすすめいたします。

Windowsの「色の編集」パネル

Windowsの「色の編集」パネルは色合い（色相:0-239）、鮮やかさ（彩度:0-240）、明るさ（明度:0-240）で色を決めることになります。こちらでも色の三属性による配色は可能ですが、HSBとWindowsの色の編集パネルでは明度と彩度の扱い方が違いますので、注意が必要です。

関連記事：

• HSBカラーモデル
• 環境による見え方の違い
• 色相を分析する
• HSBの色相
• Webプロフェッショナルのための黄金則 Web配色デザインのセオリー

HSBとは

HSBカラーモデルとはコンピューター上で扱う色を数値化した物の一つで、色の三属性である色相(Hue)、彩度(Saturation)、明度(BrightnessもしくはValue)を用いて色を指定するものです。マシンやOS、ソフト等によってHSV（VはValue)もしくはHSL（LはLightness)と呼ばれるものもあります。これらは異なるものですが、ここでは同じものと考えても差し支えないでしょう。

このホームページでは呼称をHSBで統一して説明していきます。

Illustrator、PhotoshopとMacでのHSB

これらのソフトとMacでは標準でHSBで色を変える機能がついております。またその他のグラフィックソフトでもHSBを扱える物は数多くありますので、お手持ちのソフトなども一度ご確認下さい。

左側の色空間は横軸に彩度がとられており、右にいくほど彩度が高くなっていきます。縦軸は明度となっております。上に行くほど明度は高くなり、明るくなっていきます。これら2つは0～100%の範囲で調整が可能です。

右側にあるのは色相のバーです。一番下が赤の原色(0°）で、上にいくにつれて橙、黄、黄緑と色相が変わっていき、最後には赤（360°= 0°）に戻ってきます。

注意しなければならないのは明度100%の色が白ではないことです。選ばれた色相と彩度における最も明るい色が100%となりますので、白に近づける場合には彩度を下げながら、明度を上げていくことになります。つまりトーンを移動させて白に近づけていくのと同じ事になります。

関連記事：

• WindowsでのHSB
• ベースカラーを決定
• 色相を分析する
• 彩度だけを変えてサブカラーを作る
• CIカラーの扱い方

彩度とは

彩度とは色の鮮やかさを表す属性です。彩度も明度と同じように「高い」「低い」でその度合いを表します。彩度が最も高い色は鮮やかな原色となり、彩度が低くなるにつれてくすんだ色みを感じない色に変化し、最後には無彩色になります。

彩度が高い色は派手な印象を受け、彩度の低い色は地味に感じます。

関連記事：

• 明度とは
• 派手な色と地味な色
• 色相とは
• 彩度だけを変えてサブカラーを作る
• 明度と彩度を分析する

明度とは

明度とは明るさの違いのことで、最も明るい色は白、最も暗い色は黒となっております。

通常明度を表す場合は明るい色のことを「明るい」「明度が高い」というような表現をします。

明度と読みやすさ

明度は色相、彩度といった他の属性よりも文字の読みやすさに直接影響してきます。文字を読みやすくするためには明度の差を大きく取ることが基本となってきます。情報が読めないとホームページの価値は一気に下がってしまいますので、明度差の取り方には十分注意しながら配色を行うようにします。

関連記事：

• 明度だけを変えてサブカラーを作る
• 彩度とは
• 明度と彩度を分析する
• カラーイメージを見せる背景色
• 文字の読みやすさに関するまとめ

色相と色相環

色相とは赤、青、緑のような色味の違いのことを表します。色相はイメージの違いを最も表現することが出来る属性です。

また色相を円上に配置したものを色相環と言います。同じ赤の中でも赤紫に近い赤や橙に近い赤など色々な赤がありますが、ここでは代表的な赤、黄、緑、青、紫の5色にその中間の色を加えて赤、橙、黄、黄緑、緑、青緑、青、青紫、紫、赤紫の10色を作り、その中間にもう1色加えて全部で20色相の色相環を作っております。

類似色相

よく似た色相のことを表します。厳密にどこまでを似ているというかは大きな問題ではありませんが、色相環の上の5を基準にすると、3～4と6～7くらいまでを、類似色相として覚えておけばよいでしょう。

補色

この色相環の正反対に位置する色のことを補色と呼びます。補色同士を並べて配置するとお互いに引き立て合って鮮やかに見えます。しかし使いどころを間違えると、まぶしくかえって見えにくくなってしまいます。

関連記事：

• HSBの色相
• 明度とは
• 色相だけを変えてサブカラーを作る
• 色の三属性の２つを動かす
• 環境による見え方の違い

パソコンの画面などは光の三原色と呼ばれる赤(red)・緑(green)・青(blue)の組み合わせによって全ての色を再現しています。このような色の決め方をRGBカラーと呼んでいます。光を混ぜ合わせていくので、重なれば重ねるほど明るくなっていき、3色が重なる部分は白になります。

現在のコンピューターではRGBはそれぞれ256段階の値を持っています。つまり256の3乗で16,777,216色を再現することが可能になります。

ホームページで配色する場合はこの256段階を16進数に変換し、最初に#を付けて使います。

大きい面積の原色

上記のRGBのイメージ図を見ていただくと、R:#FF0000 G:#00FF00 B:#0000FFなどは、かなりギラギラとまぶしい感じで見えていると思います。安易に目立たせたいからという理由で#FF0000の赤などを使ってしまうと、逆に読みにくくなったりすることもありそうですよね。

理論上は白が一番光の量が多くなりますので、眼に対する刺激も強いはずですが、心理的なストレスは各色の原色などの方が強くなると感じられているのではないでしょうか？

この先ではこれを回避する方法についても考えていきます。

関連記事：

• 彩度とは
• HSBの色相
• 環境による見え方の違い
• HSBカラーモデル
• 悩んだら色を減らす

有彩色と無彩色

色彩には大きく分けて色みのある有彩色と、白・黒・灰色など色みを感じない無彩色があります。

有彩色は一番左の写真のように赤・青・黄・緑などの色味が感じられる色のことです。無彩色は右の写真のように色味が感じられない白・黒・灰のことを指します。

もちろん中央の写真も有彩色となります。少しでも色みがついていれば有彩色となります。

関連記事：

• 彩度とは
• 色相を分析する
• 暖色と寒色
• 色相とは
• 画像を見せる背景色