WordPressテーマの配色と初音ミクカラーパレットの関係

2014年03月30日 18時00分月齢:29.2[月隠] 潮汐:大潮
(最終更新日:2019年09月02日)
11年前に投稿 | WordPress | コメントはありません

2週間くらい前に変更したWordPress自作テーマ。今回のテーマに使った配色をカラーパレットにしてみました。

左から順に、

#333333 (51,51,51)
#666666 (102,102,102)
#F8F8F8 (248,248,248)
#FFFF99 (255,255,153)
#99CCCC (153,204,204)
#00CCCC (0,204,204)
#FF0099 (255,0,153)

です。

この他にも、bodyの基本背景色として#FFFFFFなどいろいろと設定はしているのですが、7色に限定するなら上記のコードになるかな、って思います。

さて、この色設定に関して参考にしたのが、初音ミクのカラーパレット。

左から順に、

#373B3E (55,59,62)
#BEC8D1 (190,200,209)
#FFFEEC (255,254,236)
#C3E5E7 (195,229,231)
#86CECB (134,206,203)
#137A7F (19,122,127)
#E12885 (225,40,233)

となっています。

もちろんこの色は、実際に使われている画像から抽出されたものなので間違っているわけではないのですが、このまま使ってしまうと全体的にちょっと緑がキツい感じ。なので薄い黄色(#FFFF99)を入れてみました。

初音ミクってよく「緑髪」なんて言われますが、緑色か水色かどっちだ? ということで意見が分かれるみたい。でも、いわゆる緑ということは考えられなくて、個人的には水色に近い気がします。波長で表現するなら500nmくらいかな。本当に緑色と青色の中間。

実際に分析してみると、R:G:Bが1:2:2くらいで、ウェブセーフカラーで最も近いのは#66CCCC (102,204,204)あたりのようです。実際にはグラデーションがかかっていたり、使われる面積によって感じ方が変わったりして、何色かわからないですケド。

●←#66CCCCってこんな色。

しかし、テーマにはあえて#66CCCCを使わず、広い面積(ヘッダー等)には#99CCCC、狭い面積(A要素の文字)には#00CCCCにして、周囲の色とのバランスを取りました。ヘッダーに#66CCCCだと、彩度が高くて。