WordPressテーマ「THE THOR」には8トーンのカラーセットが用意されており、そのうち7トーンにそれぞれ12色、モノトーンに7色で計91色のカラーを使うことができます。ただ慣れるまではトーン名称とカラー名称だけでは実際にどんな色なのか使ってみないとわかりません。何度も試して色探しをするのはとても時間がかかります。

そこで今回は今後の作業効率UPのために「THE THOR」に用意されているカラーを系統別に一覧にすることにしました。
カラーセットのトーンとカラーの名称
THE THORでは全91色のカラーが8つのトーンに分類されており、カーラーネームの先頭にアルファベット大文字1文字もしくは2文字で付けられています。
THE THORのトーン名称 | コード |
---|---|
ヴィヴィッド | V |
ブライト | B |
ディープ | DP |
ライト | L |
ダル | DL |
ベリーペール | VP |
ダークグレイッシュ | DG |
モノトーン | – |
THE THORのカラー名称 | コード |
---|---|
イエロー | yellow |
オレンジ | orange |
レッド | red |
マゼンタ | magenta |
ピンク | pink |
パープル | purple |
ネイビー | navy |
ブルー | blue |
スカイ | sky |
ターコイズ | turquoise |
グリーン | green |
ライム | lime |
例えばレッドの場合は、
となります。
モノトーンだけは他のトーンと異なります。
カラーセット内のカラー一覧(カラー系統別)
イエロー
THE THORカラーコード | トーン名称 | 16進数 |
---|---|---|
Vyellow
|
ヴィヴィッド | #fff100 |
Byellow
|
ブライト | #fff338 |
DPyellow
|
ディープ | #cbbd00 |
Lyellow
|
ライト | #fff89a |
DLyellow
|
ダル | #cac04e |
VPyellow
|
ベリーペール | #fffded |
DGyellow
|
ダークグレイッシュ | #675f00 |
オレンジ
THE THORカラーコード | トーン名称 | 16進数 |
---|---|---|
Vorange
|
ヴィヴィッド | #f49801 |
Borange
|
ブライト | #f6ad3a |
DPorange
|
ディープ | #bf7601 |
Lorange
|
ライト | #fbce8a |
DLorange
|
ダル | #c39043 |
VPorange
|
ベリーペール | #fef5e8 |
DGorange
|
ダークグレイッシュ | #633c00 |
レッド
THE THORカラーコード | トーン名称 | 16進数 |
---|---|---|
Vred
|
ヴィヴィッド | #e60112 |
Bred
|
ブライト | #ea5532 |
DPred
|
ディープ | #b60105 |
Lred
|
ライト | #f39c76 |
DLred
|
ダル | #ba5536 |
VPred
|
ベリーペール | #feede3 |
DGred
|
ダークグレイッシュ | #5f0100 |
マゼンタ
THE THORカラーコード | トーン名称 | 16進数 |
---|---|---|
Vmagenta
|
ヴィヴィッド | #e5004f |
Bmagenta
|
ブライト | #e9536b |
Dmagenta
|
ディープ | #b5003c |
Lmagenta
|
ライト | #f29c9f |
DLmagenta
|
ダル | #ba5460 |
VPmagenta
|
ベリーペール | #fdedec |
DGmagenta
|
ダークグレイッシュ | #5f0017 |
ピンク
THE THORカラーコード | トーン名称 | 16進数 |
---|---|---|
Vpink
|
ヴィヴィッド | #e4017f |
Bpink
|
ブライト | #e9536b |
Dpink
|
ディープ | #b50165 |
Lpink
|
ライト | #f29fc3 |
DLpink
|
ダル | #ba5584 |
VPpink
|
ベリーペール | #fdeff5 |
DGpink
|
ダークグレイッシュ | #600033 |
パープル
THE THORカラーコード | トーン名称 | 16進数 |
---|---|---|
Vpurple
|
ヴィヴィッド | #920883 |
Bpurple
|
ブライト | #a54a98 |
Dpurple
|
ディープ | #740169 |
Lpurple
|
ライト | #c490bf |
DLpurple
|
ダル | #8c4b82 |
VPpurple
|
ベリーペール | #f3eaf4 |
DGpurple
|
ダークグレイッシュ | #3e0036 |
ネイビー
THE THORカラーコード | トーン名称 | 16進数 |
---|---|---|
Vnavy
|
ヴィヴィッド | #1c1e84 |
Bnavy
|
ブライト | #4c4398 |
Dnavy
|
ディープ | #14116e |
Lnavy
|
ライト | #8f82bc |
DLnavy
|
ダル | #4e4282 |
VPnavy
|
ベリーペール | #e8e6f3 |
DGnavy
|
ダークグレイッシュ | #08003a |
ブルー
THE THORカラーコード | トーン名称 | 16進数 |
---|---|---|
Vblue
|
ヴィヴィッド | #0068b7 |
Bblue
|
ブライト | #2b71b8 |
Dblue
|
ディープ | #005293 |
Lblue
|
ライト | #87abda |
DLblue
|
ダル | #3970a2 |
VPblue
|
ベリーペール | #fe9eef9 |
DGblue
|
ダークグレイッシュ | #00274f |
スカイ
THE THORカラーコード | トーン名称 | 16進数 |
---|---|---|
Vsky
|
ヴィヴィッド | #00a0e9 |
Bsky
|
ブライト | #00b0ec |
Dsky
|
ディープ | #0081ba |
Lsky
|
ライト | #7ecff5 |
DLsky
|
ダル | #1894be |
VPsky
|
ベリーペール | #eaf6fe |
DGsky
|
ダークグレイッシュ | #004462 |
ターコイズ
THE THORカラーコード | トーン名称 | 16進数 |
---|---|---|
Vturquoise
|
ヴィヴィッド | #009e96 |
Bturquoise
|
ブライト | #00ada9 |
Dturquoise
|
ディープ | #007f78 |
Lturquoise
|
ライト | #83ccc9 |
DLturquoise
|
ダル | #1d928f |
VPturquoise
|
ベリーペール | #eaf5f4 |
DGturquoise
|
ダークグレイッシュ | #004340 |
グリーン
THE THORカラーコード | トーン名称 | 16進数 |
---|---|---|
Vgreen
|
ヴィヴィッド | #009944 |
Bgreen
|
ブライト | #0ba95f |
Dgreen
|
ディープ | #007c36 |
Lgreen
|
ライト | #88c997 |
DLgreen
|
ダル | #218f59 |
VPgreen
|
ベリーペール | #ebf5eb |
DGgreen
|
ダークグレイッシュ | #004215 |
ライム
THE THORカラーコード | トーン名称 | 16進数 |
---|---|---|
Vlime
|
ヴィヴィッド | #8ec31f |
Blime
|
ブライト | #a9cf52 |
Dlime
|
ディープ | #6f9b12 |
Llime
|
ライト | #cce199 |
DLlime
|
ダル | #8ea953 |
VPlime
|
ベリーペール | #ebf5eb |
DGlime
|
ダークグレイッシュ | #395104 |
モノトーン
THE THORカラーコード | カラー名称 | 16進数 |
---|---|---|
white
|
ホワイト | #8ec31f |
VLgray
|
ベリーライトグレイ | #a9cf52 |
Lgray
|
ライトグレイ | #6f9b12 |
gray
|
グレー | #cce199 |
Dgray
|
ダークグレー | #8ea953 |
VDgray
|
ベリーダークグレー | #ebf5eb |
black
|
ブラック | #395104 |
カラーセットの使い方
カラーセットは文字色・背景色・ボーダ色のコードと組み合わせて使用します。
行で使用 – <p></p>内
文字色をVred、背景色をLskyに指定しています。
<p class="ftc-Vred bgc-Lsky">文字色をVred、背景色をLskyに指定しています。</p>
文字列で使用 – <span></span>内
文字色をVpink、背景色をblackに指定しています。
<span class="bgc-black ftc-Vpink es-borderSolidM brc-Vpink">文字色をVpink、背景色をblack、ボーダー色をVpinkに指定しています。</span>
リストで使用 – <li></li>内
- 文字色をVred、背景色をLskyに指定しています。
- 文字色をDblue、背景色をVyellowに指定しています。
<ul>
<li class="ftc-Vred bgc-Lsky">文字色をVred、背景色をLskyに指定しています。</li>
<li class="bgc-Vyellow ftc-DPblue">文字色をDblue、背景色をVyellowに指定しています。</li>
</ul>
リストで使用 – <ui></ul>内
- 文字色をVred、背景色をLskyに指定しています。
- これは2項目めの文章です。
<ul class="ftc-Vred bgc-Lsky">
<li>文字色をVred、背景色をLskyに指定しています。</li>
<li>これは2項目めの文章です。</li>
</ul>
ボックスで使用
<div class="ep-box bgc-Vpurple brc-DGpurple es-borderSolidM ftc-white">文字色をwihte、背景色をVpurple、ボーダー色をDGpurpleに指定しています。</div>