シンヤブログ

アニメに救われて本の虫になった男が綴るブログ

MENU

【超初心者向け】HTMLのカラーコードの仕組み。色を自由に決められる!

《この記事は以下の人向けです》

  ‣HTML初心者の人

  ‣ブログやサイトなどに興味がある人

 

f:id:shinyaw:20191118003323j:plain

 

どうもー、シンヤです!

 

今回のこの記事ではHTMLのカラーコードの仕組み』について書いていきます。

 

HTMLはサイト製作やブログ運営で必要になるプログラミング言語です。

 

この記事では特にHTMLの基礎の基礎とも言えるカラーコードの仕組みと色の指定のやり方をできるだけ分かりやすくまとめました。

 

超初心者向けの内容なので、HTMLに詳しい人は内容に期待しないでくださいね(笑)

 

 

色を指定するプログラムの仕組み

f:id:shinyaw:20191118003538j:plain

 

HTMLで色を指定するときには『#000000』のように#と6桁の英数字によって色を指定します。

 

#は「これが色を表していますよ」というサインなので、色を指定する前には必ずつける必要があります。

 

色を指定しているのは#以下の『000000』の部分です。

 

 #00 00 00

 

上の灰色の欄の中で

赤色のラインが引いてある1番初めの2桁が赤(R)

緑色のラインが引いてある次の2桁が緑(G)

青色のラインが引いてある最後の2桁が青(B)

の成分をそれぞれ表しており、光の三原色であるそれぞれの濃さによって色を指定している形になっています。

 

色の濃さは16進数で表し、英数字を使って『0,1,2,3,4,5,6,7,8,9, a , b , c , d , e , f 』の16段階で表します。

 

0が光の濃さが最高のメチャクチャ明るい状態。

fが光の濃さが全くない、光がない真っ暗な状態ということです。

 

カラーコードの参考例

f:id:shinyaw:20191118003722j:plain

 

『#000000』は光の成分が全くない真っ暗な状態を表すので、以下のように真っ黒になります。

 

 

 

 

赤・青・緑のそれぞれの成分をそれぞれ大きくして、『#666666』なんかにすると光が少しある薄暗い状態になるので、以下のように薄い黒色である灰色になります。

逆に『#ffffff』は真っ白です。

 

 

 

 

赤と緑の成分を全くない状態にして、青の成分だけを最高に指定している『#0000ff』は以下のような濃い青色になります。

 

 

 

 

緑と青の成分を全くない状態にして、赤の成分だけを最高に指定している『#ff0000』は以下のような濃い赤色になります。

 

 

 

 

赤と青の成分を全くない状態にして、緑の成分だけを最高に指定している『#00ff00』は以下のような濃い緑色になります。

 

 

 

 

赤の成分を0にして、緑と青の成分を最高に指定している『#00ffff』は以下のように青と緑の混色である水色(シアン)になります。

 

 

 

 

緑の成分を0にして、赤と青の成分を最高に指定している『#ff00ff』は以下のように赤と青の混色である紫色(マゼンタ)になります。

 

 

 

 

青の成分を0にして、赤と緑の成分を最高に指定している『#ffff00』は以下のように赤と緑の混色である黄色のような色になります。

 

 

 

 

HTMLのカラーコードを初心者の人にも設定しやすいように以下のサイトなどもあるので、HTMLのカラーコードが少し難しいという人なんかは以下のサイトも参考にしてみてください。

 

www.colordic.org