01の10
カラーとウェブのカラースキームについて
Webサイトで使用できる4つの基本的なカラースキームがあります。 この記事の各ページには、カラースキームの図と、Photoshopで同様のスキームを生成する方法が示されています。
- 単色
同じ色相の色を使用する。 白や黒がどれくらい追加されているかによって、色合いや色合いが異なる場合があります。 - 類似
これは、カラーホイール上で互いに近い色を使用します。 - 相補的な
相補的なカラースキームの2つのカラーがカラーホイール上で互いに対向しているため、これはしばしば「反対」と見なされます。 - トライアド
これらの色は、カラーホイール上で均等に配置されています。
すべてのカラースキームは、この黄色をベースカラーとして使用します。
02の10
単色のWebカラースキーム
このカラースキームは、私のベースカラーのマザーイエローを使い、それに応じて白と黒を加えて色合いを変え、シェードします。
- 左上 - ベースカラー＃ffe500
- 右上 - 白を50％塗りつぶして＃fff280を追加
- 左下 - 75％の白色の塗りつぶしを加えて＃fff8bfを得る
- 右下 - 黒を50％補充して＃7f7200を取得
単色のカラースキームは、多くの場合、すべてのカラースキームの目の中で最も簡単です。 色合いと色合いの穏やかな変化は、色がお互いに良く合うようにします。 この配色を使用して、サイトをもっと流動的に見せるようにします。
03/10
その他の単色Webカラースキーム
このスキームでより多くの色を得るために、20％の黒の四角を追加しました。 あなたの色に黒または白を加えることは、ページの色合いを乱すことなくあなたのパレットに新しい色を作り出すことができます。
04/10
類似のWebカラースキーム
このカラースキームは、黄色のベースカラーを取り、Photoshopカラーパレットの色相に30度の加減を与えます。
- 左上 - ベースカラー＃ffe500
- 右上 - + 30度で＃99ff00
- 左下 - -30度で＃ff6600
- 右下 - 白100％#ffffff
類似の色は非常にうまく機能しますが、時にはひどく衝突することがあります。 自分や家族、友人よりも多くの人でこれらのスキームをテストしてください。 彼らが働くとき、彼らはモノクロームスキームよりもカラフルですが、ほとんど流体としてカラフルなサイトを作成します。
05の10
より類似したWebカラースキーム
このスキームでより多くの色を得るために、20％の黒の四角を追加しました。
06の10
相補的なWebカラースキーム
相補的なカラースキームは、他のカラースキームと異なり、通常は2つの色しか持たない。 ベースカラーとそれはカラーホイールの反対側です。 Photoshopを使用すると補色を簡単に取得できます。補色が必要な色の領域を選択し、Ctrl-Iを押すだけで簡単に補色を得ることができます。 Photoshopはあなたのためにそれを反転させます。 重複したレイヤーでこれを行うことを忘れないでください。そうすれば、基本色を失うことはありません。
- 左 - ベースカラー＃ffe500
- 右 - 補完＃001aff
相補的なカラースキームは、しばしば他のカラースキームよりもはるかに目立つので注意して使用してください。 彼らは最も際立つ必要がある部分によく使われます。
07/10
より補完的なWebカラースキーム
このバージョンを得るために、色の下半分に50％の白を加え、中央の四角に黒を30％追加しました。 ご覧のとおり、いくつかのオプションが用意されていますが、それでも相補的な配色です。
08の10
トライアドWebカラースキーム
Triadicのカラースキームは、カラーホイールの周りにほぼ等間隔で配置された3つのカラーで構成されています。 カラーホイールは360度なので、カラーピッカー内の色相ボックスを使用して、ベースカラーから120度を加算したり減算したりします。
- 左上 - ベースカラー＃ffe500
- 右上 - + 120度で＃e500ffを得る
- 左下に-120度で＃00ffe6を得る
- 右下 - 白100％#ffffff
Triadicカラースキームは、しばしば非常に活気のあるWebページを生成します。 しかし補完的な配色のように、人々に違った影響を与えることがあります。 必ずテストしてください。
また、四色または四色のカラースキームを作成することもできます。カラースキンはカラーホイールの周りに等間隔で配置されます。
09/10
その他のトライアディックWebカラースキーム
他の例と同様に、追加の色合いを得るために色に30％の黒い四角形を追加しました。
10の10
不一致なWebカラースキーム
美しさは見る人の目には見えますが、すべての色が一緒になってしまうわけではないという不幸な事実です。 調和のとれていない色は、カラーホイール上で約30度以上離れた色であり、相補的でもトライアッドの一部でもありません。
調和のとれたカラースキームは非常に衝撃的であり、注意を喚起するためにのみ使用すべきです。 これらの色はしばしば衝突するので、あなたが得意とするものは、あなたが探しているものと正確に一致しない場合があることを覚えておいてください。