Help:色の使用
（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}}