カラーコード / 色コード

カラーコード

カラーコードとは?

 状態:-  閲覧数:1,706  投稿日: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進数カラーコード

 閲覧数:254 投稿日: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進数
4816

16進数
040810

16進トリプレット
040810


16進数3桁


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

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

09C
0099CC

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

 閲覧数:210 投稿日: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進数

 閲覧数:190 投稿日: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進数

 閲覧数:1,121 投稿日: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

 閲覧数:186 投稿日: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


Twitter検索結果。「カラーコード / 色コード 」に関する最新ツイート

ゆかり@清楚系 @yuuudayou
null🍆⛅ @null_0124
🦔 も ち も ち は り ね 🦔 ず み . @mochihari85_bot

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

Material Design Colors



週間人気ページランキング / 7-21 → 7-27
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 47
2 画面キャプチャ | Chrome 拡張機能(ブラウザ) 32
3 血の色 / #b30000 / #360800 / #ff0000 | 色 30
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 26
5 RGBの種類 / ビットカラー | RGB(色) 17
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 16
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 15
7 HSLとHSVの違い | 色変換(色) 15
8 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 14
9 Design 0 12
9 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 12
10 「bgcolor」「background-color」「background」の違い | CSS 10
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
12 親要素の背景色を、CSSで打ち消したい | CSS 7
12 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 7
12 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 7
13 Chromeブックマークの不満な点 | Chromeブックマーク(ブラウザ) 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 ログイン 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
2021/7/28 1:01 更新