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 |
お役に立てますと幸いです。