私が今まで出荷したすべてのデザインシステムは、単一のブランドカラーで始まり、すぐにさらに1 ダース必要になります。 1 つの青だけでは決して十分ではありません。ホバー状態には明るい青、選択した行の背景にははるかに明るい青、淡い表面に置かれるテキストには濃い青、叫ぶべきではない無効なボタンには落ち着いた青が必要です。 [Toolz.dev] (/) のインターフェイスを構築していたとき、私はカラーピッカーを開け続け、明度スライダーを小突き、結果がまだ同じファミリーのように見えるかどうかを観察し、スタイルシートに 1 進コードを一度に貼り付けました。 " が正しく見えるまで小突く " は繰り返し処理ではないため、結果は一貫していませんでした。
ということで、私は Color Shades Generator. 1 つの色を与えると、色空間で計算された 3 つの完全なスケールが得られます CSS カラーモジュール レベル 4 16 進数の数字を小突くのではなく、白に向かう色合い、黒に向かう色合い、灰色に向かう色調を定義します。このガイドでは、これら 3 つの単語が実際に何を意味するのか、数学がどのように機能するのか、そして単一のブランド カラーを一貫したパレットに変える方法を説明します。 CSS に直接ドロップできます。
tl;dr: 色合いとは、あなたの色に白を混ぜたもの、色合いとは、あなたの色に黒を混ぜたもの、トーンとは、あなたの色に灰色を混ぜたものです それぞれが元の色相を保ち、色の明るさ、暗さ、ミュートの見え方だけを変更します HEX、RGB、またはHSLの値を貼り付け、必要なステップ数を選択し、ジェネレーターは3 つのスケールをすべて一度に構築し、各スウォッチはHEX、RGB、またはHSLとしてコピー可能で、すべてがブラウザーで実行されます。
色合い、色合い、色調の違いは何ですか?
これら 3 つの単語は伝統的な色彩理論に由来しており、基本的にどの色であるかを変更せずに色を変更する 3 つの異なる方法を説明しています。デザイナー、そしてますますデザイントークンが単語を正確に使用しているため、この区別は正しく行う価値があります。
色合いとは白が混ざった色です白を加えると明かりが増し色が柔らかくなりますピンクは赤の色合い、ベビーブルーはより強い青の色合いです色合いは淡い背景、微妙な塗りつぶし、そしてインターフェースで最も明るい表面が必要なときに手を伸ばすものです。
シェードは黒と混ざった色です黒を加えると明暗が低くなり色が深まりますマルーンは赤の色合い、ネイビーは青の色合いです色合いは目盛りの暗い端を与えます文字色、押しボタンの状態、そしてベースよりも重みが必要な境界線です。
トーンとは、グレーと混ざった色です。グレーを追加すると、劇的に明るくなったり暗くなったりすることなく、色と#39; の強度が低下します。トーンは 3 つのトーンの中で最も十分に活用されておらず、派手ではなく洗練されていると感じるパレットの背後にある秘密です。トーンダウンした色は、より穏やかでプロフェッショナルであると読み取れるため、落ち着いたパレットが本格的な製品デザインを支配しています。
3 つとも共有する重要な点は 色相を保っていることです 青の色合いはまだ青で 青の色合いはまだ青で 青の色調は青のままです それが色合いや色合いや色調のセットを ランダムな品揃えではなく 1 つの家族に見せる理由です。
各スケールは実際にどのように計算されますか?
ボンネットの下では、すべてのスウォッチはRGB空間の2 色の直線的なミックスです ジェネレータは赤、緑、青のトリプルとしてあなたのベースカラーを取り、それはターゲットカラーを取り、それからそれは偶数ステップで一方から他方の色合いのターゲットは白です (255, 255, 255)。 shades のためにターゲットは黒、 (0, 0, 0)。 tones のためにターゲットは中間の灰色、 (128, 128, 128)。
任意の単一チャネルの混合は単純な算術演算です。ベースからターゲットに向かって 30 パーセントの方法のスウォッチを取得するには、計算します base + (target - base) * 0.30 赤いチャンネル、次に緑のチャンネル、そして青いチャンネル、そして整数に丸めます 10 段階の色合いのスケールは、その計算を10 パーセント、20 パーセント、そして百パーセントまで実行し、そこでは色が真っ白になっています ベースカラー自体は各スケールの上部にあるゼロパーセントのスウォッチとして含まれているため、どこから始めたのかが常にわかります。
RGBではチャンネルごとにミックスが行われるため、色相は色合いと色合いに対して基本的に固定されたままになります。 純白または純黒に向かってブレンドすると、色が反射する光の量が変化しますが、その基礎となる文字は変化しないため、同じベースの色合いと色合いは、異なる明るさで同じ色として読み取られます。 灰色は中立的な中心に位置し、それに向かって引っ張るとすべてのチャンネルがわずかに彩度を下げるため、トーンは知覚される色相を髪にシフトさせることができますが、実際にはスケール全体が 1 つの色として読み取られます。特定のスウォッチがフォーマット間でどのように着地するかを正確に検査したい場合は、 カラーコンバーター HEX、RGB、HSL、HWB の値を並べて表示します。
HSLの軽さを変えてみませんか?
合理的な疑問は、なぜツールが単に RGB を上げ下げするのではなく、RGB で混合するのかということです L HSL での値 どちらのアプローチも単色スケールを生成し、どちらも有効です。 RGB で白と黒に向かって混合することは、色合いと色合いの古典的な painter's モデルであり、デザイナーがすでに使用している単語にクリーンにマッピングされます。また、エンドポイントを正直に保ちます。100 パーセントの色合いは正確に白であり、100 パーセントの色合いは正確に黒ですが、これは、HSL の明度を操作するだけでは、彩度がどのように相互作用するかによって常に当てはまるわけではありません。ジェネレーターは、特に "less intense" をカバーするために 3 番目のスケールとしてトーンを与えます。純粋な明度の変化が対処しない軸。
いくつのステップを生成すればよいですか?
発電機はスケールごとの2 から20 のステップからのどこでも選ぶことを可能にし、右の数字は造っているものによって決まります。 のような名前付きスロープをほしいと思う設計システムのため blue-50 スルー blue-900、大きいステップ数はあなたがからサンプルできる細かい勾配を与える ホバーとアクティブ状態のクイックペアのために、3 つまたは4 つのステップはたっぷりである 私のデフォルトは10 です、なぜなら1 つのベースからの10 の色合い、10 の色合い、および10 のトーンは、見本の圧倒的な壁なしで私に完全な作業パレットを与えるからです。
ステップ数が多いほど、隣接する色間のジャンプが小さくなります。これは、データ テーブルの交互のバンドのように、隣接する色合いを視覚的に区別する必要があるが近い場合に必要なものです。ステップ数が少ないほど、より大胆なジャンプを意味します。これは、各色が明らかに異なるジョブを持つコンパクトなパレットに適しています。間違った答えはなく、ツールが即座に再計算するため、間隔が正しく見えるまでステップ数を上下にスライドさせることができます。
色合いは不透明度の低下とどのように異なりますか?
私が早く陥った罠は、不透明度を使って色合いを偽装することでした。それは同等のようです。白いページの上に青いボタンを 50 パーセントの不透明度に落とすと、明るい青のように見えます。問題は、不透明度が色ではなく、合成命令であり、要素の後ろにあるものすべてに完全に依存することです。暗い表面上の同じ 50 パーセントの青は濁った濃い青になり、写真の上では予測不可能になります。あなたの "light blue" は背景に応じてアイデンティティを変更しますが、これはデザイン システムに必要なものとは逆です。
色合いは、実際の不透明な色に軽さを焼くことによってこれを解決します 生成器があなたに与えるスウォッチは、それが完全に不透明であるため、その背後に何がある場合でも同じように見える固定六角形の値です 製品のすべての表面にわたって予測可能に動作する色の一貫した明るいバージョンが必要な場合は、透明度ではなく色合いを使用します オーバーレイやスクリムのような本物の透明度効果のために不透明度を予約します 実際に背景を見せてほしい場所 これら2 つのアイデアを別々に保つことは、パレットを偶然ではなく固体として感じさせる静かな習慣の1 つです。
これらのスケールを使用可能なパレットに変えるにはどうすればよいですか?
パレットは単なる色の山ではなく、割り当てのセットです。単一のブランドカラーから始めるときに使用するワークフローは次のとおりです。ベースを主なアクションカラーとして、メインボタンとリンクの色にします。背景の色合いに手を伸ばします。ページまたはカードの表面には非常に明るい色合い、軽い要素のホバリング状態にはわずかに強い色合い。テキストと強調の色合いに手を伸ばします。淡い色合いとのコントラストが必要なボディコピーには深い色合い、プライマリボタンの押された状態には中程度の色合い。無効化されたコントロールやセカンダリバッジなど、存在するが静かな色が必要な場合はトーンを使用します。
スキップできないルールの 1 つはコントラストです。ボタンの背景として美しく見える色合いは、その上のラベル テキストがアクセシビリティ コントラストの要件を満たしていない場合は役に立ちません。重ねて配置する色のペアを選択したら、それらを実行します。 カラーコントラストチェッカー WCAGのしきい値をクリアしていることを確認するには 美しい色合いを選ぶのは簡単な部分です それらの上のテキストが読みやすいことを確認することは、実際のパレットとムードボードを分離する部分です。
以下の表は、通常、10 ステップのスケールをインターフェイスの役割にどのようにマッピングするかを示しています。
| スウォッチソース | 代表的な役割 | 使用例 |
|---|---|---|
| 最も軽い色合い | 表面と背景 | ページの背景、カードの塗りつぶし、選択した行 |
| 軽い色合い | 軽い要素に状態をホバーします | ボタンホバー、リストアイテムホバー |
| ベースカラー | プライマリアクション | メインボタン、アクティブリンク、ブランドアクセント |
| 中程度の色合い | 圧迫された状態と活動的な状態 | ボタン アクティブ、フォーカスト ボーダー |
| 暗い色合い | テキストと強調度が高い | 明るい表面、見出しに本文 |
| トーンズ | ミュートされた二次要素 | 無効なコントロール、セカンダリバッジ |
これは他のカラーツールとどのように適合しますか?
シェードジェネレーターは小さなオーケストラの1 つの楽器です。 " という質問に答えます。 give me more of this one color, " but real palette work touchs a few adjacent questions too.補完的または類似のセットのように、同じ色相ではない調和のとれた色が必要な場合、 カラー パレット ジェネレーター それらの関係を構築します。画像やデザインから開始色をサンプリングしていて、その正確な値を読み取る必要がある場合、 カラーピッカー 16 進コードを取得します。そして、あなたの色合いが CSS 背景に向けられ、あるものから別のものへとフェードされると、 グラデーションジェネ そのうちの2 つをすぐに貼り付けるようにします linear-gradient。
自然なパイプラインは次のようになります: ベースカラーを選択または貼り付け、その色合い、色合い、トーンを生成し、コントラストチェッカーに対してスタックする予定のペアを検証し、勝者をスタイルシートまたはデザイントークンにコピーしますそれらのツールのどれもがブラウザー内で完全に実行されるため、まだ発表していないブランドカラーは誰にも& #39; s サーバーに移動することはありません。 ローカルファーストツーリングが共有する値である場合、ピースはオンになります データのプライバシーとオンライン ツール なぜ私がすべてをそのように構築するのかを説明します Web 開発者ツールキット 私の日常のワークフローに存在する残りのユーティリティを収集します。
簡単に実行された例
ブランドブルーから始めます #4466EE.ステップカウントを10 に設定し、コピーフォーマットをHEXに残す.ジェネレータは3 つの列を返す.
ティント列はから始まります #4466EE そして白に向かって登り、徐々に淡い青色を通過し、最後のスウォッチが始まります #FFFFFF.どこの真ん中に、優れた選択行の背景を作る柔らかいツルニチニチソウを取得します。 shades列は同じで始まります #4466EE そして黒に向かって下降し、テキストやプレス状態に適した深いインディゴが得られ、 で終わります #000000。 tones 列は で始まります #4466EE そして灰色に向かって移動し、落ち着いて控えめに読める落ち着いたスレートブルーを生成し、で終わります #808080。
その 1 つの入力から、背景 (明るい色合い)、ホバー塗りつぶし (わずかに暗い色合い)、原色 (ベース)、テキスト カラー (暗い色合い)、および無効な色 (トーン) が得られます。任意のスウォッチをクリックしてコピーし、プロジェクトがそれらを好む場合はコピー形式を RGB または HSL に切り替えて貼り付けます。カラー ピッカーへの 20 回のトリップだったものが、1 回の貼り付けと数回のクリックになり、数学が決定論的であるため、パレットは毎回一貫しています。
よくある質問
色合い、色合い、色調の違いは何ですか?
色合いとは白が混ざった色で明るくなること 色合いとは黒が混ざった色で暗くなること トーンとは灰色が混ざった色で 明暗を変化させず 消すことです 3つとも元の色相を保ち 光や暗さ 彩度の現れ方だけを変えます。
色の色合いを生成するにはどうすればよいですか?
ベースカラーを入力してから、色と黒の量の増加を混ぜる色合いの列を読みます 各行は偶数ステップで元の暗いバージョンであり、それらのいずれかをHEX、RGB、またはHSLとしてコピーできます ステップ数を増やして、よりスムーズな暗い値の範囲を実現します。
明るい色と暗い色はどのように計算されますか?
各スケールは、ターゲットに向かってベースカラーが直線的にミックスされます。ティントは白に向かってブレンドされ (255、255、255)、シェードは黒に向かってブレンドされ (0、0、0)、トーンはミッドグレーに向かってブレンドされます (128、128、128)。たとえば、30% のティントは、赤、緑、青の各チャンネルをベースから白まで 30% 移動します。
どのような色のフォーマットで貼り付けることができますか?
HEXコード (3 桁または6 桁、先頭ハッシュの有無にかかわらず) 、 rgb () 値、 hsl () 値、またはクリムゾンやスチールブルーなどの一般的なCSSカラー名を入力できます。 toolは内部で入力をRGBに変換し、HEX、RGB、HSLのすべてのスウォッチを報告します。
何色合いを生成できますか?
1 つのスケールにつき2 から20 のステップを設定できます 各スケールには元のベースカラーも含まれているため、10 ステップ設定ではベースプラス10 の色合い、10 の色合い、10 のトーンが得られます ステップ数が少ないほど値間のジャンプが大胆になり、ステップ数が多いほど細かいグラデーションが得られます。
このツールで単色パレットを構築できますか?
はい。 monochromaticパレットは、色合い、色合い、色調が正確に生成するもの、明度と彩度の異なるレベルで1 つの色相を使用します。 brandのベースカラーを選択し、その色合いを背景に使用し、baseをプライマリ要素に使用し、その色合いをテキストまたはホバー状態に使用します。
生成された色は同じ色相を保ちますか?
色合いや色合いは、ほぼ正確に色相を保ちます。, 純粋な白や黒と混合すると、色相ではなく、軽さが変化するため。 gray は色空間の中心に位置するため、トーンは非常にわずかにシフトする可能性がありますが、実用的なデザイン作業の場合、スケール全体が同じ色の 1 つのファミリーとして読み取られます。
カラーシェードジェネレーターは無料でプライベートですか?
はい。サインアップも制限もなく完全に無料です。すべての解析と色計算はクライアント側の JavaScript を使用してブラウザで実行されるため、入力した色はデバイスから離れることはなく、ページが読み込まれるとツールはオフラインで動作し続けます。
