より少ない色の錬金術：配色とパレットの作成

色は、視覚デザインの最も重要な要素の1つです。適切に使用すると、Webサイトやアプリケーションに大きな影響を与える可能性があります。しかし、色理論を知るだけでは、そのような影響を与えるのに十分ではありません。多数の色で簡単かつ正常に動作するには、適切なツールベルトが必要です。幸いなことに、作業するためにたくさんの色関数を提供することにより、この実用的な問題を解決することは少なくなります。 このチュートリアルでは、これらの色関数のいくつかを他の少ない機能と組み合わせて使用​​する方法を調べて、色の操作のための柔軟で再利用可能なミキシンを生成します。

キーテイクアウト

少ないことは、Webデザインのインパクトのある配色とパレットを作成するために使用できる多数の色関数を提供します。これらの機能は、他の少ない機能と組み合わせて使用​​して、カラー操作のための柔軟で再利用可能なミキシンを生成できます。

>より少ないカラースキームの作成には、ベースカラーを定義し、スピン（）関数を使用して色バリアントを作成します。これらのバリアントはリストに入れて、必要に応じて抽出することができ、さまざまな種類の配色を作成できます。

ループと条件付きステートメントを使用して、さまざまな種類のカラーパレットを生成するために使用できます。 Spin（）関数を使用してフルカラースペクトルを作成できますが、Lighten（）およびDarken（）関数を使用して、特定の色の色合いと色合いを作成できます。
• 色の錬金術の使用量を使用すると、一貫した調和のとれた配色の作成、基本色を単純に変更することで配色の調整の容易さ、スケーラブルで再利用可能なカラースキームを作成する能力など、いくつかの利点があります。 >
• カラースキームの作成
• より少ないで配色を作成しようとすると、ほとんどの人が最も明白なアプローチをとっています。これは次のようになります。
• このメソッドは、変数とLessのSpin（）関数を使用して、配色（この場合はTriadic）を作成します。これは正常に機能しますが、私にとっては特に再利用できず、柔軟性がありません。幸いなことに、ミックスインを使用して問題を解決できます。私が何を意味するのか見てみましょう。

上記のコードは、3種類の配色を作成します。最初の2つは同じ構造を持っていて、個々の説明は必要ないので、最後の1つだけを説明します。

.Quad（）Mixinは3つのパラメーターを取ります。最初のものは、スキームの基本色を設定します。 2番目は、どの色のバリアントを返すかをMixinに伝えます。 3つ目は、コードのコンパイルが少ないときに使用するCSSプロパティを定義します。 Mixinの本体の内部では、Spin（）関数はクアッドスキームで3つの使用可能な色バリアントを作成し、これらのバリアントがリストに入れられます。抽出（）関数は、2番目のパラメーターで定義された目的のバリアントを取得します。そして最後に、可変補間の助けを借りて、カラーバリアントは定義されたCSSプロパティに割り当てられます。

ここでは、配色でファイルをインポートし、ウェブサイトまたはアプリケーションのベースカラーを定義します。 Divルールセットの最後の3行で、境界線、色、および背景色のプロパティの色を定義します。

@<span>base-color: #00ff00;
</span>@<span>triad-secondary: spin(@base-color, 120);
</span>@<span>triad-tertiary: spin(@base-color, -120);</span>

ご覧のとおり、ミキシンは、期待値が色であるプロパティで使用できます。また、特定のステートメントがどのプロパティを使用しているかを見るのは非常に簡単です。最後を見て、ブーム、私たちはそれを知っています。たとえば、最後のステートメントでは、Quadスキームの最初のカラーバリアントがバックグラウンドカラープロパティの値として使用されることを明確に確認できます。かなりクールです、huh？

そして、ここにコンパイルされた出力があります：

CodepenのSitePoint（@SitePoint）のペンXWXMEPを参照してください。

カラーパレットの生成

.<span>analog(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 30);
</span>  @<span>second: spin(@color, -30);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>triad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 120);
</span>  @<span>second: spin(@color, -120);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>quad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 90);
</span>  @<span>second: spin(@color, -90);
</span>  @<span>third: spin(@color, 180);
</span>  @<span>list: @first, @second, @third;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}</span>

このセクションでは、さまざまな種類のカラーパレットを作成する方法を紹介します。その目的のために、私はそれほど固有のループと条件付きステートメント（Mixin Guards）を使用します。これらのコンストラクトに慣れていない場合は、これらのトピックに関する以前の記事を簡単に見ることができます。

最初の例では、カラーテーブルを生成するミックスインを作成します。カラーピッカーを使用しましたよね？だから、あなたは私が何を意味するのか知っています。

.color-palette（）mixinは3つの実際の引数を取ります。最初のものは、パレットのベース色を定義します。 2つ目は、生成するスウォッチ数を定義します。 3つ目は、Spin（）関数に必要なスピンステップを設定します。

実際には、もう1つの議論があります：@index。ただし、ループを機能させるためには内部でのみ使用されます。上記のコードで設定されているため、ループはコードを25回繰り返し、25のCSSクラスを作成します。各クラス名は.swatch- [number]パターン（たとえば、.swatch-1）に続いて構築されます。

各スウォッチの色は、スピンステップの現在のインデックスの乗算から導出された値を使用して生成されます。その値は、ループの反復ごとにベースカラーの値に追加されます。これにより、フルカラースペクトルが生成され、同じ色で始まり、終わります（私たちの場合は赤）。

ここにコンパイルされた出力があります：

@<span>base-color: #00ff00;
</span>@<span>triad-secondary: spin(@base-color, 120);
</span>@<span>triad-tertiary: spin(@base-color, -120);</span>

CodepenでSitePoint（@SitePoint）で少ないカラーパレットを生成するペンを参照してください。

このミックスインを使用して、あらゆる種類のカラーテーブルを作成できます。任意の数のスウォッチと、より大きなスピンステップで。たとえば、90度のスピンステップで4つの見本のみを生成できます。これにより、四角い配色の見本が生成されます。あなたには無限の可能性があります。先に進んで、独自の実験を行います。

次の例では、特定の色の色合いと色合いを生成するミックスインを作成します。ウィキペディアによると：

色合いは色と白の混合物であり、明るさを増加させ、色合いは色と黒の混合物であり、軽さを減らします。

すぐにわかるように、LessのLighten（）とdarken（）内蔵機能の助けを借りて、色合いと色合いを簡単に作成できます。

.color-palette（）mixinのこのバージョンは、パレットのタイプ（シェードまたは色合い）とベースカラーの2つの実際の引数を取ります。シェードと色合いを切り替えるために、＆オペレーターは、Whenキーワードと組み合わせて使用​​されます。これは、「シェード」を最初のパラメーターとして使用する場合、darken（）関数を持つコードが使用されることを意味します。

両方の場合の背景色は、それぞれlighten（）またはdarken（）関数によって生成されます。これは、定義された基本色と現在のインデックスに10％を掛けたものを使用します。相対パラメーターに注意してください。調整が現在の値に関連するように、それを含めることが重要です。

.<span>analog(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 30);
</span>  @<span>second: spin(@color, -30);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>triad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 120);
</span>  @<span>second: spin(@color, -120);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>quad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 90);
</span>  @<span>second: spin(@color, -90);
</span>  @<span>third: spin(@color, 180);
</span>  @<span>list: @first, @second, @third;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}</span>

注：2つのミキシンが1つと同じ名前を共有することを心配しないでください。パターンマッチング機能のおかげで、使用するものがどれもわかりません。

ここにコンパイルされた出力があります：

CodepenでSitePoint（@SitePoint）で少ない色でカラースウォッチを生成するペンを参照してください。 要約

色や、より少ないものによって提供される多数の色関数でできることは他にもたくさんあります。でもねえ、10,000語のチュートリアルが欲しくないよね？指定された例は、あなたを始めて、利用可能な可能性の概要を提供するのに十分です。より深く潜り、実験を続けるのはあなた次第です。ハッピーレスコーディング！

色の錬金術についてはよくある質問が少ない

色の錬金術とは何ですか？それはどのように機能しますか？これにより、変数、ミキシン、機能、およびより保守性、テーマ、拡張可能なCSSを作成できる他の多くの手法を定義できます。少ないと、ベースカラーを作成してから、関数を使用して色を明るく、暗く、飽和、飽和、脱飽和、スピン、および混合して、ウェブサイトまたはアプリケーションの調和のとれた配色を作成できます。より少ないものを使用した配色？

より少ないものを使用して配色を作成するには、基本色を定義し、より少ない関数を使用してその色のバリエーションを作成することが含まれます。たとえば、明るい関数と暗い関数を使用して、基本色の明るい色合いと暗い色合いを作成できます。また、飽和関数と飽和関数を使用して、色の強度を調整し、スピン関数を調整して補完的な色を作成することもできます。これらの機能を組み合わせることで、幅広い配色を作成できます。

色の錬金術に使用することの利点は何ですか？これにより、一貫性があり調和のとれたカラースキームを作成できます。これにより、ウェブサイトやアプリケーションの視覚的な魅力を高めることができます。また、基本色を単純に変更できるため、配色を簡単に調整できます。残りの色は自動的に更新されます。さらに、スケーラブルで再利用可能な配色を作成することができます。これにより、長期的には時間と労力を節約できます。 >より少ないものは、カラースキームを作成する能力の観点から、SASSのような他のCSSプレセッサーに似ています。ただし、シンプルな構文が少なく、学習が容易であるため、初心者に適した選択肢になります。また、色を操作するための堅牢な機能セットがあり、配色をより強く制御できます。

プリントデザインには少ないもので色の錬金術を使用できますか？ Webデザインに使用すると、印刷デザインにも使用できます。より少ないものを使用して配色を作成してから、印刷デザインソフトウェアで使用できるCSSファイルとしてエクスポートできます。ただし、色空間の違いにより、画面や印刷で色が異なるように見える場合があります。オンラインで、より少ない色の錬金術の詳細を学びます。まず、公式の少ないドキュメントを読むことから始めることができます。これは、言語とその機能の包括的な概要を提供することです。また、多くのチュートリアルやガイドが利用可能です。

モバイルアプリのデザインには少ない色で色の錬金術を使用できますか？

はい、モバイルアプリのデザインには少ない色で色の錬金術を使用できます。少ないほど、モバイルアプリを含むさまざまなプラットフォームで使用できる一貫した配色を作成できます。これは、すべてのプラットフォームで一貫したユーザーエクスペリエンスを確保するのに役立ちます。

色の錬金術に使用するには、色の錬金術に使用するために使用する必要があるツールは、テキストエディターが必要になります。より少ないコードとより少ないコンパイラを記述して、より少ないコードをCSSにコンパイルします。利用可能な無料で有料のテキストエディターと少ないコンパイラがありますので、あなたのニーズと好みに最適なコンパイラを選択できます。

はい、色の錬金術を使用することができます。少ないほど、数学的な機能に基づいて配色を作成することができるため、色の認識に頼る必要はありません。ただし、他の人からフィードバックを取得して、配色がすべてのユーザーが視覚的に魅力的でアクセスできるようにすることをお勧めします。あなたのより少ない配色に問題があることは、あなたが取ることができるいくつかの手順があります。まず、エラーが少ないコードを確認します。コードが正しい場合は、基本色または関数のパラメーターを調整してみてください。まだ問題が発生している場合は、コミュニティの少ないまたはプロのWebデザイナーから助けを求めることを検討してください。

以上がより少ない色の錬金術：配色とパレットの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。