[Cocoon] サイトのキーカラーを変更した

濃いめのキーカラーの候補を出して、それに合う補助の色を組合せてみました。

1. サイトの配色を試行錯誤

元の配色です。

臙脂色を基調した配色。

焦げ茶色をメインにした配色。

それをさらに濃くした配色です。

2. 「ユーザー補助」

「ユーザー補助」の面で、十分なカラーコントラストになるように調整しました。

パッと見でも、文字が読みやすくなったと思います。

3. CSSでのカスタムカラー

追加CSSの中でサイトのキーカラーは 直接 値を指定するより、var(--wp--preset--color--key-color) を使うと変更がしやすくなります。

こちらもどうぞ。

[CSS] 印刷用のラベルボックスの枠線の色を渋めにした

ラベルボックスなどは、ディスプレイ上では薄い背景色で表示しています。しかし、そのまま印刷するとインクがにじみやすいので、枠線のみにしています。Cocoonのテーマ色をもとに、グレー、青、緑、黄、赤 に対応する、渋めの色リストを作りました。灰青緑黄赤鮮やか9494952BAAE23DB471FED900E60033薄い色F7F9F9F3FBFFEAF9F4FFF7CBFEF2F2濃い色CCDADAA3C6DAADD8CACDCC9AD8B0AC今までは、彩度の大きめの色だったの...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。