Webカラー（Hex）について

Web上のRGBの色は、「#」と6桁の数字で指定します。これをHex表記（16進数カラー表記）と言います。

Hex表記を使って、いろいろな色を作ってみました。

#000000は(R, G, B) = (0, 0, 0)で黒色です。文字色は#666666にしました。

#ffffffは(R, G, B) =(255, 255, 255)で白色です。文字色は#666666にしました。

#ff0000は(R, G, B) = (255, 0, 0)で赤色です。文字色は#4d0000にしました。

#00f100は(R, G, B) = (0, 241, 0)で緑色です。文字色は#004000にしました。

#0000faは(R, G, B) = (0, 0, 250)で青色です。文字色は#b3ccffにしました。

#ffff00は(R, G, B) = (255, 255, 0)で黄色です。文字色は#7f3300にしました。

#00ffffは(R, G, B) = (0, 255, 255)で水色です。文字色は#004c4cにしました。

#6f3b4eは(R, G, B) = (111, 59, 78)でこんな色です。文字色は#f3cbd9にしました。

色のイメージは湧きましたか？

Web上のRGBの色は、「#」と6桁の数字で指定します。これをHex表記（16進数カラー表記）と言います。

このHex表記を利用して、赤色のパラメータを0からMaxのffまで動かした色を載せました。緑と青色は00にしています。

#010000から#ff0000までの変遷を見てみましょう。

色のイメージは湧きましたか？

Web上のRGBの色は、「#」と6桁の数字で指定します。これをHex表記（16進数カラー表記）と言います。

Hex表記で虹色を作るCSSコードを紹介します。

虹の七色の一つ例として次の色を使います。

#9400D3は紫を表します。

#4B0082は藍色を表します。

#0000FFは青色を表します。

#00FF00は緑色を表します。

#FFFF00は黄色を表します。

#FFA500は橙色を表します。

#FF0000は赤色を表します。

この七色を利用して虹色のグラデーションを作りましょう。

HTMLのタグはCSSで着色することができます。

p {
  background: linear-gradient(45deg, #9400D3, #4B0082, #0000FF, #00FF00, #FFFF00, #FFA500, #FF0000);
  height: 25vh;
  margin: 0;
}

このコードは、HTMLの「段落」に虹を作るコードです！

きれいに作れました！

Web上の色は、RGBで指定します。

RGBは、例えば白色を (255, 255, 255) と表します。これは9桁です。

Web上で色を指定する際、情報量はより少ない方が良いので、#ffffff と表します。これは6桁です。#ffffffのはじめの2桁がRedの255、真ん中の2桁がGreenの255、最後の2桁がBlueの255を表しています。

このff =255 を理解します。

Hex（16進数カラー）表記について

0〜255の256個の数は，16進数では2桁で表すことができます。

実際に数えてみましょう！

15まで数える（記号の用意）

0から9までは普通に数えて，10から15までは次の記号と対応させる。

32まで数える（繰り上がり）

普通の数字で16以上は，Hexでは２桁で表示できる。

上の位（16ずつ増える）

Hex表記では２桁の上の位が１大きくなると，普通の数値では16だけ大きくなることを表す。

255まで数える

$f$ から始まる数字の対応を見る。通常の数では240から255までに対応する。

この数え方で ff=255 としています！