Color Palette Generator
Generate color palettes
Generate color palettes ブラウザ内でローカルに実行
Complementary
#4ecdc4
#cd4e57
Analogous
#4ecd85
#4ecdc4
#4e96cd
Triadic
#4ecdc4
#c44ecd
#cdc44e
Split complementary
#4ecdc4
#cd4e96
#cd854e
Tetradic
#4ecdc4
#844ecd
#cd4e57
#97cd4e
Tints (towards white)
c3eeeb
88ddd7
4cccc3
2d9f97
1c635e
Shades (towards black)
278b84
1f6f6a
18544f
103835
081c1a
#4ecdc4 #cd4e57 #4ecd85 #4e96cd #c44ecd #cdc44e #cd4e96 #cd854e #844ecd #97cd4e #c3eeeb #88ddd7 #4cccc3 #2d9f97 #1c635e #278b84 #1f6f6a #18544f #103835 #081c1a
About the
カラー パレット ジェネレーターは、1 つの基本色を取得し、そこから標準的な調和スキーム (補色、類似色、三項、分割補色、四項、さらに白に向かう色合いと黒に向かう色合いのランプ) を導き出します。ハーモニーは、彩度と明度を維持しながら色相を回転させることによって HSL で計算されます。そのため、結果はドリフトするのではなくベースに関連したままになります。ランプは、ほとんどのパレットが実際に必要とする部分です。作業インターフェイスには、1 つのアクセント カラーだけでなく、ホバー、アクティブ、無効の状態に同じ色相の複数の値が必要だからです。
Where people use the
- 単一のブランドカラーを中心としたパレットを構築します。
- 1 つのアクセントからホバー、アクティブ、無効のバリアントを生成します。
- コントラスト チェックで不合格となった色の代替案を検討します。
- サーフェスと境界線のニュートラル ランプを生成します。
How to use the
- 1
ベースカラーを選択してください
4ECDC4 などの 16 進値を入力するか、ピッカーを使用します。他のすべてはこの 1 つの色から派生します。
- 2
ハーモニースキームを読む
各スキームは異なる色相回転です。補数は 180 度、トライアディックは 120 と 240 などです。
- 3
ティントとシェードのランプを使用する
白に向かう 5 つの色合いと黒に向かう 5 つの色合いによって、実際のインターフェイスに必要な状態と高度が得られます。
- 4
値をコピーする
生成された 16 進値の完全なリストは 1 つのブロック内にあり、すぐにスタイルシートまたはデザイン トークン ファイルに貼り付けることができます。
- 5
出荷前にコントラストを確認してください
パレットからコントラスト チェッカーを通してテキストと背景のペアを実行します。調和していることと読みやすいことは同じではありません。
ヒントとベストプラクティス
- ブランドからベースカラーを選択し、状態に応じて明度のみを調整します。
- 注目したい 1 つのアクションの補色を予約します。
- 出荷前に必ず最終的なペアリングをコントラスト チェックで実行してください。
よくある質問
それぞれの制度の違いは何ですか?
補色では反対の色相を使用するため、最も強いコントラストが得られ、行動を促すのに適しています。アナログでは、静かで安全な両側に 30 度の隣を使用します。 Triadic は 3 つの色相を均等に広げますが、鮮やかで制御が難しくなります。スプリットコンプリメンタリーは、反対側の 2 つの色相を使用することで、相補的な衝突を和らげます。 Tetradic は 4 つの色相を直角に使用し、複雑なダッシュボードに適しています。
生成された色が同じ彩度と明度を共有するのはなぜですか?
色相のみを回転させることで、それらの関連性が認識できるように保たれるからです。同時に明度を変えると、無関係に見える色が生成され、パレットの意味が失われます。
ティントとは白を混ぜた色だけですか？
実質的にはそうですが、色相と彩度を維持しながら明度を上げることによって HSL で計算されます。これにより色相が安定しますが、RGB を単純に混合すると灰色に向かって変化します。
パレットには何色が必要ですか?
ほとんどのインターフェイスでは、2 つまたは 3 つの色相とニュートラル ランプで十分です。 5 つの飽和した色相を含むスキームは一貫して使用するのが難しく、通常は偶然のように見えてしまいます。
アクセシビリティをチェックしますか?
いいえ、色を生成するだけです。テキストに使用する予定の組み合わせに対してコントラスト チェッカーを使用します。