ウェブページでよく使われる色

Name: ウェブページでよく使われる色
Author: 录屏网

カラーマッチングの常識:
1. Web ページ上の色表現には、赤（R）、緑（G）、青（B）の 3 色が使用されており、人間が認識するすべての色が含まれます。 Web ページ以下のとおり (赤を例にします) RGB 形式: 赤は (255,0,0)、または 16 進数の hex 形式は (FF0000) です。
2. 色「赤」を押します。->黄色->緑->青->赤」を順番にオーバーグラデーションして、赤、オレンジ - 赤、オレンジ、オレンジ - 黄色、黄色、黄 - 緑、緑、青 - 緑、青、青 - 紫、紫、紫 - 赤の 12 のカラーリングを取得できます。。
3. 色は、無彩色と有彩色の 2 つのカテゴリに分類されます。無彩色とは、黒、白、グレー系の色を指します。色とは、無彩色を除くすべての色を指します。通常、コンテンツのテキストは無彩色 (黒)、境界線、背景、および画像はカラーです。したがって、ページが豊かであっても、コンテンツは依然として眩しくはありません。通常、背景とコンテンツのコントラストは大きくなります。

単色をメインカラーとして並べ替える
Web デザインでは通常、単一の色をメインカラーとして使用し、他の色または類似した色と組み合わせて、明るい色から強い色の順に配置されています。

赤

- 刺激的な色です。刺激効果により、人々は衝動的、怒り、熱狂的、精力的な気分になります。

#FFFFCC

#CCFFFF

#FFCCCC

#99CCCC

#FFCC99

#FFCCCC

#FF9999

#996699

#FFCCCC

#CC9999

#FFFFCC

#CCCC99

#FFCCCC

#FFFF99

#CCCCFF

#0099CC

#CCCCCC

#FF6666

#FF9966

#FF6666

#FFCCCC

#CC9966

#666666

#CC9999

#FF6666

#FFFF66

#99CC66

#CC3333

#CCCCCC

#003366

#993333

#CCCC00

#663366

#CCCC99

#666666

#CC9999

#FF6666

#FFFF00

#0066CC

#CC0033

#333333

#CCCC00

#336633

#990033

#FFCC99

#993333

#CC9966

#003300

#FF0033

#333399

#CCCC00

#CC0033

#000000

#003399

#000000

#99CC00

#CC0033

#999933

#993333

#333300

オレンジ色

また、明るく、楽しく、暖かく、暖かく、ファッショナブルな効果をもたらす、エキサイティングな色でもあります。

#FFCC99

#FFFF99

#99CC99

#FFCC99

#CCFF99

#CCCCCC

#FFCC99

#FFFFCC

#99CCFF

#FF9966

#FFFFCC

#99CC99

#FF9900

#FFFFCC

#336699

#CCCC33

#FFFF99

#CC9933

#996600

#FFCC33

#FFFFCC

#CC9933

#336666

#FF9900

#FFFF00

#0099CC

#99CC33

#FF9900

#FFCC00

#FF9933

#99CC33

#CC6699

#FF9933

#FFFF00

#3366CC

#FF9933

#FFFFCC

#009966

#FF6600

#FFFF66

#009966

#990033

#CCFF66

#FF9900

#FF9966

#996600

#CCCC00

#CC6600

#999999

#CCCC33

#CC6600

#CCCC33

#336699

#000000

#FF9933

#999966

#663300

#FF9933

#FFFF66

黄色

-幸福、希望、知恵、明るさの性格を持ち、最高の明るさを持っています。

#FFFFCC

#CCFFFF

#FFCCCC

#FFFF00

#FFFFFF

#CCCC00

#99CCFF

#FFCC33

#FFFFCC

#FFFF33

#99CCFF

#CCCCCC

#FFFF00

#FFFFFF

#9933FF

#99CCFF

#FFCC33

#FFFF33

#FFCC00

#66CC00

#FFFF99

#FF9900

#FFFF00

#0099CC

#FFCC00

#0000CC

#FFFF99

#CC9999

#FFFFCC

#6666CC

#999933

#FFFFCC

#CC99CC

#CCCC00

#666600

#FFFF66

#FF9966

#FFFFCC

#99CC99

#FFCC33

#FFFFCC

#999966

#FFCC99

#FF6666

#FFFF66

#FFCC99

#999966

#FFFF00

#FFFF99

#99CC99

#666600

#999966

#FFFF99

#333333

#006633

#333300

#CCCC99

#006633

#663300

#CCCC66

黄緑色

#33CC33

#6666CC

#FFFFFF

#CCCC33

#FFFFFF

#CCFFCC

#FFCC99

#CCFF99

#CCCCCC

#CCCC00

#999966

#FFFFCC

#CCCC33

#FFFFFF

#336699

#CCCC33

#999999

#CCFFFF

#00CC00

#0066CC

#99CCCC

#99CC33

#FF9900

#FFCC00

#99CC33

#CCCCFF

#663300

#CCCC33

#993399

#000000

#CC6600

#999999

#CCCC33

#CC9933

#FFFF99

#99CC99

#669933

#CCCC33

#663300

#99CC33

#CCCCCC

#000000

#CC6600

#CCCC33

#336699

#666600

#CCCC66

#CCFFCC

#333366

#99CC33

#336699

#666666

#99CC33

#003366

#003333

#99CC33

#999999

#996633

#FFFF99

#99CC66

緑

-寒色と暖色の間で、調和、静けさ、健康、安心感を与えます。黄金色と淡い白を組み合わせると、エレガントで快適な雰囲気を演出できます。

#009966

#FFFFFF

#FFFF00

#339933

#FFFFFF

#9933CC

#339933

#FFFFFF

#000000

#339933

#99CC00

#FFFFCC

#CCCC66

#336666

#99CC33

#FFFF66

#336600

#339933

#CC9900

#666666

#339966

#CCCCCC

#003366

#669933

#CCCCCC

#000000

#339933

#CCCCCC

#6699CC

#006633

#CCCC33

#CC9933

#339933

#666633

#CCCC66

#339933

#FFCC33

#336699

#006633

#669933

#99CC99

#336666

#996633

#CCCC33

#003300

#669933

#CCCC99

#006633

#990033

#FF9900

#006633

#333300

#CCCC99

#006633

#663300

#CCCC66

#993333

#CC9966

#003300

緑

#CCFF99

#FFFFFF

#66CCCC

#339999

#FFFFFF

#99CCFF

#66CC99

#FFFFFF

#666699

#009999

#66CCCC

#CCFFFF

#66CCCC

#CCFF66

#FF99CC

#339999

#FFFF00

#336699

#CC9933

#339999

#FFCC33

#FFCC00

#009999

#CC3333

#669999

#CCCCCC

#CC99CC

#339999

#CCCCCC

#000000

#339999

#666699

#CCCCCC

#003333

#99CC99

#FFFFCC

#669999

#CCFFCC

#996699

#CCCC99

#669999

#999966

#CCCC99

#339999

#336666

#669999

#CCCC99

#999999

#003366

#669999

#663333

#339999

#CCCC66

#333333

#339999

#CCFFCC

#336666

#3399CC

#666666

青

- 最もクールで新鮮な、プロフェッショナルなカラーです。白と混ぜると、柔らかく、エレガントでロマンチックな雰囲気を反映できます（空の色のように）白---白さ、明るさ、無邪気さ、清潔感があります。

#FFFFCC

#CCFFFF

#FFCCCC

#99CCCC

#FFFFFF

#3399CC

#CCFFCC

#99CCCC

#FFFFCC

#CCCCFF

#FFFFFF

#99CCFF

#FFCC99

#FFFFCC

#99CCFF

#336699

#FFFFFF

#99CCCC

#FFFFFF

#CCFF99

#CCCCFF

#FFFFCC

#CCFFFF

#99CCCC

#FFFFFF

#336699

#99CCFF

#CCFFFF

#6699CC

#99CC33

#FFFFFF

#3399CC

#0099CC

#FFFFCC

#666699

#CCCCCC

#003366

#99CCFF

#0099CC

#FFFFFF

#666666

#CCCCCC

#6699CC

#666666

#336699

#CCCC99

#003366

#3399CC

#003366

#CCCCCC

#6699CC

#006699

#000000

#003366

#CCCCCC

#006699

#999933

#336699

#333333

青紫

#CCFFFF

#FFFFFF

#CCCCFF

#CCCCCC

#FFFFFF

#666699

#99CCFF

#FFFFFF

#333399

#6666CC

#FFFFFF

#FF9999

#9999FF

#FFCC33

#FFFFCC

#0099CC

#FFFFCC

#666699

#0000FF

#6699FF

#CCFFFF

#6666FF

#66CCFF

#CCFF66

#669999

#FFFFCC

#6666CC

#9999CC

#FF9999

#666699

#003399

#FFCCCC

#6699CC

#CC6666

#333399

#CCCC00

#000066

#6666FF

#CCCCCC

#003399

#CCFF99

#333333

#333366

#CC0033

#CCCCCC

#336699

#CCCC66

#333300

#003399

#FFFF99

#000000

#990066

#CCCC33

#003399

#CC3333

#000000

#003399

#333366

#999966

#333333

紫

#FFFFCC

#FFFF99

#CCCCFF

#9999CC

#99CC99

#FFFFFF

#FFCCCC

#CCCCFF

#CCCC99

#9999CC

#FFFFCC

#FFCCCC

#FF99CC

#CCCCFF

#660066

#FFFFFF

#663333

#CCCC99

#333333

#9966CC

#CCCC00

#FF9966

#663399

#996699

#FFCCCC

#CC99CC

#996666

#CC99CC

#FFCCCC

#FFCC99

#FF9933

#663366

#333399

#CCCCFF

#CC99CC

#663366

#CCCCCC

#CC99CC

#996699

#9999CC

#CCCCFF

#CC9966

#999999

#663366

#330033

#666666

#669999

#CCCCCC

#999999

#663366

#FF33CC

#CCCC99

#663366

#999999

#CCCCFF

#999966

#993333

#330033

紫赤

#FFCCCC

#FFFFFF

#99CC00

#FF99CC

#FFFFFF

#993366

#66CC99

#FFFFFF

#CC6699

#CC9999

#FFCCCC

#CC99CC

#FFCCCC

#FFFF99

#CCCCFF

#FFFF99

#993399

#FF99CC

#66CCCC

#CCFF66

#FF99CC

#003399

#CCCC00

#FFCCCC

#FF99CC

#CCCCFF

#FF9999

#FFCCCC

#FF99CC

#669966

#CC6699

#FFCCFF

#CCCCCC

#CC99CC

#CC3399

#FFCC99

#FF6666

#FF3399

#CCCC99

#663366

#FFFFCC

#FFCCCC

#663366

#CCCCCC

#CC99CC

#990066

#FFCC00

#CC0033

#990066

#CCCCCC

#006699

#999900

#990033

#000000

#990066

#000000

#009966

印象の組み合わせによる分類

色合わせは複雑に見えるかもしれませんが、不思議なことではありません。各色は印象空間内で独自の位置を持っているため、カラーマッチングによって得られる印象は加算と減算によって近似できます。各色が高輝度であれば、その重ね合わせは自然に柔らかく、各色が強ければ、その重ね合わせは強くなります。もちろん、実際のデザインでは、同じ明るさやコントラストの色でも色相環上では角度が異なり、組み合わせることで印象が常に変化するなど、掛け算や割り算も考慮する必要があります。そこで本書では、色相別に組み合わせを列挙するほか、読者の参考として印象を重視した組み合わせも列挙することにした。

柔らかい、明るい、優しい

明度の高い色を組み合わせると、柔らかく明るく優しい印象になります。まぶしさを避けるために、デザイナーは通常、低輝度の前景トーンを使用してブレンドしますが、カラーホイール上の色間の距離もくすみの回避に役立ちます。

#FFFFCC

#CCFFFF

#FFCCCC

#FFFF99

#CCCCFF

#FF9966

#FF6666

#FFCCCC

#FFCC99

#CCFF99

#CCCCCC

#FFCCCC

#CCCCFF

#CCFFCC

#CCFFFF

#CCCCCC

#CCFF99

#FFCCCC

#FFFFFF

#99CC99

#99CCCC

#FFCC99

#FFCCCC

#CCCCFF

#FFCCCC

#CCFFFF

#FFCC99

#FFFFCC

#99CCCC

柔らかく、清潔で、爽やかな

柔らかく、清潔で、明るい印象を与えるには、色相環において青から緑に隣接する色が最適です。そして明るさも高めです。ほぼすべての組み合わせに白人が参加していることがわかります。もちろん、実際のデザインでは白の代わりに青や緑などの逆相の高輝度色を使用することも可能です。

#CCFF99

#FFFFFF

#99CCFF

#99CCCC

#FFFFFF

#CCFF99

#CCFFCC

#FFFFFF

#66CCCC

#CCCCFF

#FFFFFF

#99CCCC

#CCFFCC

#99CCCC

#FFFFCC

#CCFFFF

#FFFFFF

#CCCCFF

#CCFFFF

#FFFFFF

#99CCFF

#66CCFF

#FFFFFF

#CCFFFF

#6699CC

#FFFFFF

#99CCFF

#CCCCFF

#FFFFFF

#99CCFF

かわいい、嬉しい、面白い

かわいい、楽しい、面白いという印象のカラーマッチングの特徴は、均一な色相分布、暖色系と寒色系の組み合わせ、高い彩度、高い色解像度です。

#66CCCC

#CCFF66

#FF99CC

#FF9999

#FFFFFF

#FFCC99

#FF6666

#FFFF66

#99CC66

#666699

#FFFFFF

#FF9999

#99CC33

#FF9900

#FFCC00

#FF0033

#FFFFFF

#FF9966

#FF9900

#CCFF00

#CC3399

#99CC33

#FFFFFF

#FF6600

#993366

#CCCC33

#666633

#66CCCC

#FFFFFF

#666699

活気がある、楽しい、面白い

前の印象と比べて、色の選択肢が広がりました。最も重要な変更は、純白を彩度の低い色またはグレーに置き換えたことです。

#CC9999

#FFFF99

#666699

#FF9900

#FFFF00

#0099CC

#CCCC99

#CC3399

#99CC00

#FF6666

#FFFF00

#3399CC

#CC6600

#999999

#CCCC33

#FF9933

#FFFFCC

#009933

#0099CC

#CCCCCC

#FF6666

#FF6600

#FFFF66

#009966

#CC6633

#FFCC99

#CC6600

#CC0066

#009999

#FFCC33

スポーティかつキビキビ

スポーツの色は、健康、幸福、太陽の光を反映すると同時に、強烈で刺激的な感情を高めるものでなければなりません。そのため、このような印象には彩度が高く明度が低い色が多く現れるのです。

#FF6666

#FFFF00

#006699

#FF9966

#FFFFFF

#0066CC

#339933

#FFCC33

#336699

#FF9900

#FFFFCC

#336699

#CC6600

#CCCC44

#336699

#99CC33

#FFFFFF

#0099CC

#99CC33

#FF6666

#336699

#FFFFFF

#99CCCC

#FF0033

#333399

#CCCC00

#33CC99

#FFFF00

#336699

軽快、ゴージャス、ダイナミック

華やかな印象を与えるためには、ページ全体が色彩豊かで彩度が高いことが必要ですが、明るさを適度に弱めることで華やかな印象を強めることができます。

#990066

#FFCC00

#CC0033

#FFCC33

#333399

#FF0033

#666699

#FFFF00

#FF0033

#006699

#FFFF33

#FFCC00

#009999

#CC3366

#FF0033

#CCCC00

#006699

#CCCC00

#FF9933

#663399

#FF9933

#FFFF00

#336699

#CC3333

#FFCCCC

#99CC00

#003399

#FFFF00

#FF6600

ワイルド、エネルギッシュ、ダイナミック

ワイルドな印象の空間に欠かせない低明度カラーは、適度な黒と合わせてもOK。他の色は彩度が高く、コントラストが強いです。

#990066

#FFFF00

#003399

#CC0033

#000000

#003399

#FFFF00

#F00000

#CC3333

#CCCCCC

#003366

#CC0033

#333333

#CCCC00

#000000

#99CC00

#CC0033

#FF0033

#333333

#FF9900

#990066

#000000

#009966

#666666

#FF6600

#333333

#993333

#CCCC00

#663366

ゴージャス、ファンシー、フェミニン

女性的なページでは紫とマゼンタが主役ですが、ピンクと緑も一般的な色です。一般に、それらは高い彩度と一致する必要があります。

#FFFF99

#993399

#FF99CC

#FF6666

#FFFFFF

#339999

#FF99CC

#003399

#CCFF00

#66CC99

#FFFFFF

#CC6699

#CC3399

#FFCC99

#FF6666

#FFCCCC

#FFFFFF

#993366

#CC6699

#FFFF00

#666699

#CC6699

#99CC66

#663366

#FF33CC

#CCCC99

#663366

#CC3399

#FFCC99

#FF6666

後味、女性らしさ、エレガントさ

上品な感じは非常に奇妙で、一般的に色の彩度を下げる必要があります。一般に、明るさと彩度は、隣接する青と赤の色に合わせて調整されます。

#CCCCCC

#CC99CC

#CC3399

#FFCCCC

#FF99CC

#CCCCFF

#CC3399

#9933CC

#CC99CC

#9999CC

#FFFFCC

#FFCCCC

#663366

#CCCCCC

#CC99CC

#FF9999

#FFCCCC

#FF99CC

#996666

#CC99CC

#FFCCCC

#CC9999

#CCCCCC

#FFCCCC

#FF9999

#996699

#FFCCCC

#996699

#FFCCCC

#CC99CC

高貴で自然で安定した

貴族では、明るさを抑えた黄緑を使用することが多く、色のバランスに気を配ると安定した印象になります。

#CCCC33

#FFFF99

#CC9933

#CC9966

#CCCC66

#669999

#FF9966

#996600

#CCCC00

#CCCC66

#660033

#CC6600

#CCCC00

#666600

#CCCCFF

#CC9933

#009999

#FFCC33

#999966

#CCCC99

#339999

#99CC99

#669933

#336633

#666633

#999933

#CC9966

#660000

#CC9900

#CCCC99

穏やかで自然な

グリーンは落ち着いたナチュラルな印象の主役ですが、ページのメインカラーとしてはネガティブすぎる印象を与えやすいため、柄のデザインには特に注意が必要です。

#FFFF99

#99CC99

#666600

#996633

#FFFF99

#99CC66

#006600

#66CC66

#CCFF99

#666600

#CCCC66

#CCFFCC

#669933

#CCCC33

#663300

#666633

#999933

#CC9966

#003300

#669933

#CCCC99

#006633

#663300

#CCCC66

#666600

#FFFFCC

#999999

#006633

#333300

#CCCC99

伝統的でエレガントでエレガント

従来のコンテンツでは通常、色の彩度、特に茶色を下げる必要があります。先ほども述べたように、紫は優雅さや上品さを表す色としてもよく使われます。

#999933

#FFFFCC

#CC99CC

#CC9966

#666666

#CC9999

#CCCC99

#333333

#9966CC

#CCCC99

#666666

#CC9999

#996699

#CCCC99

#669999

#CC9966

#999999

#666666

#339966

#CCCCCC

#996699

#663366

#999999

#CCCCFF

#996699

#9999CC

#CCCCFF

#CCCC99

#999999

#663300

伝統的、安定的、古典的

伝統、安定感、古典主義はいずれも保守的な印象ですが、色を選ぶときは、明るさを抑えた温かみのある色を使用するようにしてください。この組み合わせは大人の美学に沿っています。

#6699CC

#663366

#CCCC99

#990033

#CCFF66

#FF9900

#666699

#660033

#99CC99

#663300

#FF9933

#FFFF66

#990033

#006633

#CCCC00

#660033

#999933

#660099

#993366

#CCCC33

#666633

#996600

#CCCC66

#666600

#009933

#CC9900

#666666

#666633

#CCCC33

#CC3366

忠実で安定していて味わい深い

明度や彩度が低い色は、人に忠誠心や安定感を与えます。色が保守的になりすぎてページが硬直的でネガティブになるのを防ぐために、そのような組み合わせでは、寒さと暖かさの組み合わせ、および明暗のコントラストに注意を払う必要があります。

#FFFFCC

#CC9933

#336666

#996633

#CCCC33

#336633

#990033

#FFCC99

#333366

#669999

#996600

#993333

#CC9966

#003300

#336633

#CCCC99

#333366

#663300

#999933

#333333

#663366

#666666

#333366

#999900

#990033

#CC99CC

#333366

#990033

#CCCCCC

シンプル、クリーン、進歩的

シンプルでクリーンな色は、白の広い領域を残して、青と緑の色合いで表現できます。より多くの青を使用し、低彩度またはグレーと組み合わせることで、進歩の印象を与えることができます。

#CCCCCC

#FFFFFF

#666699

#CCFF66

#FFFFFF

#003366

#99CCFF

#FFFFFF

#336699

#CCCC33

#FFFFFF

#336699

#0099FF

#FFFFCC

#666699

#99CC33

#CCCCCC

#000000

#CCCCCC

#003366

#99CCFF

#0099CC

#CCFF66

#666666

#3399CC

#003366

#CCCCCC

#ABCDEF

シンプル、ファッショナブル、エレガント

グレーは最もバランスのとれた色であり、プラスチックや金属のテクスチャの主要な色の 1 つであるため、エレガントさとファッションを表現するために適切に使用することも、広い領域に使用することもできます。ただし、パターンとテクスチャの構築には注意してください。

#99CCFF

#FFFF66

#666666

#336666

#FFFFFF

#999999

#0099CC

#FFFFFF

#666666

#999999

#CCCCCC

#336666

#CCCCCC

#999999

#663366

#666666

#CCCCCC

#6699CC

#999999

#FFFFFF

#333366

#669999

#CCCCCC

#666666

#999999

#CCCCCC

#333333

#ABCDEF

シンプル、先進的、ファッショナブル

進歩を表す色は主に青で、グレーと組み合わせられます。色の明るさが統一され、色相が隣接し、シンプルに見えます。

#333366

#99CC33

#336699

#999999

#003366

#669999

#003399

#CCFF99

#333333

#999933

#336699

#333333

#666666

#99CC33

#003366

#999999

#336699

#333333

#3366CC

#CCCC66

#333300

#6699CC

#006699

#000000

#003366

#CCCCCC

#006699

#000000

#999999

#003366

√ 已复制