カラーパレットの作り方
- どこからでも始める。「生成」（またはスペースキー）を押す、ブランドを説明してAIに3つのパレットを提案してもらう、写真から色を取り出す、ギャラリーから選ぶ、のどれでも構いません。
- 気に入った色を残す。色をロックしてもう一度生成すると、その色に合わせてほかの色が変わります。色をクリックすると変更、コードをクリックするとコピーできます。使えるのは3〜8色です。
- 配色とスタイルを選ぶ。類似色、補色、トライアドなどの配色と、パステル、ビビッド、くすみ、アース、ディープのスタイルから選べます。
- スライドで確認する。ツールがコントラストを考えて背景、文字色、アクセントを選び（自分で選ぶこともできます）、読みやすさを確認して、その色でカルーセルを表示します。
- 使う。HEXコード、CSS変数、Tailwind、JSONをコピーするか、パレットをPNGでダウンロードするか、この色でアプリを開きます。
配色の種類
| 配色 | 内容 | 印象 |
|---|---|---|
| 類似色 | 色相環で隣り合う色 | 穏やか、自然 |
| 補色 | 色相環で向かい合う色 | エネルギッシュ、高コントラスト |
| 分裂補色 | 1色と、その補色の両隣の2色 | 生き生きとしつつ、バランスを取りやすい |
| トライアド | 色相環を3等分する3色 | 遊び心があり、大胆 |
| テトラード | 色相環を4等分する4色 | 豊か。メインの色を1つ決める必要あり |
| モノクロマティック | 1つの色相の明るい色と暗い色 | すっきり、統一感がある |
4色以上のときは、同じ系統のとても明るい色ととても暗い色も加わるので、パレットには必ず背景色と文字色があります。
コントラスト：きちんと読めるか
- 背景の上の文字：最低4.5:1（WCAG AA）。スマホの小さな文字なら7:1がさらに安心です。
- 大きなタイトルとアイコン：最低3:1。
- ボタン：アクセント色の上の文字にも4.5:1が必要です。
パレットの下のチェックで、それぞれの比率がわかります。背景の上で十分に読める色がない場合、スライドの文字には黒に近い色か白を使い、ツールがお知らせします。
背景、文字、アクセント
それぞれの色に役割があると、パレットはブランドになります。よく使われるのは60-30-10の割合です。約60%が背景、30%が文字とサブカラー、10%が見てほしい言葉やボタンのためのアクセントです。スライドでは、どの色にどの役割を持たせるかを自分で選ぶか、コントラストを基準にツールに選ばせることができます。
無料でできることと、アプリで増えること
カラーパレットジェネレーターは無料で、アカウントも不要です。AIの提案には1日の上限があり、使った写真はあなたのデバイスから出ません。aiCarouselsは、あなたの色とフォントでカルーセル、画像投稿、動画を作ります。アイデアを書けば、どのスライドもブランドどおりに仕上がります。
