カラーコード ／ 色コード

色 ＞ カラーコード

カラーコードとは？

　状態:- 　閲覧数:5,859 　投稿日:2016-05-02 　更新日:2016-05-03
HTML、CSS、SVGやその他のアプリケーションで色を表すのに使用
・色を表現するために用いられる、文字の羅列からなる符号
・色を表示するため、そのRGB値を16進法で表記した文字列
・ハッシュ記号（#）が先頭に付与される

16進数


16個の数字を使用
・0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
※A から F は、それぞれ10進での 10 から 15 を表す

16進数に大文字小文字の区別はない
→ 01213456789abcdefABCDEF

16進数カラーコード

　閲覧数:928　投稿日:2016-04-06　更新日:2016-05-04

16進トリプレット


RGB3組の16進数形式で色指定
・16進数6桁、3バイト(24ビット)の数値
・それぞれのバイトが色の赤・緑・青の成分を表す

トリプレットとは？
・3つの組み合わせ

例


赤/緑/青の各値は10進数
・赤33、緑150、青243

赤/緑/青の各値を16進数で表す
・赤21、緑96、青F3

16進トリプレットで表す
・2196F3

#(ハッシュマーク)から始まる6桁の16進数で色を表現
・「色を赤・緑・青の3色で表すRGB形式の各パラメータ」を2桁の16進数へ変換後、連結
→ 6桁の16進数
#2196F3
・上記カラーコードの場合、21が赤色、96が緑色、F3が青色を表している

6桁未満の例


「10進数で16未満」、「16進数で10未満」の値の場合
・ゼロを前置してトリプレットを常に6桁に保つ必要がある

10進数
・4、8、16

16進数
・04、08、10

16進トリプレット
・040810

16進数3桁


16進トリプレットを短縮し、16進3桁で表現する方式もある
・このフォーマットを通常の16進トリプレットへ変換するためには、各桁を繰り返す

3桁フォーマット
・CSS仕様
※HTMLの色指定では規格外

09C
・0099CC

カラーコード → RGB ／ 16進数 → 10進数

　閲覧数:737　投稿日:2016-05-03　更新日:2016-05-04

16進数


#2196F3

計算式


R
・16×2+1=33

G
・16×9+6=150

B
・16×F+3
・16×15+3=243

10進数


赤33、緑150、青243


RGB → カラーコード ／ 10進数 → 16進数

　閲覧数:830　投稿日:2016-05-04　更新日:2016-05-07

10進数


赤33、緑150、青243

計算式


10進数を「16」で割る
・商が15以下になるまで割り続ける
・商と余りを求める

R
・33÷16=2余り1
→ 21
      2

    -----

16 / 33

     32

     ----

      1


G
・150÷16=9余り6
→ 96
       9

    -----

16 / 150

     144

     ----

       6


B
・243÷16=15余り3
→ F3
      15

    -----

16 / 243

     16

     ----

      83

      80

      ----

       3


16進数


#2196F3


・あまり電卓

16進数カラーコード ／ 2進数

　閲覧数:5,183　投稿日:2016-05-04　更新日:2016-05-07

色指定具体例


16進数カラーコード
#2196F3

2進数
1000011001011011110011

ビット ／ バイト


ビット(bit)
・2進数の単位（桁）

バイト(byte)
・1バイト＝8ビット

1バイト＝8ビット
・16進数で00からFFまでの数値を表す
- R G B
バイト 1byte 1byte 1byte
ビット 8bit 8bit 8bit
16進数 21 96 F3
2進数 100001 10010110 11110011
0.5バイト＝4ビット
・16進数で0からFまでの数値を表す
- R R G G B B
バイト 0.5byte 0.5byte 0.5byte 0.5byte 0.5byte 0.5byte
ビット 4bit 4bit 4bit 4bit 4bit 4bit
16進数 2 1 9 6 F 3
2進数 0010 0001 1001 0110 1111 0011
24ビットカラーでは10進数の0～255
・それぞれの成分の強さを最小（0）から最大（255）の範囲で表す

配置順序
・1バイト目 - 赤の値
・2バイト目 - 緑の値
・3バイト目 - 青の値

16進数カラーコード → 2進数bit

　閲覧数:743　投稿日:2016-05-06　更新日:2016-05-07

ビットの名前


1桁目
・bit0
・最右ビット(最下位ビット(LSB))
・十進数に当てはめれば、「一の位」に相当

2桁目
・bit1

3桁目
・bit2

Red


2進数
100001
bit7 bit6 bit5 bit4 bit3 bit2 bit1 bit0
0 0 1 0 0 0 0 1

Green


2進数
10010110
bit7 bit6 bit5 bit4 bit3 bit2 bit1 bit0
1 0 0 1 0 1 1 0

Blue


2進数
11110011
bit7 bit6 bit5 bit4 bit3 bit2 bit1 bit0
1 1 1 1 0 0 1 1


O'Reilly書籍の緑色 ／ #00a9a4

名前付き色(Named Colors) の仕様



類似度ページランキング
順位 ページタイトル抜粋 ％
1 カラーコード ／ 色コード 53
2 色変換コード ／ 確認用 44
3 配色カラー 40
4 鉄道会社毎のカラーコード 37
5 金融機関ブランドカラー ／ コーポレートカラー 37
6 RGBの種類 ／ ビットカラー 33
7 コンソールエラー ／ ブラウザ間差異 30
8 「東京都」のカラーコード取得は難しい 30
9 エリア毎のカラーコード。最適と思われる色を 1 色、選定した備忘録 29
10 「Design 0」カラー 29
11 画像からカラーコードを取得するオンラインツール 26
12 カラーマネージメント 24
13 サイトにプログラムコードを貼り付ける preタグのCSS 23
14 半透明borderは、16進数カラーコードではなくRBGAを使用 21
15 UIコードダウンロードLink 20
16 モバイルデザイン6 ／ フォーム 19
17 モバイル フレンドリー テスト ／ viewport設定 19
18 CSS3で背景色にグラデーションをつける 17
19 Chromeブックマーク ショートカット 17
20 画像背景色を透明化するオンラインサービス 17
2026/10/08 23:27 更新
週間人気ページランキング ／ 10-1 → 10-7
順位 ページタイトル抜粋 アクセス数
1 Design 0 12
2 GIMP | GIMP 系(ソフトウェア) 3
3 ケルビン（kelvin）／ 記号K 2
3 「word-break: break-all;」指定すると、アイコン型Webフォントの位置がズレる(ことがある) 2
3 遠近グリッド はCS3にはないの？ | Illustrator CS3(Illustrator) 2
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 2
3 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 2
3 RGBの種類 ／ ビットカラー | RGB(色) 2
3 RGB → 色相H 方式の違い | 色変換(色) 2
3 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; | CSS 2
3 ログイン 2
3 UI カテゴリー 2
3 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 2
4 考え方A.長さの比率で角度６０°を分割 ／ B≧G≧R 1
4 「親要素越え」✕「横幅Max状態での画像スライダー」を検討 | Webデザイン(デザイン) 1
4 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1
4 align-items: center; 1
4 「CSSプロパティ」書く順番 | コーディングルール 1
4 Illustratorで、アートボードの大きさではなく選択範囲の大きさで出力 ／ 「トリムエリアツール」→「トリムエリアを選択したアートに合わせる」 | Illustrator CS3(Illustrator) 1
4 margin相殺 ／ 水平方向では発生しない。「position:absolute;」「position:fixed;」指定した要素では全く発生しない | CSS 1
2026/10/8 5:05 更新