gorogoronyan FC2

CSS 色の指定

色サンプル

彩度100%
#f99
#fc9
#ff9
#cf9
#9f9
#9fc
#9ff
#9cf
#99f
#c9f
#f9f
#f9c
#f66
#fb6
#ff6
#bf6
#6f6
#6fb
#6ff
#6bf
#66f
#b6f
#f6f
#f6b
#f33
#f93
#ff3
#9f3
#3f3
#3f9
#3ff
#39f
#33f
#93f
#f3f
#f39
#f00
#f80
#ff0
#8f0
#0f0
#0f8
#0ff
#08f
#00f
#80f
#f0f
#f08
#c00
#c60
#cc0
#6c0
#0c0
#0c6
#0cc
#06c
#00c
#60c
#c0c
#c06
#900
#950
#990
#590
#090
#095
#099
#059
#009
#509
#909
#905
#600
#630
#660
#360
#060
#063
#066
#036
#006
#306
#606
#603
彩度60%
#eaa
#eca
#eea
#cea
#aea
#aec
#aee
#ace
#aae
#cae
#eae
#eac
#d88
#db8
#dd8
#bd8
#8d8
#8db
#8dd
#8bd
#88d
#b8d
#d8d
#d8b
#d55
#d95
#dd5
#9d5
#5d5
#5d9
#5dd
#59d
#55d
#95d
#d5d
#d59
#c33
#c93
#cc3
#9c3
#3c3
#3c9
#3cc
#39c
#33c
#93c
#c3c
#c39
#a22
#a62
#aa2
#6a2
#2a2
#2a6
#2aa
#26a
#22a
#62a
#a2a
#a26
#722
#752
#772
#572
#272
#275
#277
#257
#227
#527
#727
#725
#511
#531
#551
#351
#151
#153
#155
#135
#115
#315
#515
#513
彩度30%
#dbb
#dcb
#ddb
#cdb
#bdb
#bdc
#bdd
#bcd
#bbd
#cbd
#dbd
#dbc
#c99
#cb9
#cc9
#bc9
#9c9
#9cb
#9cc
#9bc
#99c
#b9c
#c9c
#c9b
#b77
#b97
#bb7
#9b7
#7b7
#7b9
#7bb
#79b
#77b
#97b
#b7b
#b79
#a55
#a85
#aa5
#8a5
#5a5
#5a8
#5aa
#58a
#55a
#85a
#a5a
#a58
#844
#864
#884
#684
#484
#486
#488
#468
#448
#648
#848
#846
#633
#653
#663
#563
#363
#365
#366
#356
#336
#536
#636
#635
#422
#432
#442
#342
#242
#243
#244
#234
#224
#324
#424
#423
横      :色相 30度刻み
縦      :明度 上から 80%, 70%, 60%, 50%, 40%, 30%, 20%

サンプルなど

色の指定方法 #xxxxxx

色の指定でよく使われるのは #xxxxxx (x は16進数) による指定です。
#ff0000 #00ff00 #0000ff
例:#ff0000
  #(赤:Red)(緑:Green)(青:Blue) で指定する。R,G,B はそれぞれ2桁の16進数。

例:#f00
  短縮して表記した例。R,G,B をそれぞれ1桁の16進数で表記します。
  #f00 は #ff0000 と同じ。
  #af3 なら #aaff33 と同じ。

■参考:16進数

・10進数は、0,1,2...と数えて 9 まで来ると次は 10 に桁が繰り上がります。

・16進数の場合は、0 から 15まで数えて、次に桁が繰り上がります。
  10 から 15 までは、数字を使うと区別できないので a から f (A から Fでも
 よい) で表現します。
  f の次は桁が1つあがり 10 になります。

  10進数  0  1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16 17 18 ...
  16進数  0  1  2  3  4  5  6  7  8  0  a  b  c  d  e  f 10 11 12 ...
                                        A  B  C  D  E  F 

  参考: 2進数と16進数

例:
  16進数  10進数
     0       0
     1       1  
     2       2  
   ...     ...
     f      15  
    10      16    16×1
   ...     ...
    1f      31
    20      32    16×2
   ...     ...
    30      48    16×3
   ...     ...
    40      64    16×4
   ...     ...
    7f     127
    80     128    16×8
   ...     ...
    9f     159
    a0     160
   ...     ...
    b0     176
   ...     ...
    c0     192
   ...     ...
    d0     208
   ...     ...
    e0     224
   ...     ...
    f0     240
   ...     ...
    ff     255
   100     256

・16進数で 2桁の場合、0 から ff まで 256階調を表せる (2進数で8桁 = 8bit階調)。
  R,G,B それぞれ 256階調指定できるのですべての組み合わせは
  256×256×256 = 約1,600万色 (24bitカラー)

・色の指定で 
  #000 (#000000 と同じ) であれば、R,G,B がすべて 0 の黒になる。
  #fff (#ffffff と同じ) であれば、R,G,B がすべて 255 の白になる。

・16進数は 10進数の値と区別するため、0xfc のように頭に0x をつけたり、
 fch のように末尾に h をつけて表記することがある。
  色の #xxx 指定では出てこないけど、JavaScript などプログラミング
 で使われる。

補色と色相環

RGB の補色として CMY があります。例えば、 白 (#fff) から赤色(#f00)の成分を除くと残った色 (#fff - #f00 = #0ff:水色) が赤の補色になります。

#f00
#f0f #ff0
#00f #0f0
#0ff
   RGB              CMY 
R : 赤 red      C : 水色 cyan
G : 緑 green    M : 紫色 magenta
B : 青 blue     Y : 黄色 yellow

いろいろ

明るさ

#fff に近づくほど明るくなり、#000 に近づくほど暗くなります。

#fff #f00 #0f0 #00f
#ccc #c00 #0c0 #00c
#999 #900 #090 #009
#666 #600 #060 #006
#333 #300 #030 #003
#000 #000 #000 #000

色相、彩度、明度による色指定

色の指定 - HSL で指定 に続く。

64階調, 128階調

資料用の画像。ディスプレイの確認などにどうぞ。
ディスプレイいろいろ

64階調 (6bit)
128階調 (7bit)

ディスプレイの性能、表現力

あなたのディスプレイで、赤い四角の中に隠れている図形が見える?。 階調がわずかに違う図形が隠れています (答え)

ディスプレイいろいろ

関連

inserted by FC2 system