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

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

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

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

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

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

色の取得と比較ができます


#RRGGBB

#RRGGBB

#RRGGBB

ザ・トールのパーツの色

あまり説明はいりませんね。サイトを作成するときに欠かせない「ザ・トールのオリジナル色」の一覧です。下の表は、ザ・トールの色のみ91色を表示しています。
クロムやエッジでは、表の右下の角をドラッグすると表の大きさを自由に変更できますので、見やすい大きさにしてご覧ください。(スマートフォンでは対応していないようなのでスクロールしてご覧になってください)
ザ・トールの色見本
イエロー オレンジ レッド マゼンタ ピンク パープル ネイビー ブルー スカイ ターコイズ グリーン ライム
ヴィ
ヴィット
(V)
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
ブライト
(B)
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
ディープ
(DP)
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
ライト
(L)
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
ダル
(DL)
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
ベリー
ペール
(VP)
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
ダーク
グレイ
(DG)
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
CSS色見本のアイキャッチ画像 CSSの色とザ・トールの色の互換表のアイキャッチ画像
CSS140色】 ・ 【全231色
thethorのイメージアイコン

こちらもどうぞ
見出しデザイン全リストのアイキャッチ画像

 

関連記事

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

bgc-○○はザ・トールのクラス名

色の指定の仕方

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

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

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

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

カラーパレットの色

カラーパレット

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

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

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

#000000
R000
G000
B000
#ffffff
R255
G255
B255
#dd3333
R221
G051
B051
#dd9933
R221
G153
B051
#eeee22
R238
G238
B034
#81d742
R129
G215
B066
#1e73bc
R030
G115
B190
#8224e3
R130
G036
B227

まとめ

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

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

 

関連するクラス名(THE THOR)

オリジナル色の指定に関係するクラス名です。

ftc-thorカラー名称bgc-thorカラー名称brc-thorカラー名称ep-labeles-radius

>フッターCTA見出し

フッターCTA見出し

フッターCTAの本文を入力

CTR IMG