WordPressテーマ『THE THOR（ザ・トール）』には多彩なプリセットカラーが用意されているんですが・・・
↑これ、ちょっと使いにくくないですか？💦
リスト階層が深くてちょっとめいんどくさいのもそうなんですが
「オレンジにしたいんだけど、ヴィヴィッドトーンとブライトトーンどっちがいいかな？」
なんてときには、一度適用してみて確認しないといけないので手間がかかります。
「カラーチャートのようなもので、一覧比較できたらわかりやすいのに」
と思ったので、自分で作ってみました。
目次
全色比較
トーンとカラーを比較しやすいよう一覧表にしました。
モノトーン（白や黒）は除外してあります。
←スクロールできます→
| ヴィヴィッドトーン | ブライトトーン | ディープトーン | ライトトーン | ダルトーン | ベリーペールトーン | ダークグレイッシュトーン | ||
| イエロー | Vyellow #fff100 |
Byellow #fff338 |
DPyellow #cbbd00 |
Lyellow #fff89a |
DLyellow #cac04e |
VPyellow #fffded |
DGyellow #675f00 |
イエロー |
| オレンジ | Vorange #f49801 |
Borange #f6ad3a |
DPorange #bf7601 |
Lorange #fbce8a |
DLorange #c39043 |
VPorange #fef5e8 |
DGorange #633c00 |
オレンジ |
| レッド | Vred #e60112 |
Bred #ea5532 |
DPred #b60105 |
Lred #f39c76 |
DLred #ba5536 |
VPred #feede3 |
DGred #5f0100 |
レッド |
| マゼンタ | Vmagenta #e5004f |
Bmagenta #e9536b |
DPmagenta #b5003c |
Lmagenta #f29c9f |
DLmagenta #ba5460 |
VPmagenta #fdedec |
DGmagenta #5f0017 |
マゼンタ |
| ピンク | Vpink #e4017f |
Bpink #e95098 |
DPpink #b50165 |
Lpink #f29fc3 |
DLpink #ba5584 |
VPpink #fdeff5 |
DGpink #600033 |
ピンク |
| パープル | Vpurple #920883 |
Bpurple #a54a98 |
DPpurple #740169 |
Lpurple #c490bf |
DLpurple #8c4b82 |
VPpurple #f3eaf4 |
DGpurple #3e0036 |
パープル |
| ネイビー | Vnavy #1c1e84 |
Bnavy #4c4398 |
DPnavy #14116e |
Lnavy #8f82bc |
DLnavy #4e4282 |
VPnavy #e8e6f3 |
DGnavy #08003a |
ネイビー |
| ブルー | Vblue #0068b7 |
Bblue #2b71b8 |
DPblue #005293 |
Lblue #87abda |
DLblue #3970a2 |
VPblue #e9eef9 |
DGblue #00274f |
ブルー |
| スカイ | Vsky #00a0e9 |
Bsky #00b0ec |
DPsky #0081ba |
Lsky #7ecff5 |
DLsky #1894be |
VPsky #eaf6fe |
DGsky #004462 |
スカイ |
| ターコイズ | Vturquoise #009e96 |
Bturquoise #00ada9 |
DPturquoise #007f78 |
Lturquoise #83ccc9 |
DLturquoise #1d928f |
VPturquoise #eaf5f4 |
DGturquoise #004340 |
ターコイズ |
| グリーン | Vgreen #009944 |
Bgreen #0ba95f |
DPgreen #007c36 |
Lgreen #88c997 |
DLgreen #218f59 |
VPgreen #ebf5eb |
DGgreen #004215 |
グリーン |
| ライム | Vlime #8ec31f |
Blime #a9cf52 |
DPlime #6f9b12 |
Llime #cce199 |
DLlime #8ea953 |
VPlime #f2f7e5 |
DGlime #395104 |
ライム |
| ヴィヴィッドトーン | ブライトトーン | ディープトーン | ライトトーン | ダルトーン | ベリーペール | ダークグレイッシュトーン |
←スクロールできます→
カラートーンごとの比較
トーンごとのカラー一覧も掲載しておきます。
ヴィヴィッドトーン
| 色 | 色名 | CSSクラス名 | RGBカラーコード |
| イエロー | Vyellow | #fff100 | |
| オレンジ | Vorange | #f49801 | |
| レッド | Vred | #e60112 | |
| マゼンタ | Vmagenta | #e5004f | |
| ピンク | Vpink | #e4017f | |
| パープル | Vpurple | #920883 | |
| ネイビー | Vnavy | #1c1e84 | |
| ブルー | Vblue | #0068b7 | |
| スカイ | Vsky | #00a0e9 | |
| ターコイズ | Vturquoise | #009e96 | |
| グリーン | Vgreen | #009944 | |
| ライム | Vlime | #8ec31f |
ブライトトーン
| 色 | 色名 | CSSクラス名 | RGBカラーコード |
| イエロー | Byellow | #fff338 | |
| オレンジ | Borange | #f6ad3a | |
| レッド | Bred | #ea5532 | |
| マゼンタ | Bmagenta | #e9536b | |
| ピンク | Bpink | #e95098 | |
| パープル | Bpurple | #a54a98 | |
| ネイビー | Bnavy | #4c4398 | |
| ブルー | Bblue | #2b71b8 | |
| スカイ | Bsky | #00b0ec | |
| ターコイズ | Bturquoise | #00ada9 | |
| グリーン | Bgreen | #0ba95f | |
| ライム | Blime | #a9cf52 |
ディープトーン
| 色 | 色名 | CSSクラス名 | RGBカラーコード |
| イエロー | DPyellow | #cbbd00 | |
| オレンジ | DPorange | #bf7601 | |
| レッド | DPred | #b60105 | |
| マゼンタ | DPmagenta | #b5003c | |
| ピンク | DPpink | #b50165 | |
| パープル | DPpurple | #740169 | |
| ネイビー | DPnavy | #14116e | |
| ブルー | DPblue | #005293 | |
| スカイ | DPsky | #0081ba | |
| ターコイズ | DPturquoise | #007f78 | |
| グリーン | DPgreen | #007c36 | |
| ライム | DPlime | #6f9b12 |
ライトトーン
| 色 | 色名 | CSSクラス名 | RGBカラーコード |
| イエロー | Lyellow | #fff89a | |
| オレンジ | Lorange | #fbce8a | |
| レッド | Lred | #f39c76 | |
| マゼンタ | Lmagenta | #f29c9f | |
| ピンク | Lpink | #f29fc3 | |
| パープル | Lpurple | #c490bf | |
| ネイビー | Lnavy | #8f82bc | |
| ブルー | Lblue | #87abda | |
| スカイ | Lsky | #7ecff5 | |
| ターコイズ | Lturquoise | #83ccc9 | |
| グリーン | Lgreen | #88c997 | |
| ライム | Llime | #cce199 |
ダルトーン
| 色 | 色名 | CSSクラス名 | RGBカラーコード |
| イエロー | DLyellow | #cac04e | |
| オレンジ | DLorange | #c39043 | |
| レッド | DLred | #ba5536 | |
| マゼンタ | DLmagenta | #ba5460 | |
| ピンク | DLpink | #ba5584 | |
| パープル | DLpurple | #8c4b82 | |
| ネイビー | DLnavy | #4e4282 | |
| ブルー | DLblue | #3970a2 | |
| スカイ | DLsky | #1894be | |
| ターコイズ | DLturquoise | #1d928f | |
| グリーン | DLgreen | #218f59 | |
| ライム | DLlime | #8ea953 |
ベリーペールトーン
| 色 | 色名 | CSSクラス名 | RGBカラーコード |
| イエロー | VPyellow | #fffded | |
| オレンジ | VPorange | #fef5e8 | |
| レッド | VPred | #feede3 | |
| マゼンタ | VPmagenta | #fdedec | |
| ピンク | VPpink | #fdeff5 | |
| パープル | VPpurple | #f3eaf4 | |
| ネイビー | VPnavy | #e8e6f3 | |
| ブルー | VPblue | #e9eef9 | |
| スカイ | VPsky | #eaf6fe | |
| ターコイズ | VPturquoise | #eaf5f4 | |
| グリーン | VPgreen | #ebf5eb | |
| ライム | VPlime | #f2f7e5 |
ダークグレイッシュトーン
| 色 | 色名 | CSSクラス名 | RGBカラーコード |
| イエロー | DGyellow | #675f00 | |
| オレンジ | DGorange | #633c00 | |
| レッド | DGred | #5f0100 | |
| マゼンタ | DGmagenta | #5f0017 | |
| ピンク | DGpink | #600033 | |
| パープル | DGpurple | #3e0036 | |
| ネイビー | DGnavy | #08003a | |
| ブルー | DGblue | #00274f | |
| スカイ | DGsky | #004462 | |
| ターコイズ | DGturquoise | #004340 | |
| グリーン | DGgreen | #004215 | |
| ライム | DGlime | #395104 |
モノトーン
| 色 | 色名 | CSSクラス名 | RGBカラーコード |
| イエロー | white | #ffffff | |
| オレンジ | VLgray | #d8d8d8 | |
| レッド | Lgray | #b2b2b2 | |
| マゼンタ | gray | #8c8c8c | |
| ピンク | Dgray | #656565 | |
| パープル | VDgray | #3f3f3f | |
| ネイビー | black | #191919 |
お役に立てますと幸いです。