6日でできる 新HTML&CSS入門｜16進数の表現

6日でできる 新HTML&CSS入門｜16進数の表現

16進数が分かると、#FF5733の色が読めるようになる。数字の仕組みを理解して、Webカラーをもっと自由に扱おう。

Web制作では、色を指定するときに#FF5733や#1E90FFのような表記をよく見かけます。最初は英数字が並んだ暗号のように見えるかもしれませんが、この表記にはきちんとした意味があります。

私たちが日常で使っている数は、0から9までの数字を使う10進数です。一方、コンピュータの内部では、0と1だけで表す2進数が基本になります。ただし、2進数は桁数が長くなりやすく、人間が読むには少し大変です。

そこで使われるのが16進数です。16進数は、0から9までの数字に加えて、A、B、C、D、E、Fを使って数を表します。2進数4桁を16進数1桁で表せるため、長い数値を短く読みやすく整理できます。

Webカラーで使われる#RRGGBB形式も、16進数の考え方に基づいています。赤、緑、青の3つの値を、それぞれ16進数2桁で表し、合計6桁で1つの色を指定します。

この記事では、16進数とは何か、10進数との変換方法、2進数との関係、そしてWebカラーでどのように使われるのかを、図や表、サンプルHTMLを交えながら順番に解説していきます。

16進数は16個の記号で数を表す方法

16進数は、16個の記号を使って数を表す方法です。

10進数では、0から9まで進むと、次は10になります。これは、10個の数字を使い切ったため、桁が上がるからです。

一方、16進数では、0から9のあとにA、B、C、D、E、Fを使います。そしてFの次で桁が上がり、10になります。

16進数では、Aが10、Bが11、Cが12、Dが13、Eが14、Fが15を表します。

つまり、16進数のFは、10進数では15です。そして、その次の数は16進数で10になります。この10は、10進数の10ではなく、16進数で16を表す値です。

このように、16進数ではAからFまでを数字の一部として使います。WebカラーでFFや1A、3Cのような表記が出てくるのは、このためです。

図1：10進数と16進数の対応

この図から分かること

この図から、16進数では0から9だけでなく、AからFまでの文字も数字として使うことが分かります。

10進数の10は16進数ではA、10進数の15は16進数ではFになります。そして、10進数の16になると、16進数では10と表します。

16進数の10は、日常で使う10進数の10とは意味が違います。16進数では、16で桁が上がるため、10という表記が10進数の16を表します。

この対応を覚えておくと、Webカラーで使われるFFやA0のような表記も読みやすくなります。

10進数と16進数の違い

10進数と16進数の大きな違いは、桁が上がるタイミングです。

10進数は、10個の記号を使うため、9の次で桁が上がります。16進数は、16個の記号を使うため、Fの次で桁が上がります。

たとえば、10進数で15は、16進数ではFです。10進数で16になると、16進数では10になります。

この違いを理解しておくと、16進数の計算やWebカラーの読み取りがしやすくなります。

16進数は、Webカラーだけでなく、メモリアドレス、エラーコード、文字コード、バイナリデータの確認など、コンピュータに近い場面でもよく使われます。

16進数を10進数に変換する考え方

16進数を10進数に変換するときは、各桁に重みを掛けて足し合わせます。

10進数では、右から1の位、10の位、100の位というように、10の力で桁の重みが決まります。

16進数では、右から16⁰、16¹、16²というように、16の力で桁の重みが決まります。

たとえば、16進数の1FAを10進数に直してみます。

1FA

1 × 162 = 1 × 256 = 256
F × 161 = 15 × 16 = 240
A × 160 = 10 × 1 = 10

256 + 240 + 10 = 506

そのため、16進数の1FAは、10進数では506になります。

ここで大切なのは、Fを15、Aを10として扱うことです。16進数ではAからFも数値なので、計算するときは10進数の値に置き換えて考えます。

10進数を16進数に変換する考え方

10進数を16進数に変換するときは、16で割って余りを確認します。そして、余りを下から上へ逆順に読みます。

ここでは、10進数の506を16進数に変換してみます。

506 ÷ 16 = 31 余り10 → A
 31 ÷ 16 = 1  余り15 → F
  1 ÷ 16 = 0  余り1  → 1

余りを下から順番に読むと、1FAになります。

つまり、10進数の506は、16進数では1FAです。

16進数に変換するときは、余りが10から15になった場合、AからFに置き換えます。

この「16で割る」「余りを記録する」「逆順に読む」という流れを覚えておくと、10進数から16進数への変換がしやすくなります。

16進数と2進数は相性がよい

16進数は、2進数ととても相性がよい表記です。

理由は、2進数4桁が、ちょうど16進数1桁に対応するからです。

2進数4桁では、0000から1111までの16通りを表せます。これは、16進数の0からFまでにぴったり対応します。

この対応があるため、2進数を16進数に直すと、長い数字をかなり短くできます。

たとえば、2進数の11111111は、4桁ずつに分けると1111と1111です。1111は16進数でFなので、11111111はFFになります。

このように、16進数は2進数を短く、読みやすく表すために便利です。

図2：4bitと16進数1桁の関係

この図から分かること

この図から、2進数4桁が16進数1桁に対応していることが分かります。

2進数4桁では、0000から1111までの16通りを表せます。16進数も0からFまでの16通りを1桁で表します。そのため、4bitを16進数1桁に置き換えられます。

さらに、8bitは4bitが2つ分なので、16進数2桁で表せます。1byteが00からFFで表せるのは、この関係があるためです。

Webカラーでは、赤、緑、青の各成分を1byteで表します。そのため、各色は16進数2桁で指定できます。

1byteは16進数2桁で表せる

コンピュータでは、8bitを1byteとして扱います。8bitでは、0から255までの256通りの値を表せます。

16進数では、1byteを2桁で表せます。最小値は00、最大値はFFです。

この対応は、Webカラーを理解するうえでとても重要です。

RGBカラーでは、赤、緑、青のそれぞれに1byteの値を使います。つまり、赤は00からFF、緑も00からFF、青も00からFFの範囲で指定できます。

この3つを並べたものが、Webカラーでよく使われる#RRGGBBです。

16進数が実務で使われる理由

16進数は、Webカラーだけでなく、さまざまな実務の場面で使われます。

2進数はコンピュータにとって扱いやすい表記ですが、人間が読むには桁が長すぎます。16進数を使うと、2進数の情報を短くまとめながら、ビットの区切りも保ちやすくなります。

特に、1byteを2桁で表せる点はとても便利です。Webカラーのように、赤、緑、青の3byteを扱う場合でも、16進数なら6桁で表せます。

Webカラーは16進数で読み解ける

Webカラーで使う#FF5733のような表記は、16進数を使った色指定です。

#のあとに6桁の16進数を書き、2桁ずつ赤、緑、青に分けて読みます。

#FF5733

FF → R、赤
57 → G、緑
33 → B、青

FFは10進数では255です。57は10進数では87、33は10進数では51です。

赤がとても強く、緑が少し入り、青が弱いため、#FF5733はオレンジ系のあたたかい色に見えます。

このように、16進カラーコードは、ただの記号ではありません。2桁ずつ分解すると、どの色成分が強いのかを読み取れます。

図3：#FF5733がオレンジに見える理由

この図から分かること

この図から、#FF5733がオレンジ系に見える理由を読み取れます。

#FF5733は、FF、57、33の3つに分けて考えます。FFは赤の値で、10進数では255です。これは赤が最大まで強いことを意味します。

57は緑の値で、10進数では87です。緑は少し含まれています。33は青の値で、10進数では51です。青は弱めです。

赤が強く、緑が少し入り、青が弱い組み合わせになるため、全体としてあたたかみのあるオレンジ系の色になります。

3桁の16進カラーコード

Webカラーには、6桁表記だけでなく、3桁の短縮表記もあります。

たとえば、#11FFAAは#1FAのように短く書けます。

これは、各色成分の2桁が同じ文字でできている場合に使える短縮表記です。

#1FAは、#11FFAAの省略形です。1は11、FはFF、AはAAとして扱われます。

ただし、#1E90FFのように、1Eや90のような異なる2文字の組み合わせが含まれている場合は、3桁に短縮できません。

最初のうちは、6桁の#RRGGBB形式で考えるほうが分かりやすいです。慣れてきたら、短縮表記も読み取れるようにしましょう。

3桁表記のカラーを使ったサンプル

ここでは、3桁の16進カラーコードを使ったHTMLを作成します。CSSの詳しい書き方は後の記事で扱いますが、このサンプルではWebカラーが画面にどのように反映されるかを確認します。

ファイル名： lesson19_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>3桁の16進カラー</title>
  <style>
    body {
      background: #1FA;
      color: #FFFFFF;
    }
  </style>
</head>
<body>
  <h1>#1FA は明るい黄緑系の色</h1>
  <p>3桁表記は、6桁表記を短く書く方法です。</p>
</body>
</html>

ブラウザの表示例

ブラウザで表示すると、ページ背景が明るい黄緑系の色になり、文字は白で表示されます。

この例では、#1FAが背景色として使われています。#1FAは#11FFAAとして扱われます。

3桁表記は短く書ける便利な方法ですが、すべての色で使えるわけではありません。各色の2桁が同じ文字の組み合わせになっている場合だけ短縮できます。

6桁表記のカラーを使ったサンプル

次に、6桁の16進カラーコードを使ったHTMLを確認します。ここでは、#FF5733を使い、オレンジ系の色で文字を表示します。

ファイル名： lesson19_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>6桁の16進カラー</title>
  <style>
    body {
      background: #FFFFFF;
    }

    h1 {
      color: #333333;
    }

    p {
      color: #FF5733;
    }
  </style>
</head>
<body>
  <h1>6桁の16進カラーコード</h1>
  <p>#FF5733 は赤が強く、温かみのあるオレンジ系の色です。</p>
</body>
</html>

ブラウザの表示例

ブラウザで表示すると、背景は白、見出しは濃いグレー、段落はオレンジ系の色で表示されます。

#FF5733は、赤の値がFFで最大、緑が57、青が33です。赤が強く、青が控えめなので、あたたかい印象の色になります。

6桁表記は、赤、緑、青の強さを2桁ずつ正確に指定できるため、Webカラーの基本としてよく使われます。

8桁表記では透明度も指定できる

16進カラーコードには、6桁だけでなく、8桁の表記もあります。

8桁表記では、#RRGGBBAAのように、最後の2桁で透明度を表します。AAの部分はAlphaを表し、色の不透明度を指定します。

たとえば、#1E90FF4Dのような表記では、#1E90FFが色の部分で、4Dが透明度の部分です。

透明度を含む表記は、背景と重ねたときの見え方を調整したい場合に使われます。

ただし、透明度は後ろにある色の影響を受けます。同じ色でも、白い背景の上と黒い背景の上では見え方が変わります。

Webカラーを読むときの流れ

16進カラーコードを読むときは、次の順番で考えると分かりやすくなります。

たとえば、#3366CCを見てみましょう。

#3366CC

33 → 赤は弱め
66 → 緑は中くらい
CC → 青は強め

この場合、青が強く、赤が弱いため、青系の色になります。

色を正確に覚える必要はありません。まずは、どの成分が強いのかを読み取れるようになることが大切です。

16進カラーコードでよく使う基本色

基本的なカラーコードをいくつか覚えておくと、Webカラーの読み取りがしやすくなります。

#000000は、すべての値が0なので黒です。#FFFFFFは、すべての値が最大なので白です。

#FF0000は赤だけが最大なので赤になります。#00FF00は緑、#0000FFは青です。

この基本色を確認しておくと、#FF5733のような少し複雑な色も、「赤が強いから暖色系になりそう」と考えられるようになります。

タグと属性を整理する

今回のサンプルで使ったタグや属性を整理しておきます。

今回の主役は16進数ですが、Webページで色を確認するために、HTMLとCSSの基本的な要素も使っています。

ただし、CSSの細かな書き方や、色をどの要素にどのように指定するかについては、CSSに関する記事以降で詳しく解説します。

ここでは、16進カラーコードがWebページの色指定に使われることを確認できれば十分です。

16進数を使うときに意識したいこと

16進数は、最初は少しむずかしく見えます。しかし、仕組みを分けて考えると理解しやすくなります。

Webカラーで16進数を読むときは、#のあとの6桁を2桁ずつに分けて考えましょう。

#RRGGBBの形を意識すれば、先頭2桁が赤、中央2桁が緑、最後2桁が青であることが分かります。

16進数の考え方が分かると、カラーコードだけでなく、コンピュータが数値をどのように短く表しているのかも見えてきます。Web制作で色を扱うときはもちろん、メモリアドレスや文字コードのような少し技術的な情報を読むときにも役立つ基礎知識です。