WordPress® の公式サイトである WordPress.org の (ロゴとグラフィック)ページには、WordPress の公式カラーが3色、色コード付で定義されています。WordPress に関連したクリエイティブの制作に活用できるでしょう。
- Hex
- #21759b
- RGB
- 33, 117, 155
- CMYK
- 97, 44, 26, 3
- Pantone
- 7468
- Hex
- #d54e21
- RGB
- 213, 78, 33
- CMYK
- 6, 86, 100, 1
- Pantone
- 1665
- Hex
- #464646
- RGB
- 70, 70, 70
- CMYK
- 65, 60, 60, 45
- Pantone
- Black 7
また、WordPress.com(Automattic 社が運営する WordPress を使った SaaS 型のブログサービス。両者の違いについては をご参照ください)の ページには、WordPress.com のテーマカラーが18色、こちらも色コード付で定義されています。WordPress.com についてブログなどで言及する際に、これらの色を採用すれば、テーマとコンテンツの親和性がより高まることでしょう。
- Hex
- #0087be
- RGB
- 0, 135, 190
- Sass
- $blue-wordpress
- Android
- blue_wordpress
- iOS
- wordPressBlue
- PMS 7461 Coated
- PMS 2995 Uncoated
- Hex
- #78dcfa
- RGB
- 120, 220, 250
- Sass
- $blue-light
- Android
- blue_light
- iOS
- lightBlue
- PMS 2975 Coated
- PMS 2975 Uncoated
- Hex
- #00aadc
- RGB
- 0, 170, 220
- Sass
- $blue-medium
- Android
- blue_medium
- iOS
- mediumBlue
- PMS 2995 Coated
- PMS 306 Uncoated
- Hex
- #005082
- RGB
- 0, 80, 130
- Sass
- $blue-dark
- Android
- blue_dark
- iOS
- darkBlue
- PMS 7462 Coated
- PMS 2945 Uncoated
- Hex
- #87a6bc
- RGB
- 135, 166, 18
- Sass
- $gray
- Android
- grey
- iOS
- grey
- PMS 542 Coated
- PMS 543 Uncoated
- Hex
- #f3f6f8
- RGB
- 243, 246, 24
- Sass
- $gray-light
- Android
- grey_light
- iOS
- lightGrey
- Hex
- #e9eff3
- RGB
- 233, 239, 243
- Sass
- lighten( $gray, 30% )
- Android
- grey_lighten_30
- iOS
- greyLighten30
- Hex
- #c8d7e1
- RGB
- 200, 215, 225
- Sass
- lighten($gray, 20%)
- Android
- grey_lighten_20
- iOS
- greyLighten20
- Hex
- #a8bece
- RGB
- 168, 190, 206
- Sass
- lighten($gray, 10%)
- Android
- grey_lighten_10
- iOS
- greyLighten10
- Hex
- #668eaa
- RGB
- 102, 142, 170
- Sass
- darken($gray, 10%)
- Android
- grey_darken_10
- iOS
- greyDarken10
- Hex
- #4f748e
- RGB
- 79, 116, 142
- Sass
- darken($gray, 20%)
- Android
- grey_darken_20
- iOS
- greyDarken20
- Hex
- #3d596d
- RGB
- 61, 89, 109
- Sass
- darken($gray, 30%)
- Android
- grey_darken_30
- iOS
- greyDarken30
- Hex
- #2e4453
- RGB
- 46, 68, 83
- Sass
- $gray-dark
- Android
- grey_dark
- iOS
- darkGrey
- Hex
- #d54e21
- RGB
- 213, 78, 33
- Sass
- $orange-fire
- Android
- orange_fire
- iOS
- fireOrange
- PMS 1665 Coated
- PMS 1665 Uncoated
- Hex
- #f0821e
- RGB
- 240, 130, 30
- Sass
- $orange-jazzy
- Android
- orange_jazzy
- iOS
- jazzyOrange
- PMS 715 Coated
- PMS 130 Uncoated
- Hex
- #4ab866
- RGB
- 74, 184, 102
- Sass
- $alert-green
- Android
- alert_green
- iOS
- validGreen
- Hex
- #f0b849
- RGB
- 240, 184, 73
- Sass
- $alert-yellow
- Android
- alert_yellow
- iOS
- warningYellow
- 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 で「ィカグ・トゥーポイントゼロ」、みたいな感じですね。 ) に最低限準拠するようにテキストのコントラストに関する記載がありました。 WordPress.com について当該スペックに基づいて何かを実装する機会はないでしょうが、興味がある方は ページをご参照ください。
コメント
※本記事へのご指摘や各種コメントは #ID2876 を含めるか、本記事へのリンクを含めるようお願いいたします(この上の「共有」欄にある TWITTER ボタン」をご利用いただくと自動で入力されます)。
にお寄せください。その際、ツイートに