Help:色の使用
[Wikipedia|▼Menu]
.mw-parser-output .hatnote{margin:0.5em 0;padding:3px 2em;background-color:transparent;border-bottom:1px solid #a2a9b1;font-size:90%}

この項目では、色の使用方法について説明しています。色の使用について指針については「Wikipedia:色の使用」をご覧ください。
.mw-parser-output .ombox{margin:4px 0;border-collapse:collapse;border:1px solid #a2a9b1;background-color:#f8f9fa;box-sizing:border-box}.mw-parser-output .ombox.mbox-small{font-size:88%;line-height:1.25em}.mw-parser-output .ombox-speedy{border:2px solid #b32424;background-color:#fee7e6}.mw-parser-output .ombox-delete{border:2px solid #b32424}.mw-parser-output .ombox-content{border:1px solid #f28500}.mw-parser-output .ombox-style{border:1px solid #fc3}.mw-parser-output .ombox-move{border:1px solid #9932cc}.mw-parser-output .ombox-protection{border:2px solid #a2a9b1}.mw-parser-output .ombox .mbox-text{border:none;padding:0.25em 0.9em;width:100%;font-size:90%}.mw-parser-output .ombox .mbox-image{border:none;padding:2px 0 2px 0.9em;text-align:center}.mw-parser-output .ombox .mbox-imageright{border:none;padding:2px 0.9em 2px 0;text-align:center}.mw-parser-output .ombox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ombox .mbox-invalid-type{text-align:center}@media(min-width:720px){.mw-parser-output .ombox{margin:4px 10%}.mw-parser-output .ombox.mbox-small{clear:right;float:right;margin:4px 0 4px 1em;width:238px}}

この文書は手引き書です。ウィキペディア日本語版での活動の参考にされていますが、方針やガイドラインではありません。.mw-parser-output .module-shortcutboxplain{float:right;border:1px solid #aaa;background:#fff;margin:0 0 0 1em;padding:0.3em 0.6em 0.2em 0.6em;text-align:center;font-size:85%;font-weight:bold}.mw-parser-output .module-shortcutlist{display:inline-block;border-bottom:1px solid #aaa;margin-bottom:0.2em;font-weight:normal}.mw-parser-output .module-shortcutanchordiv{position:relative;top:-3em}ショートカット:

H:COLOR

H:COLOUR

リンクは読者がはっきりと識別できるようにすべきです。
通常の文と区別がつきにくい色を使用したり、審美的な理由だけでリンクの色を変えないでください。詳しくは色のコントラストWikipedia:アクセシビリティ#色を参照してください。

テンプレートの色を変えるには16進トリプレット(例:黒は#000000) かHTML色名(例:赤はred)を指定してください。
文字色の変更

文字色を変えるには:<span style="color:16進トリプレットかHTML色名">文字</span>

なお、イギリス英語の colour は使えません。



<span style="color:red">赤文字</span>は赤文字と表示される

<span style="color:#0f0">緑文字</span>は緑文字と表示される

<span style="color:#0000FF">青文字</span>は青文字と表示される

テンプレートの文字色

{{Font color}}も使えます。

{{Font color|文字色|背景色|文字の内容}}

例結果
??{{font color|red|色違いの文字}}色違いの文字
文字色だけ変える(普通の文字をリンクと同じような色にしないでください)
??{{font color|red|yellow|色違いの文字}}色違いの文字
文字色と背景色の両方を変える
??{{font color||yellow|色違いの文字}}色違いの文字
背景色だけ変える
注:文字色変更との違いは、こちらはパイプを2つ使います||

色の生成法

ウィキメディア英語版において、メインページコミュニティ・ポータルPortal:コンテンツHelp:目次など玄関的な役目を果たすページの配色は配色の方法に従って選ばれています。その配色の方法はHSV色空間で色を生成してからRGBに変換したものです。

色相彩度4%
明度100%

主な背景色彩度10%
明度100%

レベル2の見出しのアクセントカラー彩度15%
明度95%
主な枠線色
見出しの背景色彩度15%
明度75%

見出しの枠線色
??枠線の間に空白がない場合は暗いほうの枠線色を使います。
色相: 0#FFF5F5#FFE6E6#F2CECE#BFA3A3
色相: 10#FFF7F5#FFEAE6#F2D4CE#BFA7A3
色相: 20#FFF8F5#FFEEE6#F2DACE#BFACA3
色相: 30#FFFAF5#FFF2E6#F2E0CE#BFB1A3
色相: 40#FFFCF5#FFF7E6#F2E6CE#BFB6A3
色相: 50#FFFDF5#FFFBE6#F2ECCE#BFBAA3
色相: 60#FFFFF5#FFFFE6#F2F2CE#BFBFA3
色相: 70#FDFFF5#FBFFE6#ECF2CE#BABFA3
色相: 80#FCFFF5#F7FFE6#E6F2CE#B6BFA3
色相: 90#FAFFF5#F2FFE6#E0F2CE#B1BFA3
色相: 100#F8FFF5#EEFFE6#DAF2CE#ACBFA3
色相: 110#F7FFF5#EAFFE6#D4F2CE#A7BFA3
色相: 120#F5FFF5#E6FFE6#CEF2CE#A3BFA3
色相: 130#F5FFF7#E6FFEA#CEF2D4#A3BFA7
色相: 140#F5FFF8#E6FFEE#CEF2DA#A3BFAC
色相: 150#F5FFFA#E6FFF2#CEF2E0#A3BFB1
色相: 160#F5FFFC#E6FFF7#CEF2E6#A3BFB6
色相: 170#F5FFFD#E6FFFB#CEF2EC#A3BFBA
色相: 180#F5FFFF#E6FFFF#CEF2F2#A3BFBF
色相: 190#F5FDFF#E6FBFF#CEECF2#A3BABF
色相: 200#F5FCFF#E6F7FF#CEE6F2#A3B6BF
色相: 210#F5FAFF#E6F2FF#CEE0F2#A3B1BF
色相: 220#F5F8FF#E6EEFF#CEDAF2#A3ACBF
色相: 230#F5F7FF#E6EAFF#CED4F2#A3A7BF
色相: 240#F5F5FF#E6E6FF#CECEF2#A3A3BF
色相: 250#F7F5FF#EAE6FF#D4CEF2#A7A3BF
色相: 260#F8F5FF#EEE6FF#DACEF2#ACA3BF
色相: 270#FAF5FF#F2E6FF#E0CEF2#B1A3BF
色相: 280#FCF5FF#F7E6FF#E6CEF2#B6A3BF
色相: 290#FDF5FF#FBE6FF#ECCEF2#BAA3BF
色相: 300#FFF5FF#FFE6FF#F2CEF2#BFA3BF
色相: 310#FFF5FD#FFE6FB#F2CEEC#BFA3BA
色相: 320#FFF5FC#FFE6F7#F2CEE6#BFA3B6
色相: 330#FFF5FA#FFE6F2#F2CEE0#BFA3B1
色相: 340#FFF5F8#FFE6EE#F2CEDA#BFA3AC
色相: 350#FFF5F7#FFE6EA#F2CED4#BFA3A7
色相・彩度0#FFFFFF#F9F9F9#F2F2F2#BFBFBF

ほかの色相でのカラーパレットは、 ⇒colorblender.comで簡単に生成することができます。
ウィキメディアにおけるカラースキーム
ウィキペディア英語版

ウィキペディア英語版のメインページでは下記の配色を使用しています。なお、浅い背景色のボックスの枠線色は暗い背景色のボックスの背景色と同じ色です。色相: 150背景:#F5FFFA 枠線:#CEF2E0?背景:#CEF2E0 枠線:#A3BFB1?
色相: 210背景:#F5FAFF 枠線:#CEE0F2?背景:#CEE0F2 枠線:#A3B1BF?
色相: 270背景:#FAF5FF 枠線:#E0CEF2?背景:#E0CEF2 枠線:#B1A3BF?
色相: 330背景:#FFF5FA 枠線:#F2CEE0?背景:#F2CEE0 枠線:#BFA3B1?

また英語版のコミュニティ・ポータルでは下記を使用しています。色相: 030背景:#FFFAF5 枠線:#F2E0CE?背景:#F2E0CE 枠線:#BFB1A3?

ベクター外装でのデフォルト背景色は#FFFFFFで、モノブック外装でのデフォルト背景色は#F8FCFFです。
ウィキメディア・コモンズ

ウィキメディア・コモンズ英語版ではメインページとHelp:目次に下記のカラースキームを使用しています。ウィキペディア英語版と違い、コモンズでは見出しの枠線と表全体の枠線が同じ色です。またウィキペディア英語版と違い、この配色は色相によって定義されたものではありません。

背景色: #D0E5F5背景色: #F1F5FC
枠線色: #ABD5F5背景色: #FAECC8背景色: #FAF6ED
枠線色: #FAD67D

関連項目

Wikipedia:色の使用 - ガイドライン

Wikipedia:アクセシビリティ#色 - ガイドラインの草案

Wikipedia:テンプレートの色で編集合戦をしない - 私論

テンプレート

文字と背景に色をつける

{{
Font color}}

色の例として色つきボックスを表示する

{{Color sample}}

Template:Swatch(英語版)

{{Swatch inline}}

ヘルプ

Help:リンク色

Help:JPEG画像を減色しPNG画像として保存する方法

Category:色を過剰に使用している記事

記事

カラーツール
(英語版)

ウェブカラー

色名一覧


記事の検索
おまかせリスト
▼オプションを表示
ブックマーク登録
mixiチェック!
Twitterに投稿
オプション/リンク一覧
話題のニュース
列車運行情報
暇つぶしWikipedia

Size:11 KB
出典: フリー百科事典『ウィキペディア(Wikipedia)
担当:undef