ホーム > HTMLサンプル

2015/02-2017/11/30

CSS 色の指定

目次
  1. 色サンプル
  2. 色の指定方法 #xxxxxx
  3. 補色と色相環
  4. いろいろ
  5. 64階調, 128階調

色サンプル

#f99
#fc9
#ff9
#cf9
#9f9
#9fc
#9ff
#9cf
#99f
#c9f
#f9f
#f9c
#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
#eaa
#eca
#eea
#cea
#aea
#aec
#aee
#ace
#aae
#cae
#eae
#eac
#d55
#d95
#dd5
#9d5
#5d5
#5d9
#5dd
#59d
#55d
#95d
#d5d
#d59
#c33
#c83
#cc3
#8c3
#3c3
#3c8
#3cc
#38c
#33c
#83c
#c3c
#c38
#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
#dbb
#dcb
#ddb
#cdb
#bdb
#bdc
#bdd
#bcd
#bbd
#cbd
#dbd
#dbc
#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%, 60%, 50%, 40%, 30%, 20%
グループ:彩度 上から 100%, 60%, 30%

サンプルなど

色サンプル、白地、淡い色
色サンプル、白地、中間色
https://color.adobe.com/ja/ - アドビの配色ツール。便利かも?

色の指定方法 #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進数
・0 から15までの数を 0 から F で表します。
  16になると桁が1つあがり 10 になります。

  10進数  0  1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16 17 ...
  16進数  0  1  2  3  4  5  6  7  8  0  A  B  C  D  E  F 10 11 ...

  参考: 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
    50      80
    60      96
    70     112
    80     128
    90     144
    A0     160
    B0     176
    C0     192
    D0     208
    E0     224
    F0     240
    FF     255

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

・16進数は 10進数の値と区別するため、0xfc のように頭に0x をつけたり、
 fch のように末尾に h をつけて表記することがある。
  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)

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

あなたのディスプレイで、赤い四角の中に隠れている図形が見える?
答え:gradation_r128_r130_2.png
ディスプレイいろいろ
目次
gorogoronyan@gmail.com
inserted by FC2 system