WordPress®（ワードプレス） の公式サイトである WordPress.org の Logos and Graphicsexit_to_app （ロゴとグラフィック）ページには、WordPress の公式カラーが3色、色コード付で定義されています。WordPress に関連したクリエイティブの制作に活用できるでしょう。

Blue
Hex
#21759b
RGB
33, 117, 155
CMYK
97, 44, 26, 3
Pantone
7468
Orange
Hex
#d54e21
RGB
213, 78, 33
CMYK
6, 86, 100, 1
Pantone
1665
Grey
Hex
#464646
RGB
70, 70, 70
CMYK
65, 60, 60, 45
Pantone
Black 7

また、WordPress.com（Automattic（オートマティック） 社が運営する WordPress を使った SaaS 型のブログサービス。両者の違いについては 高野直子女史のブログexit_to_app をご参照ください）の Colors（カラーズ）exit_to_app ページには、WordPress.com のテーマカラーが18色、こちらも色コード付で定義されています。WordPress.com についてブログなどで言及する際に、これらの色を採用すれば、テーマとコンテンツの親和性がより高まることでしょう。

WordPress.com Blue
Hex
#0087be
RGB
0, 135, 190
Sass
$blue-wordpress
Android
blue_wordpress
iOS
wordPressBlue
Print
PMS 7461 Coated
PMS 2995 Uncoated
Light Blue
Hex
#78dcfa
RGB
120, 220, 250
Sass
$blue-light
Android
blue_light
iOS
lightBlue
Print
PMS 2975 Coated
PMS 2975 Uncoated
Medium Blue
Hex
#00aadc
RGB
0, 170, 220
Sass
$blue-medium
Android
blue_medium
iOS
mediumBlue
Print
PMS 2995 Coated
PMS 306 Uncoated
Dark Blue
Hex
#005082
RGB
0, 80, 130
Sass
$blue-dark
Android
blue_dark
iOS
darkBlue
Print
PMS 7462 Coated
PMS 2945 Uncoated
Gray
Hex
#87a6bc
RGB
135, 166, 18
Sass
$gray
Android
grey
iOS
grey
Print
PMS 542 Coated
PMS 543 Uncoated
Gray Light
Hex
#f3f6f8
RGB
243, 246, 24
Sass
$gray-light
Android
grey_light
iOS
lightGrey
Gray Lighten 30
Hex
#e9eff3
RGB
233, 239, 243
Sass
lighten( $gray, 30% )
Android
grey_lighten_30
iOS
greyLighten30
Gray Lighten 20
Hex
#c8d7e1
RGB
200, 215, 225
Sass
lighten($gray, 20%)
Android
grey_lighten_20
iOS
greyLighten20
Gray Lighten 10
Hex
#a8bece
RGB
168, 190, 206
Sass
lighten($gray, 10%)
Android
grey_lighten_10
iOS
greyLighten10
Gray Darken 10
Hex
#668eaa
RGB
102, 142, 170
Sass
darken($gray, 10%)
Android
grey_darken_10
iOS
greyDarken10
Gray Darken 20
Hex
#4f748e
RGB
79, 116, 142
Sass
darken($gray, 20%)
Android
grey_darken_20
iOS
greyDarken20
Gray Darken 30
Hex
#3d596d
RGB
61, 89, 109
Sass
darken($gray, 30%)
Android
grey_darken_30
iOS
greyDarken30
Gray Dark
Hex
#2e4453
RGB
46, 68, 83
Sass
$gray-dark
Android
grey_dark
iOS
darkGrey
Fire Orange
Hex
#d54e21
RGB
213, 78, 33
Sass
$orange-fire
Android
orange_fire
iOS
fireOrange
Print
PMS 1665 Coated
PMS 1665 Uncoated
Jazzy Orange
Hex
#f0821e
RGB
240, 130, 30
Sass
$orange-jazzy
Android
orange_jazzy
iOS
jazzyOrange
Print
PMS 715 Coated
PMS 130 Uncoated
Valid Green
Hex
#4ab866
RGB
74, 184, 102
Sass
$alert-green
Android
alert_green
iOS
validGreen
Warning Yellow
Hex
#f0b849
RGB
240, 184, 73
Sass
$alert-yellow
Android
alert_yellow
iOS
warningYellow
Error Red
Hex
#d94f4f
RGB
217, 79, 79
Sass
$alert-red
Android
alert_red
iOS
errorRed

ちなみに Light Blue（ライトブルー）, Medium Blue（ミディアムブルー）,　Dark Blue（ダークブルー） の各色は Secondary Blues（セカンダリーブルーズ） と呼ばれており、メインのブルーがなじまないコンポーネントの着色に薦められています。

また、オレンジは各種インタラクションの反応色として、グリーンやイエロー、レッドはバリデーションやアラートに用いられる色として想定されているようです。

※グレーのスペルが WordPress では grey（主に英国で用いられる）、 WordPress.com では gray（主に米国で用いられる）となっているのも面白いですね！

最後に、WordPress.com では WCAG 2.0（ちなみに WCAG の読み方は最初の “W” をほとんど発音しないで「ィカグ」が近いみたいです。WCAG 2.0 で「ィカグ・トゥーポイントゼロ」、みたいな感じですね。 How To Pronounce WCAG 2.0 exit_to_app） に最低限準拠するようにテキストのコントラストに関する記載がありました。 WordPress.com について当該スペックに基づいて何かを実装する機会はないでしょうが、興味がある方は Colors（カラーズ）exit_to_app ページをご参照ください。

コメント

※本記事へのご指摘や各種コメントは にお寄せください。その際、ツイートに #ID2876 を含めるか、本記事へのリンクを含めるようお願いいたします（この上の「共有」欄にある TWITTER ボタン」をご利用いただくと自動で入力されます）。