WEBセーフカラー216色のカラーコード一覧と法則を知ろう!

Webセーフカラー216色のカラーコード一覧と法則を知ろう!

カラーコードとはWeb上で色を表示したいときに入力する文字列のことです。

画像で色を表現する際は必要ありませんが、Web上では#から始まる6文字の英数字が並んだコードを入力しなければ画面上に色が表示されません。

単純に「赤」「黒」といった文字を入力するだけでは駄目なのです。

カラーコードって?色が表示される仕組みとは?

カラーコードって?色が表示される仕組みとは?

カラーコードの説明をする前に、軽くこの話の基本となるモニターとRGBについての話をしていこうと思います。

RGBとは光の三原色と言われる赤(red)、緑(green)、青(blue)のことで、この3つの光を混ぜ合わせることで色合いが変化していきます。

スマートフォンやパソコンなどの液晶画面はほとんどの場合、液晶の中にとても小さな3つの色がついたカラーフィルターが敷き詰められています。そこに光を当てて色を表示し、光に強弱をつけることにより鮮やかな色を映し出します。

そのためモニター上に色を表示するには、「RGB3色のバランス」と「光の強弱」の命令が必要になるということを頭の片隅においてください。

最新情報をいち早くお届け!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

カラーコードの配列と意味について

カラーコードの配列と意味について

カラーコードに使われている文字列は「0123456789ABCDEF」からなる16種類から作られ、この中の文字を「#○○○○○○」と6文字組み合わせることで色を表示することができます。

いきなりコードだけを出されても、数字に弱いし、分からないし、覚えきれない…と思われる方もいらっしゃるかと思われますので、使われる文字や配列を簡単に紐解いていこうと思います。

文字は明るさの命令

文字は明るさを示し最初は0から始まり16進数で左の桁が上がっていくので、

00、01、02、03〜FC、FD、FE、FF

と表記していった場合、左に行くほど表示される光が暗く、右に行くほど光が明るくなっていきます。

配列は明りをどの色に当てるかの命令

配列は明りをどの色にどれだけの量の光を当てるかの命令で、6桁の順番はそれぞれ先ほど説明したRGBを表し、左から

R=1,2番目

G=3,4番目

B=5,6番目

に明るさの命令が表示されます。

上記の説明で、なんとなくの概要はわかっていただけたのではないでしょうか。

なんとなくは解ったけど、まだピンときてない…といった方へ、ここで簡単なコードクイズを出してみたいと思います。

「FF0000」「00FF00」「0000FF」「000000」「FFFFFF」

それぞれ何色を表しているでしょうか。

…わかりましたか?

正解は

FF0000は、頭2文字(R)が濃いのでレッド

00FF00は、まんなか2文字(G)が濃いのでグリーン

0000FFは、最後の2文字(B)が濃いのでブルー

000000は、全ての色が暗いので黒

FFFFFFは、全ての色が明るいので白

となります。

正解は

また余談ですが、印刷時に使われるシアン、マゼンタ、イエローはそれぞれの色が均等に混ざった時に出来る色なので

00FFFF(シアン)

FF00FF(マゼンタ)

FFFF00(イエロー)

と表記されます。

16色(17色)のカラーコード一覧から色を読み取ってみましょう

16色(17色)のカラーコード一覧

カラーコードの法則が分かったところで16色のカラーコード一覧を見てみましょう。

いかがですか?

法則が分かったら色も想像しやすく覚えやすくなりますね。

ここから先はもう少しだけカラーコードについて掘り下げていきましょう。

Webセーフカラーについて

Webセーフカラーについて

最近ではモニターごとに細かい表示の違いがある、といった理由から、色の見え方(濃い薄いなど)はそれほど気にしなくて良いと言われています。

ですが、どのブラウザからも共通して綺麗に表示される色として、上記16種類の中から「00」「33」「66」「99」「CC」「FF」の6つの組み合わせのみを、それぞれRGBの明るさに当てはめて、組み合わせた216色をWebセーフカラーと呼ばれています。

例えば

・ffccff

・ccffff

・ffffcc

といったような組み合わせです。

組み合わせ

先ほども挙げた通り、近年ではあまり気をつける必要はありませんが、古いパソコンを使っている方に向けて表示されるサイトなどですと、うまく色が表示されない可能性もあります。

一応知識として頭に入れておきましょう。

下記がカラー一覧となっています。

Webセーフカラー一覧

Webセーフカラー一覧

カラーグループ 140色

カラーグループ 140色

カラーグループ 342色

カラーグループ 342色

サイトを閲覧した際に背景や文字に色が付いていると、サイト全体のイメージを表現したり、デザインの統一を行うことができたりします。

また、目立たせたいテキストに異なる色を設定するなど、意図的にサイトを閲覧した方の視線を誘導することもできます。

しかし、色を使用しすぎたり、明るい色や暗い色ばかりを使用しすぎたりすると、目が疲れるサイトになりますので、注意が必要です。

おまけにちょっとした小技をご紹介

おまけにちょっとした小技をご紹介

ここでちょっとしたカラーコードの豆知識をいくつか載せていきたいと思います。

同じ文字が続くときは3文字でも可能

六文字も数字を打つのは正直しんどいし見落としも多そうですよね。

そんなとき実は同じ数字が並んでいるものですと#F00と3文字入力するだけで、きちんと色を表示してくれます。賢いですね。

効率的に使って、時短していきましょう。

大文字、小文字どちらでもOK

カラー名は大文字、小文字どちらでも大丈夫なので「#fff」「#FFF」どちらの表記でも画面にきちんと色が反映されます。

わざわざ大文字に打ち直さなきゃ!と思う必要はありません。

しかし、後からコードを見たとき見づらくなるので、出来たら統一した方が無難です。

色名(カラーネーム)指定

実は今まで散々16進数やまどろっこしい文字列の話をしてきましたが、実はHTMLでは「red」などの色を直接打ち込んでも表示ができます。

しかしOSによっては表示されなかったり、redやblackなどの簡単な英語ならまだしも、難しい英語だと手間取ってしまったりしてしまいます。

コードで記載すれば法則性がかなりはっきりとわかるので、個人的にはコードでの記載をオススメします。

カラーコードをプチマスターしてよりよいサイト制作を!

カラーコードは数も多く、全てを覚えるのはなかなか骨が折れる作業です。

ただ、お客様から「もう少し暗め」「明るいサイト」と指摘を受けた際でも、カラーコードさえ知っていればイメージを崩さないまま、どう対応すればいいかなどの糸口がつかめます。

今回のように少しずつ法則を覚え、よりお客様のイメージに沿えるサイトが作成できるようにしていきましょう。

制作でお悩みでしたら、
Bigmacにお任せください。

バナー制作
バナーlefty
バナー制作
バナー総合
バナー制作
バナー総合
LINEで送る
Pocket

  • この記事を書いた人
  • 最新記事