Top > カラーコード


カラーコード

Last-modified: 2019-02-15 (金) 22:04:06




テンプレ Edit

|BGCOLOR(#):|#||

カラーコード一覧 Edit

Web Safe ColorとNetscape Color一覧

色サンプル16進数色名(太字はW3C Color)
#000000black
#000001
#000002
#000003
#000004
#000005
#000006
#000007
#000008
#000009
#00000a
#000010
#000011
#000012
#000013
#000014
#000015
#000016
#000017
#000018
#000019
#000020
#000021
#000022
#000023
#000033
#000066
#000080navy
#00008bdarkblue
#000099
#0000cc
#0000cdmediumblue
#0000ffblue
#000810
#003300
#003333
#003366
#003399
#0033cc
#0033ff
#006400darkgreen
#006600
#006633
#006666
#006699
#0066cc
#0066ff
#0047ab
#008000green
#008080teal
#008b8bdarkcyan
#009900
#009933
#009966
#009999
#0099cc
#0099ff
#00bfffdeepskyblue
#00cc00
#00cc33
#00cc66
#00cc99
#00cccc
#00ccff
#00ced1darkturquoise
#00fa9amediumspringgreen
#00ff00lime
#00ff33
#00ff66
#00ff7fspringgreen
#00ff99
#00ffcc
#00ffffaqua
#00ffffcyan
#114514
#191970midnightblue
#1e90ffdodgerblue
#20b2aalightseagreen
#228b22forestgreen
#2e8b57seagreen
#2f4f4fdarkslategray
#32cd32limegreen
#330000
#330033
#330066
#330099
#3300cc
#3300ff
#333300
#333333
#333366
#333399
#3333cc
#3333ff
#336600
#336633
#336666
#336699
#3366cc
#3366ff
#339900
#339933
#339966
#339999
#3399cc
#3399ff
#33cc00
#33cc33
#33cc66
#33cc99
#33cccc
#33ccff
#33ff00
#33ff33
#33ff66
#33ff99
#33ffcc
#33ffff
#364364
#3cb371mediumseagreen
#40e0d0turquoise
#4169e1royalblue
#4682b4steelblue
#483d8bdarkslateblue
#48d1ccmediumturquoise
#4b0082indigo
#556b2fdarkolivegreen
#5f9ea0cadetblue
#6495edcornflowerblue
#660000
#660033
#660066
#660099
#6600cc
#6600ff
#663300
#663333
#663366
#663399
#6633cc
#6633ff
#666600
#666633
#666666
#666699
#6666cc
#6666ff
#669900
#669933
#669966
#669999
#6699cc
#6699ff
#66cc00
#66cc33
#66cc66
#66cc99
#66cccc
#66ccff
#66cdaamediumaquamarine
#66ff00
#66ff33
#66ff66
#66ff99
#66ffcc
#66ffff
#696969dimgray
#6a5acdslateblue
#6b8e23olivedrab
#708090slategray
#778899lightslategray
#7b68eemediumslateblue
#7cfc00lawngreen
#7fff00chartreuse
#7fffd4aquamarine
#800000maroon
#800080purple
#808000olive
#808080gray
#87ceebskyblue
#87cefalightskyblue
#8a2be2blueviolet
#8b0000darkred
#8b008bdarkmagenta
#8b4513saddlebrown
#8fbc8fdarkseagreen
#90ee90lightgreen
#9370dbmediumpurple
#9400d3darkviolet
#98fb98palegreen
#990000
#990033
#990066
#990099
#9900cc
#9900ff
#9932ccdarkorchid
#993300
#993333
#993366
#993399
#9933cc
#9933ff
#996600
#996633
#996666
#996699
#9966cc
#9966ff
#999900
#999933
#999966
#999999
#9999cc
#9999ff
#99cc00
#99cc33
#99cc66
#99cc99
#99cccc
#99ccff
#99ff00
#99ff33
#99ff66
#99ff99
#99ffcc
#99ffff
#9acd32yellowgreen
#a0522dsienna
#a52a2abrown
#a9a9a9darkgray
#add8e6lightblue
#adff2fgreenyellow
#afeeeepaleturquoise
#b0c4delightsteelblue
#b0e0e6powderblue
#b22222firebrick
#b66655
#b8860bdarkgoldenrod
#ba55d3mediumorchid
#bc8f8frosybrown
#bdb76bdarkkhaki
#c0c0c0silver
#c71585mediumvioletred
#cc0000
#cc0033
#cc0066
#cc0099
#cc00cc
#cc00ff
#cc3300
#cc3333
#cc3366
#cc3399
#cc33cc
#cc33ff
#cc6600
#cc6633
#cc6666
#cc6699
#cc66cc
#cc66ff
#cc9900
#cc9933
#cc9966
#cc9999
#cc99cc
#cc99ff
#cccc00
#cccc33
#cccc66
#cccc99
#cccccc
#ccccff
#ccff00
#ccff33
#ccff66
#ccff99
#ccffcc
#ccffff
#cd5c5cindianred
#cd853fperu
#d2691echocolate
#d2b48ctan
#d3d3d3lightgrey
#d8bfd8thistle
#da70d6orchid
#daa520goldenrod
#db7093palevioletred
#dc143ccrimson
#dcdcdcgainsboro
#dda0ddplum
#deb887burlywood
#e0fffflightcyan
#e6e6falavender
#e9967adarksalmon
#ee82eeviolet
#eee8aapalegoldenrod
#f08080lightcoral
#f0e68ckhaki
#f0f8ffaliceblue
#f0fff0honeydew
#f0ffffazure
#f4a460sandybrown
#f5deb3wheat
#f5f5dcbeige
#f5f5f5whitesmoke
#f5fffamintcream
#f8f8ffghostwhite
#fa8072salmon
#faebd7antiquewhite
#faf0e6linen
#fafad2lightgoldenrodyellow
#fdf5e6oldlace
#ff0000red
#ff0033
#ff0066
#ff0099
#ff00cc
#ff00fffuchsia
#ff00ffmagenta
#ff1493deeppink
#ff3300
#ff3333
#ff3366
#ff3399
#ff33cc
#ff33ff
#ff4500orangered
#ff6347tomato
#ff6600
#ff6633
#ff6666
#ff6699
#ff66cc
#ff66ff
#ff69b4hotpink
#ff7f50coral
#ff8c00darkorange
#ff9900
#ff9933
#ff9966
#ff9999
#ff99cc
#ff99ff
#ffa07alightsalmon
#ffa500orange
#ffb6c1lightpink
#ffc0cbpink
#ffcc00
#ffcc33
#ffcc66
#ffcc99
#ffcccc
#ffccff
#ffd700gold
#ffdab9peachpuff
#ffdeadnavajowhite
#ffe4b5moccasin
#ffe4c4bisque
#ffe4e1mistyrose
#ffebcdblanchedalmond
#ffefd5papayawhip
#fff0f5lavenderblush
#fff5eeseashell
#fff8dccornsilk
#fffacdlemonchiffon
#fffaf0floralwhite
#fffafasnow
#ffff00yellow
#ffff33
#ffff66
#ffff99
#ffffcc
#ffffe0lightyellow
#fffff0ivory
#ffffffwhite

ここで紹介したのはあくまで一部。
カラーコードを弄れば他にも色々な色が出せるぞ!探してみよう!

真面目?な解説 Edit

カラーコードはRGBと16進を知っていると任意の色を作りやすくなる。

光の三原色 Edit

光は「」「」「」の3色ですべての色が表現できる。
その3色が均等に含んでいる場合、人間の目には白色として映る。
絵の具の混色と違い、光は色を混ぜれば混ぜるほど白に近づく特徴がある。

この3色をそれぞれ英単語にすると……

  • 赤――Red
  • 緑――Green
  • 青――Blue

それらの頭文字を取って「RGB(アール・ジー・ビー)」とよく呼ばれる。
この並びを覚えておかないとカラーコードで思った色を表現できないので覚えましょう。

レッド!グリーン!ブルー!
Red!Green!Blue!
あーる!じー!びー!

16進数 Edit

16進とは、「0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15」の16つの数字は1文字として扱いますよーという意味。
詳細は十六進数のページで。

←小さい        大きい→
10進数0123456789101112131415
16進数0123456789abcdef

黒・白・灰色 Edit

カラーコードの場合は数字が小さいと黒っぽくなり、数字が大きいと白っぽくなる

#000000は完全な、#ffffffは完全なになる。
全部中間の#888888なら中間的な灰色になる。

色サンプル16進数
#000000
#111111
#222222
#333333
#444444
#555555
#666666
#777777
#888888
#999999
#aaaaaa
#bbbbbb
#cccccc
#dddddd
#eeeeee
#ffffff

カラーコードの実態 Edit

カラーコードの7文字は、カラーコードであることを意味する「#」に加え、次の2文字は16進の「」、その次の2文字は16進の「」、最後の2文字は16進の「」を意味している。
前から、レッド!グリーン!ブルー!の順番である。
基本的には16進の値が大きいほどその色が鮮やかに出て、16進の値が小さいほどその色が暗くなる。

 

例として「skyblue (#87ceeb)」で見てみる。

 「skyblue」のカラーコード「#87ceeb」を「#」と「文字2つずつ」に分解する
#87ceed
#16進の「87」16進の「ce」16進の「ed」
#16進の「87」は10進の「135」16進の「ce」は10進の「206」16進の「ed」は10進の「237」
#赤の強さが「135」緑の強さが「206」青の強さが「237」
混ぜるとこんな色(#・87・ce・eb)になる

あら簡単。

 

他の色でも見てみよう。

 「tomato」のカラーコード「#ff6347」を「#」と「文字2つずつ」に分解する
#ff6347
#16進の「ff」16進の「63」16進の「47」
#16進の「ff」は10進の「255」16進の「63」は10進の「99」16進の「47」は10進の「71」
#赤の強さが「255」緑の強さが「99」青の強さが「71」
混ぜるとこんな色(#・ff・63・47)になる

最も強い赤をベースとして、緑と青がある程度混ざったぶん白っぽくなった色か。確かにそんな感じかもね。

 
 「black」のカラーコード「#000000」を「#」と「文字2つずつ」に分解する
#000000
#16進の「00」16進の「00」16進の「00」
#16進の「00」は10進の「0」16進の「00」は10進の「0」16進の「00」は10進の「0」
#赤の強さが「0」緑の強さが「0」青の強さが「0」
混ぜるとこんな色(#・00・00・00)になる

ん?

3つの色の強さがゼロのとき、無色ではなく黒色になるのはなぜ? Edit

  1. まず夜になるまで待ちます。
  2. 夜になったらカーテンを閉めて電気を全部消してその他光るもの(ケータイとかPCとか)を全部光らないようにします。
  3. そうしたとき何色が見えますか? 「無色」が見えてますか?
  4. そういうこと。

結論:光が無い状態だと人間の目には黒色に見える。

カラーコードの範囲 Edit

ここまでの説明を読んで

赤の強さを「1145141919」にすれば赤より紅い夢が見れるんじゃねww

と考える人がいるかもしれない。しかしそうすることはできない。
というのも、色の範囲は16進数で2桁まで、10進数だと255まででないとカラーコードとして認識されないからである。
そもそも10進数の1145141919(十一億四千五百十四万一千九百九十九)は明らかに255をオーバーしており、それを16進数に直した44417a9fも明らかに2桁をオーバーしている。
こういった無茶苦茶な値を入れても色にならないので注意されたし。

 

では、最低0最高255ということを念頭に置いて色を作ってみる。

  • 適当に緑は最強の「255」にしよう
  • 青はそこそこ高めの「130」にして
  • 赤は少しだけ混ぜる感じの「40」にする

以上の色を作るには

#赤の強さが「40」緑の強さが「255」青の強さが「130」
#10進の「40」10進の「255」10進の「130」
#10進の「40」は16進の「28」10進の「255」は16進の「ff」10進の「130」は16進の「82」
#28ff82(#・28・ff・82)になる

実際にはこうやって数字から色を作るよりサンプルからコピペしたりペイントツールで色を作ってカラーコードを取得したほうが楽であるが。

短縮カラーコード Edit

実はカラーコードは3桁でもいける。

色サンプル16進数語呂合わせ
#573コナミ
#913カイザ
#abeあべ
#debデブ
 

3桁のときの処理はどうなっているか「#810」で見てみる。

 「#810」を「#」と「文字1つずつ」に分解する
#810
#文字を2つ重ねて「88」にする文字を2つ重ねて「11」にする文字を2つ重ねて「00」にする
#16進の「88」16進の「11」16進の「00」
#16進の「88」は10進の「136」16進の「11」は10進の「17」16進の「00」は10進の「0」
#赤の強さが「136」緑の強さが「17」青の強さが「0」
#810は
#881100と同じ色になる

#573は#557733と同じ、#913は#991133と同じ、#abeは#aabbeeと同じ、#debは#ddeebbと同じになる。

 

なお、6桁のカラーコードだと16777216色の色を表現できるが、3桁のカラーコードだと4096色しか表現できない。
もしかしたら4096色もあれば十分じゃねと考えるかもしれないが、案外色にこだわりだすと4096色ではビタッとハマる色が見つからないことがあるのが悩ましい。

4096色の一覧

コメント Edit

  • このページ有能すぎる -- 2018-01-05 (金) 02:13:11
  • 最高 -- 昇華職人 2018-01-05 (金) 02:14:16
  • すごいです!すごすぎます! 編集乙 -- 俺はページを作る者だ 2018-01-05 (金) 15:52:01
  • デデーン -- 2018-01-30 (火) 23:23:45
  • ↑ファッ!?ここに載ってないやつも使えるのか...もっと探してこよ -- 2018-01-30 (火) 23:24:57
  • テスト -- 2018-01-30 (火) 23:25:24
  • 適当に入力してみよ -- 2018-01-30 (火) 23:26:41
  • ↑マジかよ...適当に114514って入力してもできたぞ... -- 2018-01-30 (火) 23:29:44
  • ↑マ? -- ちゃぶ台問屋? 2018-01-30 (火) 23:43:19
  • テスト -- 2018-01-30 (火) 23:57:14
  • -- ちゃぶ台問屋? 2018-01-31 (水) 00:02:14
  • デデーン!デデーン! -- 2018-01-31 (水) 16:45:16
  • テスト -- ソーナンスの人 2018-01-31 (水) 17:59:32
  • メガバッテンち -- オトメロン奴隷 2018-01-31 (水) 18:01:31
  • &color():Invalid color: ff9900; -- 急行 2018-03-17 (土) 15:02:03
  • 上のは間違えた -- 急行 2018-03-17 (土) 15:04:02
  • Sports -- [[YUYA(New)]] 2018-05-04 (金) 06:34:01
  • メガネ -- 眼鏡急行 2018-05-06 (日) 09:48:31
  • &color():Invalid color: #990033のお試し; -- 2018-11-22 (木) 11:54:23
  • #990033のお試し -- 2018-11-22 (木) 11:55:38
  • #810810はどんな色かな -- スパイシーアイス 2018-11-24 (土) 14:49:22
  • どんな色? -- 2018-11-24 (土) 15:01:17
  • 見ろよ見ろよ -- スパイシーアイス 2018-11-25 (日) 13:13:56
  • いいよ!こいよ! -- うにまろ 2018-12-17 (月) 17:27:48
  • 解説した人すごすぎる。 -- 眼鏡急行 2018-12-17 (月) 17:50:20
  • 眼鏡急行 -- 2019-01-05 (土) 20:15:09
  • 眼鏡急行 -- 2019-01-05 (土) 20:16:47

URL B I U SIZE Black Maroon Green Olive Navy Purple Teal Gray Silver Red Lime Yellow Blue Fuchsia Aqua White

観覧者数 Edit

現在?
今日?
昨日?
合計?