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

更新情報をお届けします!

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

シェア

ツイート

LINEで送る

Pocket

ブックマーク

カラーコードとはWEB上で色を表示したいときに入力する文字列のことです。画像でない限りweb上で色を表示するには「赤」「黒」といった文字で入力するのではなく、#から始まる6文字の英数字が並んだコードを入力しなければ画面上に表示がされません。今回はこのカラーコードについて簡単に説明しつつW3C基本16色とwebセーフカラー216色のカラーコード一覧とをご紹介しようと思います。

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

カラーコードの説明をする前に、軽くこの話の基本となるモニターと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色のカラーコード一覧から色を読み取ってみましょう

カラーコードの法則が分かったところで16色のカラーコード一覧を見てみましょう。いかがですか?法則が分かったら色も想像しやすく覚えやすくなりますね、ここから先はもう少しだけカラーコードについて掘り下げていきましょう。

webセーフカラーについて

最近では技術の発達や、モニターごとに細かい表示の違いが全くない訳ではない、といった理由からそれほど気にしなくて良いと言われてますが、どのブラウザからも共通して綺麗に表示される色として、上記16種類の中から「00」「33」「66」「99」「CC」「FF」の6つの組み合わせのみをそれぞれRGBの明るさにあてはめ組み合わせた126色をwebセーフカラーと呼んでます。

例えば

・ffccff

・ccffff

・ffffcc

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

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

下記がwebセーフカラー一覧となってます。

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

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

 

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

六文字も数字を打つのは正直しんどいし見落としも多そうですよね。そんなとき実は同じ数字が並んでるものですと#F00と3文字入力するだけできちんと色を表示してくれます、賢いですね。効率的に使い時短していきましょう。

 

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

カラー名は大文字、小文字どちらでも大丈夫なので「#fff」「#FFF」どちらの表記でも画面にきちんと色が反映されるので、わざわざ大文字に打ち直さなきゃ!と思う必要はありません。しかし、後からコードを見たとき見辛くなるので出来たら統一した方が無難です。

 

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

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

しかしOSによっては表示されなかったり、赤や黒などの簡単な色ならまだしもよほど英語がわかる方でない限り、コードの方が法則性がかなりはっきりとしてますので個人的にはオススメしません。

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

カラーコードは数も多く全てを覚えるのはなかなか骨が折れる作業です、ただお客さんから「もう少し暗め」「明るいサイト」と指摘を受けた際でもカラーコードさえ知っていればイメージを崩さないまま、どう対応すればいいかなどの糸口がつかめます。今回のように少しづつ法則を覚えてよりお客様のイメージに沿えるサイトが作成できるようにしていきましょう。

更新情報をお届けします!

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

シェア

ツイート

LINEで送る

Pocket

ブックマーク

CATEGORY :
サイト制作
tree