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階調
資料用の画像。ディスプレイの確認などにどうぞ。
ディスプレイいろいろ
ディスプレイの性能、表現力
あなたのディスプレイで、赤い四角の中に隠れている図形が見える?。 階調がわずかに違う図形が隠れています (答え)
ディスプレイいろいろ