カラー パレット ジェネレーター

カラー パレット ジェネレーターは、カラー ホイール ハーモニー ルールを使用して、単一のベース カラーを調整された色のセットに変換します。開始色を選択し、モード (色合いと色合い、単色、相補的、類似、三進的、または四進的) を選択すると、ツールは各スウォッチの HEX コードを使用してバランスの取れたパレットを計算します。

適切な色の組み合わせは、HSL カラー ホイールで予測可能な関係に従います。補色は互いに反対に座り、類似の色は互いに隣り合い、トライアド カラーは等間隔に配置されます。 手作業でこれらを処理するということは、色相の角度と明るさの値を調整することを意味します。 このツールは、すぐに計算を行い、結果を表示するので、機能するスキームを選択できます。

すべてがクライアント側で実行されます。ベースカラーを調整し、モードを切り替え、任意のスウォッチをクリックして HEX コードをコピーするか、CSS をコピーしてパレット全体を CSS カスタム プロパティとしてエクスポートします。アカウントもアップロードもせず、ページがロードされるとオフラインで動作し続けます。

動作例がウェディングカラーパレットジェネレーターとしてどのように機能するかを示しています。 1つの条件:ウェディングプリセットがないので、色を持ってきます。 sage green, #9caf88, as the Base color and pick Complementary. 4つの見本には #c2ceb6, #9caf88, a dusty lavender #9b88af and a deeper #755e8dがあり、Copy CSSはそれらを--color-100 to -color-400として返します。 pastelカラーパレットジェネレーターの結果については、 #a7c7e7: Analogous, Triadic and Tetradicなどの淡いベースから開始します。 :その軽さと彩度を維持するため、すべての見本は柔らかいままです。

ハーモニーモードは、色と車輪の関係から来て、円の周りに固定量によって色相を回転させる: 180 度相補的な、120 三進的な、類似のための小さなステップ その数学は、便利で、知覚的に均一ではないHSLで行われます.HSLの明度は、同じ値で黄色と青を処理し、目にはそうではない、それが三進集合が紙の上にバランスが取れ、画面上にアンバランスのように見える理由である 数字を信頼するのではなく、コントラストチェッカーに対してテキストに使用することを計画している任意のパレットをチェックする 色相と彩度を保持しながら、光度を移動することによって、色合いと色合いが生成され、それが認識可能な関連性を保ち、CSS変数のセットとして有用である理由である。