Color

一般的な色彩理論と、ホームページで利用しやすいWebセーフカラー情報。 バイクの塗装などにも役立つ塗装技術も紹介します。

Webセーフカラー

Webセーフカラーの定義は下記のようになっています。

1994年にNetscape Communications社が提案した、216色からなる色の集合。インターネット上でカラー画像などを公開すると、閲覧者のコンピュータの環境によっては同時表示色の制限などから正しく色が再現されないことがある。このためNetscape社は、最低限必要と思われる216の色を選定し、同社のWebブラウザであるNetscape Navigatorで閲覧すれば、OSやコンピュータの違いによらずどんな環境でもこれらの色が必ず表示できることを保証した。これがWebセーフカラーである。Webページの作成に使われるHTMLでは、赤・青・緑の三原色それぞれを256段階に分けて、その組み合わせにより1677万7216色が使用可能だが、Webセーフカラーでは赤青緑それぞれを6段階に分けて216色が定義されている。 出典:IT用語辞典 e-Words

Webセーフカラー表示の仕方

Webセーフカラー216色は16進数で表示し、RGBで各2桁づつ計6桁使用します。

各色はRGBの明るさで6段階(00,33,66,99,CC,FF)指定でき、 各RGBの6段階の組み合わせで6×6×6=216の組み合わせとなる訳です。 216各色です。

websafecolor

色指定について注意事項

Webセーフカラーは「Netscapeでは保証するよ」ということですが、他のブラウザ/機器での保証はありません。(Netscapeも2008年には終了です) W3Cの勧告を見ると、「6.5.1 Notes on using colors

  • HTML要素で直接指定せず、スタイルシートで指定する。
  • 色の組み合わせは色覚異常の人も考慮する。
  • 背景(色)を設定する場合は、上にのる文字も適切な文字色にする。 と書いてあります。(カラープロファイルに関するところは省略してます。)

要はどうすれば良いか・・・

「色定義はスタイルシートで定義し、デバイスに合わせてスタイルシートを切り替えろ」が現時点での現実的な解答だと考えています。

色彩理論:配色の基本的知識

色彩調和理論にをベースにしたカラーコーディネートの方法を紹介します。

配色の構成要素には共通した法則性が有り、面積に比例します。

ベースカラー基調色(base color)

一般に配色の対象となる部位で、最も大きい面積の部分を占める色で、地色や背景色となりやすく、全体色調の中では最も抑えた色の場合が多い。

ドミナントカラー主調色(dominant color)

用いられる配色の中で、最も出現頻度の高いまたは大きい面積を占める色は全体色調に影響にを及ぼし、同系色や類似色と同化しやすく主調色となりやすい。また統一的印象を与える。

アソートカラー従属色(assort color)

主調色に次いで面積比の大きい、出現頻度の高い色で、通常、主調色を補佐する役割を持つ。この場合、同一、類似、対比、補色などの関係が出てくる。(サポーディネートカラーともいう)

アクセントカラー強調色(accent color)

別名、装飾色とも考えられる部分で、面積的に最も小さく取り扱われるが、配色の中で最も目立つポイント色で、全体色調を引き締めたり、視点を集中させる効果がある。

WEBページレイアウトのサンプル 1

暖色系でのページレイアウト時のサンプルを提案してみます。

タイトル (従属色2) タイトル部分(従属色1)
メニュー (主調色1) メニュー文字は強調色 背景(基調色)
  • 背景は最も広い面積を占めるので抑えた色調にしてみます。(#FFFFCC)

  • メニュー選択部分は背景の次に大きな面積なので背景と同系色にし、若干彩度をあげた色にします。(#FFFF99)

  • タイトルは狭いながらもメニューや背景よりも引き立たせるため明度を下げます。(従属色1#FFCC66)また角の部分はトーンをすこしずらした色にしました。(従属色2#FFCCCC)

  • メニューの文字は強調させるためメニュー地色の補色にします。(強調色#333399)

WEBページレイアウトのサンプル 2

白黒グレーの無彩色をメインにしたサンプルです。この場合には広い面積は薄く、狭い面積は濃くという法則にしましょう。RGBの値をすべて同じにすると無彩色になります。Webセーフカラーでは6段階選べる訳です。

タイトル (従属色2) タイトル部分(従属色1)
メニュー(主調色1)メニュー 文字は強調色 背景(基調色)
  • 背景は1番明るいグレー(#CCCCCC)
  • メニューは2番目(#999999)
  • タイトルは3番目(#666666)にします。またグレーは純度の高い色と良く合うので赤色にします。(#FF3300)
  • グレーは青や紫などの暗濁色にも合わせられるのでこい青色にします。(強調色#000066)

まとめ

少々乱暴にまとめてしまうと広い面積は薄く、狭い面積は濃く。また色調は基本的には合わせる。白黒灰の無彩色はほとんどどの色に対しても合わせる事が出来る。ということですね。

色彩理論:カラーコーディネーションパターン

色の組み合わせは表情や心理的イメージを決定づける大切な要素になります。コーディネーションのパターンを紹介します。3色のサンプルも紹介します。

カラーコーディネーション

ユニティコーディネーション ハーモニーコーディネーション バラエティコーディネーション
・色相を同系色で統一したり明度差により変化をつける。 ・色相を類似色相でまとめ(寒色系、暖色系など)明度、彩度ともに近いもので組み合わせる。 ・反対色相を組み合わせたり(寒色系と暖色系など)明度、彩度ともに差のあるものを組み合わせる。
まとまりのあるイメージを与える。 心地よいリズム感を与える。 個性的なイメージを与える。
#CC6633 #339999 #CC6633
#993300 #669999 #006633
#990000 #336699 #663399

色彩理論:材料と技術

バイクの外装部品等に良く用いられるプラスティックの種類について説明します。 バイクで使用されている樹脂については詳しく説明します。

(1)プラスチツクの定義

JlSK6900ではプラスチック(plastics)を次のように定義しています。 「高分子物質を主原料として人工的に有用な形状に形作られた固体である。ただし、繊維、ゴム、塗料、接着剤などは除外される」

(2)プラスチックの一般的性質

金属など他の材料に比べ、一般的には次のような性質がある。

長所

  • 比重が小さい。錆びない。
  • 成形性が臭く形が自由にできる。
  • 着色性がよい。
  • 透明・半透明なものが多い。
  • トータルコストが安い。

短所

  • 引っ張り強度が金属に比べ弱い。
  • 耐熱性が低く、熱による膨張、変形が大きい。
  • 紫外線に弱いものがあり、色相、物性が変化する。

a.熱可塑性/結晶性樹脂

一般に半透明または不透明で、耐薬晶性に優れる。 寸法精度はあまり高くなく、成形時の収縮率が大きい。

  • PE:ポリエチレン樹脂
  • PP:ポリプロピレン樹脂
  • PA:ポリアミド樹脂

b.熱可塑性/非結晶性樹脂

一般に透明で、結晶性樹脂にくらべると寸法制度は良く、成形収縮率は小さい。

  • 染料・顔料との親和性が良いため、鮮明な着色ができる。しかし、耐薬品性はあまり良くない。

  • PS:ポリスチレン樹脂

  • ABS:アクリロニトリル・ブタジエン・スチレン共重合樹脂

耐衝撃性、耐薬品性、剛性があり、成型性が良く、バランスのよいプラスティックである。 また、成型収縮率が小さく(0.4〜0.6%)寸法安定性が良い事も長所である。 不透明で、表面はPSより光沢が出やすく、質感が高級なので、それを活かした使い方をすると良い。 着色顔料やブレンドにより艶をおさえたり、メタリックな質感、花崗岩(かこうがん)や 大理石などのような印象にする事も出来る。塗装をはじめ、メッキ、ホットスタンプなどの 2次加工や接着剤による接着も比較的容易である。しかし、有機溶剤や可塑剤に弱く、耐光性は良くないので、屋内で使用する商品は塗装する方が良い。バイクのカウリングを始め、 掃除機や冷蔵庫、コピー機、便座などに幅広く使われている。

  • PMMA:ポリメチルメタアクリレート樹脂(アクリル樹脂)
  • PVS:ポリ塩化ビニール樹脂
  • PC:ポリカーボネイト樹脂

強靱で耐衝撃性に優れる。非結晶樹脂の中では耐熱性に優れる。成型収縮率が小さく、 吸水寸法変化も少ない。自己消火性がある。表面硬度は鉛筆硬さでHB、アクリル樹脂よりは 傷がつきやすい。アンモニア、有機溶剤、アルカリには注意を要する。ガラスの代替として 使用されるほか自動車のランプ類やアウトサイド・ドアハンドルにも使われている。

c.熱硬化性樹脂

一般に、不透明で耐薬品性に優れる。

  • PUR:ポリウレタン系樹脂
  • PF:フェノール樹脂
  • MF:メラミン樹脂
  • UPR:不飽和ポリエステル樹脂

カラーコーディネーターとは?

東京商工会議所が主催しているカラーコーディネーター検定試験というものがあります。試験は1〜3級に分かれています。

対象とする業務内容

  • ファッションおよびパーソナルスタイリングに関するカラーコーディネーション
  • 接客・販売に関する色彩提案と販売開発力のアドバイス
  • 企業の色彩戦略に関する提案とアドバイス
  • 商品の開発に関する色彩提案
  • 建築・インテリアの色彩計画に関するアドバイス
  • 店舗・美術館等の色彩空間演出に関するアドバイス
  • 街づくり等の色彩環境に関する調査・コンサルティング
  • その他の色彩調査・色彩計画・色彩管理等

試験区分

1級:1級カラーコーディネーター(各分野)
分野 内容
共通 2・3級の色彩学の応用能力を備えている。
第1分野(ファッション色彩) ファッション及びパーソナルスタイリングの色彩に関する高度な技術と指導能力を備えている。
第2分野(商品色彩) 商品開発及び販売に関する色彩提案と指導の高度な能力を備えている。
第3分野(環境色彩) 建築・環境等の色彩計画に関する高度な技能と指導能力を備えている。
2級:2級カラーコーディネーター
  • 色彩の物理学・測色学・生理学・心理学・色彩計画・色彩の応用の専門的知識を修得している。
3級:アシスタント・カラーコーディネーター
  • 光と色に関する物理学・色の測定とその表し方に関する測色学・人間の目の構造に関する生理学・色の知覚と感情効果に関する心理学および、色彩調和の基礎知識を修得している。

主催団体(問い合わせ先)