色見本

提供：八中・小山台デジタルアーカイブ
ナビゲーションに移動 検索に移動

テキストに色を付ける

テキストや背景 (バックグラウンド)に色を付ける際の参考です。


「色の名前」で指定
　文字の色を指定するには、spanタグのstyle属性に「色名」を記載します。
　例えば、
　<span style="color:red;">赤字</span>
　とすると赤字になります。
　「red」のような「色名」には以下のものがあります。


記述例
　<span style="color:black;">黒</span>
　<span style="color:gray;">灰色</span>
　<span style="color:silver;">銀色</span>
　<span style="background:black; color:white;">白</span>
　<span style="color:blue;">青</span>
　<span style="color:navy;">濃紺</span>
　<span style="color:teal;">青緑</span>
　<span style="color:green;">緑</span>
　<span style="color:lime;">黄緑</span>
　<span style="color:aqua;">水色</span>
　<span style="background:navy; color:yellow;">黄色</span>
　<span style="color:fuchsia;">マゼンタ</span>
　<span style="color:olive;">オリーブ</span>
　<span style="color:purple;">紫</span>
　<span style="color:maroon;">茶色</span>
　　　　脚注：「teal[1]」「fuchsia[2]」
表示

　　黒 　灰色 　銀色 　白 　青 　濃紺 　青緑 　緑 　黄緑 　水色 　黄色 　マゼンタ 　オリーブ 　紫 　茶色

「白」と「黄色」の文字には、それぞれ「黒："background:black;"」、「濃紺："background:navy;"」の背景色を付けています。



その他の色の名前

色の名前にはまだまだあります。例えば、
　<span style="background:lemonchiffon;">浅黄色　　　　　　</span>

　　浅黄色　　　　　　

　なんて色も出せます。「色名」には、全部で140色あるそうです。
　詳しくはこちらを → 「カラーサンプル」



「色名」に無い色は「16進カラーコード」で指定

　また色を「名前」で指定する代わりに「#F5F5F5」のような16進カラーコードで指定することもできます。
　これを使えば「色名」に無い色「1677万色」が使えます。
　しかし、MediaWikiでは派手な色使いは推奨されませんので、控えめに、そしてスマートに作りましょう！


記入例
　<span style="color:#8D6449">枯茶色</span>
　<span style="color:#FFD900">蒲公英(たんぽぽ)色</span>
　<span style="color:#7058A3">菫(すみれ)色</span>
　背景色を羊羹(ようかん)色に設定
　<span style="background:#383C3C;color:#DBD0E6">白藤色　　</span>
表示
　枯茶色
　蒲公英(たんぽぽ)色
　菫(すみれ)色
　背景色を羊羹(ようかん)色に設定
　白藤色　　



カラーサンプル

MediaWikiでは派手な色使いは推奨されませんとは言うものの、個性的な色使いをしたい方もいらっしゃるでしょう。
そのような方のために以下に「色名(Color Name)」と「16進カラーコード」の一覧表です。
一覧表を表示するには、下のボタンをクリック

一覧表の表示/非表示

色名(Color Name)と16進カラーコードに対応する色(背景色)
black
#000000		 aliceblue
#F0F8FF		 darkcyan
#008B8B		 lightyellow
#FFFFE0		 coral
#FF7F50
dimgray
#696969		 lavender
#E6E6FA		 teal
#008080		 lightgoldenrodyellow
#FAFAD2		 tomato
#FF6347
grey
#808080		 lightsteelblue
#B0C4DE		 darkslategray
#2F4F4F		 lemonchiffon
#FFFACD		 orangered
#FF4500
darkgray
#A9A9A9		 lightslategray
#778899		 darkgreen
#006400		 wheat
#F5DEB3		 red
#FF0000
silver
#C0C0C0		 slategray
#708090		 green
#008000		 burlywood
#DEB887		 crimson[3]
#DC143C
lightgray
#D3D3D3		 steelblue
#4682B4		 forestgreen
#228B22		 tan
#D2B48C		 mediumvioletred
#C71585
gainsboro[4]
#DCDCDC		 royalblue
#4169E1		 seagreen
#2E8B57		 khaki[5]
#F0E68C		 deeppink
#FF1493
whitesmoke
#F5F5F5		 midnightblue
#191970		 mediumseagreen
#3CB371		 yellow
#FFFF00		 hotpink
#FF69B4
white
#FFFFFF		 navy
#000080		 mediumaquamarine
#66CDAA		 gold
#FFD700		 palevioletred
#DB7093
snow
#FFFAFA		 darkblue
#00008B		 darkseagreen
#8FBC8F		 orange
#FFA500		 pink
#000000
ghostwhite
#F8F8FF		 mediumblue
#0000CD		 aquamarine
#7FFFD4		 sandybrown
#F4A460		 lightpink
#FFB6C1
floralwhite
#FFFAF0		 blue
#0000FF		 palegreen
#98FB98		 darkorange
#FF8C00		 thistle[6]
#D8BFD8
linen
#FAF0E6		 dodgerblue
#1E90FF		 lightgreen
#90EE90		 goldenrod
#DAA520		 magenta
#0000FF
antiquewhite
#FAEBD7		 cornflowerblue
#6495ED		 springgreen
#00FF7F		 peru[7]
#CD853F		 fuchsia
#FF00FF
papayawhip
#FFEFD5		 deepskyblue
#00BFFF		 mediumspringgreen
#00FA9A		 darkgoldenrod
#B8860B		 violet
#EE82EE
blanchedalmond
#FFEBCD		 lightskyblue
#87CEFA		 lawngreen
#7CFC00		 chocolate
#D2691E		 plum
#DDA0DD
bisque[8]
#FFE4C4		 skyblue
#87CEEB		 chartreuse
#7FFF00		 sienna
#A0522D		 orchid
#DA70D6
moccasin[9]
#FFE4B5		 lightblue
#ADD8E6		 greenyellow
#ADFF2F		 saddlebrown
#8B4513		 mediumorchid
#BA55D3
navajowhite[10]
#FFDEAD		 powderblue
#B0E0E6		 lime
#00FF00		 maroon
#800000		 darkorchid
#9932CC
peachpuff
#FFDAB9		 paleturquoise
#AFEEEE		 limegreen
#32CD32		 darkred
#8B0000		 darkviolet
#9400D3
mistyrose
#FFE4E1		 lightcyan
#E0FFFF		 yellowgreen
#9ACD32		 brown
#A52A2A		 darkmagenta
#8B008B
lavenderblush
#FFF0F5		 cyan
#00FFFF		 darkolivegreen
#556B2F		 firebrick
#B22222		 purple
#800080
seashell
#FFF5EE		 aqua[11]
#00FFFF		 olivedrab
#6B8E23		 indianred
#CD5C5C		 indigo
#4B0082
oldlace
#FDF5E6		 turquoise[12]
#40E0D0		 olive
#808000		 rosybrown
#BC8F8F		 darkslateblue
#483D8B
ivory
#FFFFF0		 mediumturquoise
#48D1CC		 darkkhaki
#BDB76B		 darksalmon
#E9967A		 blueviolet
#8A2BE2
honeydew
#F0FFF0		 darkturquoise
#00CED1		 palegoldenrod
#EEE8AA		 lightcoral
#F08080		 mediumpurple
#9370DB
mintcream
#F5FFFA		 lightseagreen
#20B2AA		 cornsilk
#FFF8DC		 salmon
#FA8072		 slateblue
#6A5ACD
azure[13]
#F0FFFF		 cadetblue
#5F9EA0		 beige[14]
#F5F5DC		 lightsalmon
#FFA07A		 mediumslateblue
#7B68EE


色名について：
  1. ↑ マガモの頭の羽の色からとられた名前。近年、組織のあり方を色分けした最上位の「ティールな組織」という言葉をお聞きになられた方もいらっしゃるでしょう。
  2. ↑ 赤紫色のことである。アカバナ科の植物フクシアの花の色にちなんで名づけられたが「フューシャ」と呼ばれることも多い。色の三原色の一つ「magenta：マゼンタ」とも呼ばれる。マゼンタの由来：1859年のマジェンタの戦い (サルデーニャ王国とフランスの連合軍が、オーストリア＝ハンガリー帝国軍に勝利をおさめた戦い)とほぼ同時期に発見された染料だったためこの名が付いた。
  3. ↑ 地中海の国々で樫の木の一種ケルメス・オーク (Kermes oak)に住むカイガラムシから取られた赤い染料の色であった。「ケルメスの」を意味するスペイン語"cremesi"が由来。 赤とマゼンタの中間色。
  4. ↑ ゲーンズボロ(淡い灰色)。英国の画家Thomas Gainsborough(1727-1788)の絵のスタイル(軽く繊細なタッチ)から来たようだ。米国の地名から来たという説もある。
  5. ↑ カーキ色:ヒンディー語の土埃(ホコリ)色から来ている。しかし、この色「カーキ色」と言うには少々明る過ぎる感じもしますね。
  6. ↑ Thistle：スィスルは植物の薊 (アザミ：スコットランドの国花)。花弁は細い棒状の集まりで針山のような形。その花弁の青紫色に由来する。非常に薄い青紫色。
  7. ↑ ペルーブラウン：南米ペルーの国旗や国章にアンデス原産キナの木があり、このキナの木の樹皮から抗マラリア薬のキニーネが得られる。この樹皮の色から来たようだ。黄土色というかアンバーというか、明るい茶色。
  8. ↑ Wikipedia参照：https://ja.wikipedia.org/wiki/%E3%83%93%E3%82%B9%E3%82%AF
  9. ↑ アメリカ先住民が履いていた、鹿などの一枚革で作られたスリッポン形式の靴の色から来た。靴はその後U字型の甲革がモカシン縫いという方法で縫い合わされたのでこの名がある。薄い茶色。
  10. ↑ 北米先住民族ナバホの国旗の背景色に由来する、薄いイエロー・オレンジ色。出典：https://en.wikipedia.org/wiki/Navajo_white
  11. ↑ aque は、上の cyanと同じです。
  12. ↑ ターコイズブルーとは、トルコ石 (turquoise：ターコイズ)を原料とする青緑色。ペルシャで採掘された石がトルコ経由で地中海地方にもたらされたため名づけられた。青と緑の中間色で、青みが強いトルコ石をターコイズブルー、緑が強いとターコイズグリーンと呼ばれる。
  13. ↑ 現在のトルキスタンにある地名lazhwardが語源。当地で産出する青色の宝石「ラピスラズリ：lazhwardの石(lapis)」を意味するようになり、色の名前となった。元来、明るく鮮やかな青を表すが、Webで規定されるアジュール(azure)は「淡い青色」で元の色と異なる。
  14. ↑ 染めていない羊毛の毛織物をベージュと言った。そこから「ベージュ」はその織物の色、つまり極めて薄い黄色または茶色のことを言う。



色に関する情報について

「色名」に無い色を使いたい
「色名」に無い色を指定したい場合は、「16進カラーコード」を組み合わせて作成します。
「16進カラーコード」については、以下のリンク先情報を参照ください。


この16進コードはどんな色かな？
「16進カラーコード」に対する実際の色を確認したい場合は、https://www.peko-step.com/tool/tfcolor.html


この色を使いたいが、16進コードは？
逆に、好きな色からカラーコードを知りたい場合は「HTML Color Code」https://html-color-codes.info/japanese/ が便利。


また、「原色大辞典」https://www.colordic.org/ というサイトも参考になります。



質問・ご意見はこちら

お問い合わせ・ご意見のメールはこちら


上記リンクをクリックしてもメールソフトが起動しない場合は、以下のアドレスをコピーしてメールソフトの「宛先」に貼り付けてください。
　【担当者メールアドレス】wiki_admin@koyamadai100.jp



　 ←「3. テキスト整形方法について」　　　 ←「4. テキスト編集ツール」　　　 →「6. 【重要】ログアウトに注意！」　　　 →「7. リンク作成方法について」
　 ↑ページトップへ　　　　 ↑↑「メインページ」の「編集者のためのヘルプ」に戻る　　　 ↑↑「メインページ」トップに戻る

脚注：　
･

2022年3月21日：直近編集者：Adminkoyama100
TimeStamp：20220321212242

「https://wiki.koyamadai100.jp/index.php?title=色見本&oldid=1303」から取得