- CocoonのカラーパレットのデフォルトRGBがわからない
そんな疑問を解決します。
Cocoonには特有のカラーパレットがあり、色を直感的に設定することができます。
- RGBと16進数カラーコードとは
- CocoonのカラーパレットのデフォルトカラーRBG値
- カラーパレットへの新色追加方法
Cocoonの親テーマのCSSから引っ張り出してきました。
カラーパレットとは
カラーパレットとは文字装飾をする時に使う「色を絵選ぶ機能」です。
様々な色が指定されていて直感的に選ぶことができます。
RGBと16進数カラーコードとは
RGBとは
RGBとは「光の三原色」とも呼ばれる基本的な色「Red(赤)、Green(緑)、Blue(青)」の頭文字です。
その3色をどれだけ使うかによって様々な色が表現できます。
各色 0〜255 の数値で表現できます。
RGBの表し方はこんな感じです。
「rgb(255,0,0)」この場合だと赤です。
16進数カラーコードとは
RGBを16進数で表したコードです。
RGBよりもコンパクトに表現できます。
「#FF0000」＝「#F00」この場合も赤です。
CocoonのカラーパレットのデフォルトカラーRGB値
1番と番号なしについて
1番はサイトキーカラーです。
サイトのメインとなる色が入ります。
設定方法は後ほど。
番号のついていないカラーは拡張色です。
自分で好きな色を追加することができます。
こちらも後ほど解説します。
2〜25番について
2番 赤色
RGBは「rgb(230,0,51)」
16進数カラーコードは「#E60033」
3番 ピンク
RGBは「rgb(233,82,149)」
16進数カラーコードは「#E95295」
4番 紫色
RGBは「rgb(136,72,152)」
16進数カラーコードは「#884898」
5番 深紫色
RGBは「rgb(85,41,91)」
16進数カラーコードは「#55295B」
6番 紺色
RGBは「rgb(30,80,162)」
16進数カラーコードは「#1E50A2」
7番 青色
RGBは「rgb(0,149,217)」
16進数カラーコードは「#0095D9」
8番 天色
RGBは「rgb(44,169,225)」
16進数カラーコードは「#2CA9E1」
9番 浅葱色
RGBは「rgb(0,163,175)」
16進数カラーコードは「#00A3AF」
10番 深緑色
RGBは「rgb(0,123,67)」
16進数カラーコードは「#007B43」
11番 緑色
RGBは「rgb(62,179,112)」
16進数カラーコードは「#3EB370」
12番 黄緑色
RGBは「rgb(139,195,74)」
16進数カラーコードは「#8BC34A」
13番 ライム色
RGBは「rgb(195,216,37)」
16進数カラーコードは「#C3D825」
14番 黄色
RGBは「rgb(255,217,0)」
16進数カラーコードは「#FFD900」
15番 アンバー
RGBは「rgb(255,193,7)」
16進数カラーコードは「#FFC107」
16番 オレンジ
RGBは「rgb(243,152,0)」
16進数カラーコードは「#F39800」
17番 ディープオレンジ
RGBは「rgb(234,85,6)」
16進数カラーコードは「#EA5506」
18番 茶色
RGBは「rgb(149,78,42)」
16進数カラーコードは「#954E2A」
19番 灰色
RGBは「rgb(148,148,149)」
16進数カラーコードは「#949495」
20番 黒
RGBは「rgb(51,51,51)」
16進数カラーコードは「#333333」
21番 白
RGBは「rgb(255,255,255)」
16進数カラーコードは「#FFFFFF」
22番 淡い青
RGBは「rgb(243,250,254)」
16進数カラーコードは「#F3FAFE」
23番 淡い黄色
RGBは「rgb(255,247,204)」
16進数カラーコードは「#FFF7CC」
24番 淡い赤
RGBは「rgb(253,242,242)」
16進数カラーコードは「#FDF2F2」
25番 淡い緑
RGBは「rgb(235,248,244)」
16進数カラーコードは「#EBF8F4」
サイトキーカラーの設定方法
サイトキーカラーの設定は以下です。
WordPress管理画面から「Cocoon設定」→「全体」→「キーカラー」→「サイトキーカラー」
僕の場合は青を基調としているので「#0095D9」をキーカラーに設定しています。
カラーパレットへの追加方法
WordPress管理画面から「Cocoon設定」→「エディター」→「拡張カラーパレット色」
こちらで好みの色を追加します。デフォルトは白色です。
カラーパレットのデフォルトRGB値を紹介：まとめ
サイトの雰囲気を整えることはユーザーの見やすさに影響します。
ユーザーの見やすさは継続時間やリピート率にも繋がるので参考にしてみてください！
本ブログでは初心者ブログ応援のカテゴリーがあります。是非ご覧ください！
また、Cocoon専用のカスタマイズ講座もあります。こちらもご覧ください！
