ザ・トールのオリジナル色見本全91色とカラーパレットの色見本［WordPress］［the-thor］

ワードプレスのテーマTHETHORには、たくさんの機能が備わつています。「色の指定」もそのうちのひとつです。

ザ・トールでは、色に名前を付けて様々なパーツに指定できるような工夫がされていて、名前の付けられている色は全部で91色あります。ただ、用意されている配色が多いので『どれを選べばよいのか悩んでしまう～』という嬉しい悲鳴が聞こえてきそうなのも事実です。

そこで、色の指定を簡単に、楽におこなうことができるように、ザ・トールの色の見本の一覧を作成しました。色の名前やRGBコードも掲載してあります。「1色ずつの色見本」ではありません。一目ですべての色が見渡せる(?)見本になっています。

また、サイト作成時にあったら便利だなと思っていたカラーピッカーも併せて表示させていますので、色のコードを調べることも可能になっています。カラーピッカーは3つ並んでいますので、それぞれのカラーピッカーに少しだけ色を変えたものを表示させて、比較してから色を決めるという使い方も可能です。

前置きが長くなってしまいました。ザ・トールのオリジナルの色見本はカラーピッカーの下から始まります。

ザ・トールのパーツの色

ザ・トールの色見本

	イエロー	オレンジ	レッド	マゼンタ	ピンク	パープル	ネイビー	ブルー	スカイ	ターコイズ	グリーン	ライム
ヴィ ヴィット (Ｖ)	Vyellow #fff100 R:255 G:241 B:000	Vorange #f49801 R:244 G:152 B:001	Vred #e60112 R:230 G:001 B:018	Vmagenta #e5004f R:229 G:000 B:079	Vpink #e4017f R:228 G:001 B:127	Vpurple #920883 R:146 G:008 B:131	Vnavy #1c1e84 R:028 G:030 B:132	Vblue #0068b7 R:000 G:104 B:183	Vsky #00a0e9 R:000 G:160 B:233	Vturquoise #009e96 R:000 G:158 B:150	Vgreen #009944 R:000 G:153 B:068	Vlime #8ec31f R:142 G:195 B:031
ブライト (Ｂ)	Byellow #fff338 R:255 G:243 B:056	Borange #f6ad3a R:246 G:173 B:058	Bred #ea5532 R:234 G:085 B:050	Bmagenta #e9536b R:233 G:083 B:107	Bpink #e95098 R:233 G:080 B:152	Bpurple #a54a98 R:165 G:074 B:152	Bnavy #4c4398 R:076 G:067 B:152	Bblue <#2b71b8 R:043 G:113 B:184	Bsky #00b0ec R:000 G:176 B:236	Bturquoise #00ada9 R:000 G:173 B:169	Bgreen #0ba95f R:011 G:169 B:095	Blime #a9cf52 R:169 G:207 B:082
ディープ (ＤＰ)	DPyellow #cbbd00 R:203 G:189 B:000	DPorange #bf7601 R:191 G:118 B:001	DPred #b60105 R:182 G:001 B:005	DPmagenta #b5003c R:181 G:000 B:060	DPpink #b50165 R:181 G:001 B:101	DPpurple #740169 R:116 G:001 B:105	DPnavy #14116e R:020 G:017 B:110	DPblue #005293 R:000 G:082 B:147	DPsky #0081ba R:000 G:129 B:186	DPturquoise #007f78 R:000 G:127 B:120	DPgreen #007c36 R:000 G:124 B:054	DPlime #6f9b12 R:111 G:155 B:018
ライト (Ｌ)	Lyellow #fff89a R:255 G:248 B:154	Lorange #fbce8a R:251 G:206 B:138	Lred #f39c76 R:243 G:156 B:118	Lmagenta #f29c9f R:242 G:156 B:159	Lpink #f29fc3 R:242 G:159 B:195	Lpurple #c490bf R:196 G:144 B:191	Lnavy #8f82bc R:143 G:130 B:188	Lblue #87abda R:135 G:171 B:218	Lsky #7ecff5 R:126 G:207 B:245	Lturquoise #83ccc9 R:131 G:204 B:201	Lgreen #88c997 R:136 G:201 B:151	Llime #cce199 R:204 G:225 B:153
ダル (ＤＬ)	DLyellow #cac04e R:202 G:192 B:078	DLorange #c39043 R:195 G:144 B:067	DLred #ba5536 R:186 G:085 B:054	DLmagenta #ba5460 R:186 G:084 B:096	DLpink #ba5584 R:186 G:085 B:132	DLpurple #8c4b82 R:140 G:075 B:130	DLnavy #4e4282 R:078 G:066 B:130	DLblue #3970a2 R:057 G:112 B:162	DLsky #1894be R:024 G:148 B:190	DLturquoise #1d928f R:029 G:146 B:143	DLgreen #218f59 R:033 G:143 B:089	DLlime #8ea953 R:142 G:169 B:083
ベリー ペール (ＶＰ)	VPyellow #fffded R:255 G:253 B:237	VPorange #fef5e8 R:254 G:245 B:232	VPred #feede3 R:254 G:237 B:227	VPmagenta #fdedec R:253 G:237 B:236	VPpink #fdeff5 R:253 G:239 B:245	VPpurple #f3eaf4 R:243 G:234 B:244	VPnavy #e8e6f3 R:232 G:230 B:243	VPblue #e9eef9 R:233 G:238 B:249	VPsky #eaf6fe R:234 G:246 B:254	VPturquoise #eaf5f4 R:234 G:245 B:244	VPgreen #ebf5eb R:235 G:245 B:235	VPlime #f2f7e5 R:242 G:247 B:229
ダーク グレイ (ＤＧ)	DGyellow #675f00 R:103 G:095 B:000	DGorange #633c00 R:099 G:060 B:000	DGred #5f0100 R:095 G:001 B:000	DGmagenta #5f0017 R:095 G:000 B:023	DGpink #600033 R:096 G:000 B:051	DGpurple #3e0036 R:062 G:000 B:054	DGnavy #08003a R:008 G:000 B:058	DGblue #00274f R:000 G:039 B:079	DGsky #004462 R:000 G:068 B:098	DGturquoise #004340 R:000 G:067 B:064	DGgreen #004215 R:000 G:066 B:021	DGlime #395104 R:057 G:081 B:004
モノ	white #ffffff R:255 G:255 B:255	VLgray #d8d8d8 R:216 G:216 B:216	Lgray #b2b2b2 R:178 G:178 B:178	gray #8c8c8c R:140 G:140 B:140	Dgray #656565 R:101 G:101 B:101	VDgray #3f3f3f R:063 G:063 B:063	black #191919 R:025 G:025 B:025	【CSS140色】　・　【全231色】

こちらもどうぞ

関連記事

「bgc-○○」は背景色の指定［THE THOR クラス名］

ワードプレスのテーマTHE THOR（ザ・トール）には、多くの機能が備わっています。 例えばビジュアルエディタを使用して記事を作成する場合、ワープロソフトのように直感的にパーツを挿入したり、スタイルを指定したりすることができますが、あ[…]

色の指定の仕方

ザ・トールのオリジナルカラーの指定方法は大きく分けて2つあります。

1. ビジュアル画面（ビジュアルエディタ）の［スタイル］ボタンから［カラーセット］を選び、［文字色］か［ボーダー色］か［背景色］から色を選択してクリックする方法
2. テキストエディタで直接記述する方法

指定するパーツによって指定方法が異なるので、各詳細ページで確認しながら指定するとスムーズにいくと思います。

ザ・トールのオリジナルカラーの指定ではなく、カラーパレットで色を指定するものもありますが、オリジナルカラーで気に入った色がある場合は、上の表の#RRGGBBをコピーペーストすると同じ色を指定することができます。下の説明を参考にしてください。

カラーパレットの色

前述のように、THETHORを使用していてもオリジナルカラーで指定せずに、カラーパレットを使って、細かな色合いを指定するパーツもあります。

もし、オリジナルカラーで使いたい色がある場合は、上の画像の赤丸の部分に直接RGBコードを入力すると同じ色を指定したことになるので、知っていると便利です。

また、使用頻度は少ないかもしれませんが、カラーパレットの色と同じ色を指定したい場合もあると思うので、パレットのデフォルトのRGBコードも掲載しておきますね。

まとめ

THETHORのオリジナルカラーは、色を見ながら指定ができません。色見本があるとイメージしながら配色ができるので便利です。

さらに、カラーピッカーで色を並べることができるので、色の比較や配色のバランスなどを知る手掛かりにもなります。