ほとんどのパレットは、誰かがすでに気に入っている1 つの色、つまりブランドの青、ロゴの緑、結婚式用の布製のスウォッチから始まります 難しい部分は、その最初の選択の後にすべてです どの色がそれに合いますか、何色が必要ですか、そしてデザインツールでバランスが取れているように見えるセットは、テキストがその上に座るとバラバラになるのはなぜですか?
カラーハーモニーは、最初の2 つの質問にカラーホイールのシンプルなジオメトリで答えます コントラストは3 番目の質問に答えます、そしてそれは人々がスキップする1 つです このガイドは両方をカバーし、あなたが確認できる実際のHEX値で、そしてどのように無料であるかを示しています カラーパレットジェネレータ 1つのベースカラーを6種類のパレットに変えます。
tl;dr: カラーパレットジェネレーターは、HSLカラーホイールの周りのベースカラー& #39; sの色合いを固定角度で回転させます (補角の場合は180 度、三進角の場合は120 度、四進角の場合は90 度、類似角の場合は30 度および60 度) またはその軽さを動かして、色合い、色合い、単色セットを作成します。 Toolzカラーパレットジェネレーターは、このクライアント側を無料で行います、サインアップなし: ベースを選択し、6 つのモードのいずれかを選択し、スウォッチをクリックしてHEXコードをコピーするか、セット全体をCSSカスタムプロパティとしてコピーします。 HSLは知覚的に均一ではないため、出荷する前にWCAGコントラスト比に対してテキストと背景のペアを確認してください。
カラーパレットジェネレータとは何ですか?
カラーパレットジェネレーターは、1 つの開始色を取得し、そこから固定ルールを使用して関連する色を計算するツールであるため、セットは試行錯誤することなく調整されているように見えます。ルールはカラーホイールから来ています。反対側の色のコントラスト、隣の色がブレンド、ホイールバランスの周りに等間隔に配置された色。
Toolzジェネレータは、色相、彩度、および明度として色を説明するHSLで動作します 色相は、ホイールの周りの0 から360 度の角度 (0 で赤、120 で緑、240 で青) 彩度とは、色が0% の灰色から100% のフルカラーまで、鮮やかな色です 明度は0% の黒から100% の白まで続きます HSLは、Webに対して定義されています CSS カラーモジュール レベル 4 仕様を指定し、すべてのブラウザがそれを同じ RGB 値に変換します。
HSLで作業すると、ハーモニールールを簡単に表現できます。補色とは、色相に180を加えた同じ彩度と軽さです。これは、RGBスライダーをたくさんいじるのではなく、1つの追加です。
6 つのハーモニーモードとは?
各モードは、ベースカラーから離れるためのレシピです。これは、ソース コードから取得した、Toolz ジェネレーターが各モードで行うことを正確に示しています。
| モード | 何を変えるか | 見本 | 色相の位置 |
|---|---|---|---|
| シェード&アンプ; 色合い | 軽さのみ、基本値 90、75、60、35、22、12 に設定されます | 7です | ベース色相 |
| 単色 | 軽さと彩度を一緒に | 5です | ベース色相 |
| 補完的な | 色相は 180 度反転し、ベースが明るく、補色が暗くなります | 4です | ベース、ベース + 180 |
| 同類の | 色相は片道30度ずつ進みます | 5です | -60、-30、ベース、+30、+60 |
| 三角アダル | 色相は円の 3 分の 1 の間隔を置きました | 3つです | ベース、+120、+240 |
| 四極性 | 色相は円の 4 分の 1 の間隔を置いていました | 4です | ベース、+90、+180、+270 |
実際には 2 つの詳細が重要です。類似した、三極性、四極性では、ベースの色を維持します' すべてのスウォッチの彩度と明るさ、したがって、それらは色相のみを変更します。色合いとアンプ; 色合いと単色性では、色相が維持され、明るさが変化するため、1 つの色の明るいバージョンと暗いバージョンが生成されます。
うまくいった例: #4466ee のすべてのモード
ジェネレータは #4466ee で開きます, 中程度の青. HSL に変換すると hue 228, 彩度 83%, 明るさ 60% です. 各モードはそのベースに対して何を返すかです. これらはツールが出力する HEX コードであり, CSS 仕様の標準 HSL から RGB への変換で再現できます。
三角アダル 色相に 120 と 240 を追加します。228、次に 348、次に 108 (468 は 108 にラップされます)。
#4466ee hsl(228, 83%, 60%) blue
#ee4466 hsl(348, 83%, 60%) pink-red
#66ee44 hsl(108, 83%, 60%) green
パターンに注目してください。同じ彩度と軽さで、ホイールのちょうど 3 分の 1 だけ回転すると、同じ 3 つの RGB チャネル値 (44、66、ee trade places) が再シャッフルされます。
補完的な 180 を追加し、色相 48 に着地し、暖かい黄色になります。モードには、ベースの明るいバージョンと補数の暗いバージョンも含まれているため、#8aa0f4、#4466ee、#eecc44、#d2ac14 の 4 つのスウォッチが得られます。
同類の 168 から288 まで一度に30 度ずつ進みます: #44eecc、 #44bbee、 #4466ee、 #7744ee、 #cc44ee。 tealからblue、violetまでのバンドとして読めます。
四極性 90、180、270 を追加: #4466ee、#ee44bb、#eecc44、#44ee77。
単色 色相228 を保ち、両方向の軽さのための飽和を交換して下さい: #c4cded、 #879ae8、 #4466ee、 #0936ec、 #0225b1.
シェード&アンプ; 色合い 軽さを基本値である 90、75、60、35、22、12 に設定します: #d0d9fb、#8aa0f4、#4466ee、#4466ee、#0f2da3、#0a1c67、#050f38。
最後のものは知る価値のある奇妙さを示しています。 shadeスケールは、固定された明度のステップとベース& #39; s 自身の明度を使用します。 #4466ee が 60 で行うように、ベースがたまたま正確に 90、75、60、35、22、または 12 パーセントの明度で座っている場合、2 つの見本が同一になります。 7 つの異なる色が必要な場合は、ベースの明度を 1 ステップずつ調整します。
仕事に適したハーモニーをどのように選択しますか?
デザインに必要なコントラストの大きさによって調和を選びます。 low-contrast schemes feel calm and are easy to keep constantly; high-contrast schemes draw attention and are easy to overdo.
| ゴール | 開始モードが良好です | なんでや |
|---|---|---|
| UI カラー スケール (100 ～ 700) | シェード&アンプ; 色合い | 1 つの色相、予測可能な光から闇へのステップ |
| 最小限のまとまりのあるブランド | 単色 | すべてが色相を共有し、何も衝突しません |
| 目立つ行動喚起 | 補完的な | 反対の色相が最も強いコントラストです |
| 柔らかく自然な外観 | 同類の | 近隣の色合いがブレンドされています |
| 遊び心のあるバランスのとれたセット | 三角アダル | 3 つの等間隔の色相、どれも支配的ではありません |
| いくつかのシリーズを含むチャート | 四極性 | 4 つの異なる色相が今でも関係しています |
レイアウトの一般的な経験則は、1 つの色が領域の大部分を覆い、2 番目の色が小さなシェアを取り、アクセントが控えめに表示されるようにすることです。これは、すべての色に等しいスペースを与えると大きく見える傾向がある、補完的で三項パレットとうまく機能します。
パレットはバランスが取れているように見えますが、読み方が悪いのはなぜですか?
HSL の明度は人が色をいかに明るく見ないのでパレットが HSL のバランスのとれた見てもスクリーン上で失敗することができる HSL は 60% の明度のあらゆる色相を均等にライトとして扱いません人間の視覚はしません。
上記の補完的な例では、これが具体化されています。 #4466ee と #eecc44 はどちらも HSL 光度 60% を持ちます。それらの相対輝度、つまり Web コンテンツ アクセシビリティ ガイドラインが知覚される明るさに使用する尺度は大きく異なります。青は約 0.17、黄色は約 0.62 です。黄色は目の数倍明るいです。
そのギャップはコントラストとして現れます。 WCAG式、コントラスト比 = (L1 + 0.05) / (L2 + 0.05) を使用すると、L1 はより明るい色& #39; s輝度:
| ペア | コントラスト比 | 通常のテキスト (4.5:1) の WCAG AA |
|---|---|---|
| #4466ee に白いテキスト | 4.77:1について | 通過 |
| #eecc44 に白いテキスト | 1.57:1くらい | 失敗 |
| #eecc44 の黒いテキスト | 13.4:1について | 通過 |
ジェネレーター自体はすでにこれに反応しています: 各スウォッチは明るさの推定から暗いまたは白いラベルのテキストを選択します、それが黄色のスウォッチが暗いラベルを取得する理由です 実際のデザインの場合は、使用する予定でテキストと背景のペアを実行します カラーコントラストチェッカー。 しきい値はから来ます WCAG 2.2:レベルAAの通常のテキストでは4.5:1、大きなテキストでは3:1。ザ カラーコントラストガイド 輝度計算を段階的に説明します。
パレットを CSS 変数としてエクスポートするにはどうすればよいですか?
「Copy CSS」をクリックすると、ジェネレーターは現在のパレットをCSSカスタムプロパティとしてクリップボードに置きます :root.名前には見本順で100 のステップで番号が付けられます.三項の例では:
:root {
--color-100: #4466ee;
--color-200: #ee4466;
--color-300: #66ee44;
}
それをスタイルシートの上部に貼り付け、任意の場所で色を参照します:
.button-primary {
background: var(--color-100);
color: #ffffff;
}
ナンバリングは、明度ではなく、スウォッチの順序に従います。 Shades & Tintsモードでは、たまたま明暗に実行されるため、 --color-100 は最も薄い色合いである.三項モードあるいは類似モードでは数値は単なる位置である.変数の名前を, のような意味のあるものに変更する. --brand、 --accent あんど --surface 一度選択したら、だから --color-200 次に CSS を読む人にとっては何の意味もありません。
代わりに単一の色をコピーするには、そのスウォッチをクリックします。 HEX コードがクリップボードに移動し、スウォッチに "Copied" が表示されます。少しの間。
あなたはそれで結婚式やパステルパレットを作ることができますか?
はい、開始色を持参する限り。結婚式のプリセットや厳選されたテーマはないため、パレットは選択したベースと同じ程度にしかありません。
結婚式のために、本物のものから色を取ります: 花、招待カードのストック、ブライズメイドのドレス生地 そのHEXコードを入力して各モードを試してください.sage greenから始めて、 #9caf88、Complementary returns #c2ceb6、 #9caf88、ほこりっぽいラベンダー #9b88afとより深い #755e8d. sageに対するそのラベンダーは古典的なペアリングであり、数学はワンクリックで見つけました。
パステルの場合は、 #a7c7e7 などの淡い、柔らかく飽和したベースから始めます。 analogous、Triadic、Tetradic は、すべてのスウォッチでその明度と彩度を維持するため、セット全体がソフトなままです。 shades & 色合いと単色性は意図的に明度を動かすため、暗い色を追加し、その青には #0d1f30 まで減ります。個別の明度スライダーはありません。; ベースカラーはコントロールです。
スクリーンの色と印刷された色は異なります。モニターは赤、緑、青の光を混ぜ合わせますが、プリンターは紙にシアン、マゼンタ、黄色、黒のインクを塗ります。一部の明るいスクリーンの色には正確なインク同等物がありません。パレットが文房具に付着している場合は、フルランする前に印刷された校正刷りを注文してください。
よくある間違いやエラーケースは何ですか?
ほとんどのパレット問題は、入力または計算を過度に信頼することから発生します。
入力中にパレットが青色に変わります。 テキストボックスが有効なHEXコードを保持するまで、ジェネレータは #4466ee にフォールバックします。 のような半型値 #9c や #9caf8 デフォルトの青いパレットを表示します。フィールドは、 の有無にかかわらず、3 つまたは 6 つの 16 進数を受け入れます #、そうです #9ca 向かう途中 #9caf88 #99ccaa のパレットを簡単に示します。
ベーススウォッチは一歩離れています。 色は変換される前に HSL 番号全体に丸められるため、一部のベースは正確に往復しません。 #c08081 は、たとえば、#c18182 として戻ります。違いはチャネルごとに 1 単位であり、目に見えませんが、ブランド コードに正確に一致する場合は重要です。ベースの公式 HEX を保持し、生成された HEX を残りに使用します。
あらゆる場所であらゆる色を使用します. 5 色の類似パレットは、すべてジョブが必要な 5 色ではなく、選択できる範囲です。
コントラストをスキップ中. 上に示したように、同じ HSL 明度での 2 つの色は輝度が 3 倍以上異なる場合があります。テキストのペアを確認します。
知覚的均一性を期待すること. シェードステップは、光の見え方ではなく、HSLの明るさでも均等です。均一に見えるスケールが必要な場合は、個々のステップを目で調整するか、CSS Color 4 でも定義されている OKLCH などの知覚空間で作業してください。
これは他のカラーツールとどのように比較されますか?
パレット生成は、より長いワークフローの 1 つのステップです。表には、各ステップにどのツールが適合するかが示されています。
| タスク | ツール | それがあなたに与えるもの |
|---|---|---|
| 開始色を見つけるか、サンプリングします | カラーピッカー | 任意の色のためのHEX、RGBおよびHSL |
| 連携したセットを構築します | カラーパレットジェネレータ | 6 つの調和モード、CSS の輸出 |
| 1 色のきめの細かいスケールを作ります | カラーシェードジェネレータ | 専用の色合いと日陰のランプ |
| 2 色をブレンド | カラーミキサー | 2 つの入力間の中間色 |
| テキストの読みやすさを確認します | カラーコントラストチェッカー | WCAG比と合否 |
音階が調和よりも重要である場合、 シェードと色合いを生成するためのガイド 50 ～ 900 個のスロープの構築をさらに詳しく説明します。すべてのカラー ツールがリストされています カラーツールハブ。
ジェネレータはプライベートで、オフラインでも動作しますか?
はい。すべての HSL 数値とレンダリングは JavaScript を使用してブラウザで実行されます。入力した内容は何もアップロードされず、ページが読み込まれた後にアップロードされます パレットジェネレータ ネットワーク接続なしで作業を続けます。スウォッチまたは CSS をコピーすると、1 日の使用制限にカウントされ、色ではなく、自分がいたモードが記録されます。
