Title

16進数とRGBのカラーコードについて

16進数 とは 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f と数値を数えて「f」の次で位(くらい)が上がる数値のことです。 この 「a」~「f」 の文字は 大文字の 「A」~「F」でも構いません。

16進数で色を指定する場合には2種類の書き方がありますが、どちらも先頭に # (シャープ) の文字を付けます。これはCSSにおいてカラー値だということの意味です。

例えば、#F00 と #FF0000 はどちらも16進数のカラーコードです。 #00F は #0000FF を短縮型で指定したものです。 これは、このページの下方に簡易カラーコード表としてサンプルを置いていますので参考にして下さい。

また、RGB とは R = Red (赤) , G = Green (緑) , B = Blue (青) の頭文字を取ったものです。 そして、RGBAというのは前述した RGB に透過率であるアルファ値 (A) を設定できるように拡張したものとなります。

RGBに関しては RGBA 色見本ツール のページでも説明しています。

上記のことを簡単にまとめると以下のようになります。

• 16進数 の場合 #XXYYZZ を例とすると XX = 赤 , YY = 緑 , ZZ = 青 の形式で 0 ~ F ( 0 ~ f ) の16進数で指定する
• RGB で色を指定する場合 rgb(0~255, 0~255, 0~255) の様に各色に 0 ~ 255 の10進数で指定する
• RGBA で色を指定する場合 rgba(0~255, 0~255, 0~255, 0~1) の様に各色に 0 ~ 255 の10進数で指定した後に透過率を 0 ~ 1 の実数値で指定する

CSSでの使われ方

例としてページ全体の背景色を指定するCSSの書き方をいくつか紹介しておきます。 詳細については関連リンクを参照して下さい。

body{background-color: #00FFAA;}

body{background-color: rgb(0, 255, 255);}

body{background-color: rgba(255, 255, 0, 0.2);}

body{background-color: ##blue;}

目次に戻る

目次に戻る

目次に戻る

セーフカラー

目次に戻る

類似色

目次に戻る

ブラウザ対応色

目次に戻る