カラーパレット
https://peaceful-choux-2f1d36.netlify.app/swell-color-palette-final.html
上記のurlからサイトに移動してください。
このツールは、基準色を1つ選ぶだけで、ブログ・LP・PowerPoint資料に使いやすい配色を自動生成できるカラーパレット作成ツールです。色カードをクリックすると、HEXカラーコードをコピーできます。
1. 基準カラーを選ぶ
最初に、使いたいイメージに近い基準カラーを選びます。
ブランドカラー、好きな色、資料で使いたいメインカラーなどを選んでください。
2. 配色タイプを選ぶ
目的に合わせて、配色タイプを選びます。
おすすめ自動は迷った時に便利です。
同系色はまとまりのあるデザインに向いています。
補色は目立たせたい時におすすめです。
パステルはやさしい印象、ポップは明るく元気な印象、和風・落ち着きは上品な印象を作りやすくなります。
3. 雰囲気を選ぶ
作りたいデザインの印象に合わせて、雰囲気を選びます。
ビジネス資料向け、やわらかい女性向け、高級感、SNS向け、ナチュラル系など、用途に合わせて調整できます。
4. 色数を選ぶ
作成したい色数を選びます。
まずは5色がおすすめです。
メインカラー、サブカラー、背景色、アクセントカラー、文字色のように使い分けやすくなります。
5. パレットを作成する
設定ができたら、「パレットを作成」をクリックします。
自動でカラーパレットが生成されます。
迷った時は、「ランダム生成」を使うと、新しい配色案を試すことができます。
6. 色をコピーする
生成された色カードをクリックすると、カラーコードをコピーできます。
コピーした色は、PowerPoint、Canva、WordPress、SWELL、CSSなどで使用できます。
7. 使用イメージを確認する
生成した配色は、下の使用イメージで確認できます。
背景色、文字色、ボタン色、アクセントカラーの見え方を確認しながら、実際のブログ・LP・資料に使った時の雰囲気をチェックできます。
8. 読みやすさを確認する
文字の読みやすさチェックでは、背景色と文字色の組み合わせを確認できます。
文字が見づらい場合は、背景色を薄くする、文字色を濃くするなど調整してください。
9. CSSとしてコピーする
「CSSをコピー」をクリックすると、作成した配色をCSS変数の形式でコピーできます。
SWELLの追加CSSや、LP制作、HTMLデザインに活用できます。
10. お気に入り保存
気に入った配色は、「お気に入り保存」で保存できます。
保存したパレットは、このブラウザ内に保存されます。
おすすめの使い方
PowerPoint資料では、
メインカラー1色＋背景色1色＋アクセントカラー1色を決めると、統一感のあるスライドになります。
ブログやLPでは、
背景は薄め、文字は濃い色、ボタンは目立つ色にすると見やすくなります。
迷った場合は、まずおすすめ自動・色数5色・ビジネス資料向けで作成するのがおすすめです。
コメント