ウェブ用カラーネーム・HEX値一覧とホームページ制作における配色の重要性

ホームページ制作 Color Name ウェブ用カラー

ホームページ（ウェブサイト）を制作・作成する際に、CSSで指定することのできるウェブ用カラーネームとHEX値（16進法で表現された色の値）の一覧になります。

詳細で表示色とカラーネーム・HEXの確認をしていただけます。
モニタの解像度やブラウザ種類などで正確に表現できない場合があります。

Color name & HEX 1 red～darkorange

Color name & HEX 1 red～darkorange

ウェブ用カラーの一覧（red～darkorange）です。ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。

red　crimson　firebrick　maroon　darkred　brown　sienna
saddlebrown　indianred　rosybrown　lightcoral　salmon　darksalmon
coral　tomato　sandybrown　lightsalmon　peru　chocolate
orangered　orange　darkorange

ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。
「カラーネーム」と呼ばれる「red」などの色の名前とHEX値（16進法）でのカラーの表示例を記載しています。

red
#FF0000

crimson
#DC143C

firebrick
#B22222

maroon
#800000

darkred
#8B0000

brown
#A52A2A

sienna
#A0522E

saddlebrown
#8B4513

indianred
#CD5C5C

rosybrown
#BC8F8F

lightcoral
#F08080

salmon
#FA8072

darksalmon
#E9967A

coral
#FF7F50

tomato
#FF6347

sandybrown
#F4A460

lightsalmon
#FFA07A

peru
#CD853F

chocolate
#D2691E

orangered
#FF4500

orange
#FFA500

darkorange
#FF8C00

Color name & HEX 2 tan～yellow～darkkhaki

Color name & HEX 2 tan～yellow～darkkhaki

ウェブ用カラーの一覧（tan～yellow～darkkhaki）です。ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。

tan　peachpuff　bisque　moccasin　navajowhite　wheat　burlywood　darkgoldenrod　goldenrod
gold　yellow　lightgoldenrodyellow　palegoldenrod　khaki　darkkhaki

ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。
「カラーネーム」と呼ばれる「yellow」などの色の名前とHEX値（16進法）でのカラーの表示例を記載しています。

tan
#D2B48C

peachpuff
#FFDAB9

bisque
#FFE4C4

moccasin
#FFE4B5

navajowhite
#FFDEAD

wheat
#F5DEB3

burlywood
#DEB887

darkgoldenrod
#B8860B

goldenrod
#DAA520

gold
#FFD700

yellow
#FFFF00

lightgoldenrodyellow
#FAFAD2

palegoldenrod
#EEE8AA

khaki
#F0E68C

darkkhaki
#BDB76B

Color name & HEX 3 lawngreen～green～cadetblue

Color name & HEX 3 lawngreen～green～cadetblue

ウェブ用カラーの一覧（lawngreen～green～cadetblue）です。ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。

lawngreen　greenyellow　chartreuse　lime　limegreen　yellowgreen　olive
olivedrab　darkolivegreen　forestgreen　darkgreen　green　seagreen　mediumseagreen
darkseagreen　lightgreen　palegreen　springgreen　mediumspringgreen　teal
darkcyan　lightseagreen　mediumaquamarine　cadetblue

ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。
「カラーネーム」と呼ばれる「green」など色の名前とHEX値（16進法）でのカラーの表示例を記載しています。

lawngreen
#7CFC00

greenyellow
#ADFF2F

chartreuse
#7FFF00

lime
#00FF00

limegreen
#32CD32

yellowgreen
#9ACD32

olive
#808000

olivedrab
#6B8E23

darkolivegreen
#556B2F

forestgreen
#228B22

darkgreen
#006400

green
#008000

seagreen
#2E8B57

mediumseagreen
#3CB371

darkseagreen
#8FBC8F

lightgreen
#90EE90

palegreen
#98FB98

springgreen
#00FF7F

mediumspringgreen
#00FA9A

teal
#008080

darkcyan
#008B8B

lightseagreen
#20B2AA

mediumaquamarine
#66CDAA

cadetblue
#5F9EA0

Color name & HEX 4 steelblue～cyan～blue～mediumslateblue

Color name & HEX 4 steelblue～cyan～blue～mediumslateblue

ウェブ用カラーの一覧（steelblue～cyan～blue～mediumslateblue）です。ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。

steelblue　aquamarine　powderblue　paleturquoise　lightblue　lightsteelblue
skyblue　lightskyblue　mediumturquoise　turquoise　darkturquoise　aqua
cyan　deepskyblue　dodgerblue　cornflowerblue　royalblue
blue　mediumblue　navy　darkblue　midnightblue　darkslateblue
slateblue　mediumslateblue

ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。
「カラーネーム」と呼ばれる「blue」などの色の名前とHEX値（16進法）でのカラーの表示例を記載しています。

steelblue
#4682B4

aquamarine
#7FFFD4

powderblue
#B0E0E6

paleturquoise
#AFEEEE

lightblue
#ADD8E6

lightsteelblue
#B0C4DE

skyblue
#87CEEB

lightskyblue
#87CEFA

mediumturquoise
#48D1CC

turquoise
#40E0D0

darkturquoise
#00CED1

aqua
#00FFFF

cyan
#00FFFF

deepskyblue
#00BFFF

dodgerblue
#1E90FF

cornflowerblue
#6495ED

royalblue
#4169E1

blue
#0000FF

mediumblue
#0000CD

navy
#000080

darkblue
#00008B

midnightblue
#191970

darkslateblue
#483D8B

slateblue
#6A5ACD

mediumslateblue
#7868EE

Color name & HEX 5 mediumpurple～magenta～mistyrose

Color name & HEX 5 mediumpurple～magenta～mistyrose

ウェブ用カラーの一覧（mediumpurple～magenta～mistyrose）です。ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。

mediumpurple　darkorchid　darkviolet　blueviolet　mediumorchid　plum
lavender　thistle　orchid　violet　indigo　darkmagenta
purple　mediumvloletred　deeppink　magenta　fuchsia
hotpink　palevioletred　lightpink　pink　mistyrose

ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。
「カラーネーム」と呼ばれる「magenta」などの色の名前とHEX値（16進法）でのカラーの表示例を記載しています。

mediumpurple
#9370DB

darkorchid
#9932CC

darkviolet
#9400D3

blueviolet
#8A2BE2

mediumorchid
#BA55D3

plum
#DDA0DD

lavender
#E6E6FA

thistle
#D8BFD8

orchid
#DA70D6

violet
#EE82EE

indigo
#4B0082

darkmagenta
#8B008B

purple
#800080

mediumvloletred
#C71585

deeppink
#FF1493

magenta　fuchsia
#FF00FF

hotpink
#FF69B4

palevioletred
#DB7093

lightpink
#FFB6C1

pink
#FFC0CB

mistyrose
#FFE4E1

Color name & HEX 6 mistyrose～beige～snow

Color name & HEX 6 mistyrose～beige～snow

ウェブ用カラーの一覧（mistyrose～beige～snow）です。ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。

mistyrose　blanchedalmond　lightyellow　cornsilk　antiquewhite　papayawhip　lemonchiffon
beige　linen　oldlace　lightcyan　aliceblue　whitesmoke　lavenderblush
floralwhite　mintcream　ghostwhite　honeydew　seashell　ivory　azure　snow

ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。
「カラーネーム」と呼ばれる「beige」などの色の名前とHEX値（16進法）でのカラーの表示例を記載しています。

mistyrose
#FFE4E1

blanchedalmond
#FFEBCD

lightyellow
#FFFFE0

cornsilk
#FFF8DC

antiquewhite
#FAEBD7

papayawhip
#FFEFD5

lemonchiffon
#FFFACD

beige
#F5F5DC

linen
#FAF0E6

oldlace
#FDF5E6

lightcyan
#E0FFFF

aliceblue
#F0F8FF

whitesmoke
#F5F5F5

lavenderblush
#FFF0F5

floralwhite
#FFFAF0

mintcream
#F5FFFA

ghostwhite
#F8F8FF

honeydew
#F0FFF0

seashell
#FFF5EE

ivory
#FFFFF0

azure
#F0FFFF

snow
#FFFAFA

mistyrose～beige～snow background=gainsboro

Color name & HEX 7 white～gray～black

Color name & HEX 7 white～gray～black

ウェブ用カラーの一覧（white～gray～black）です。ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。

white　gainsboro　lightgrey　silver　darkgray　lightslategray
Slategray　gray　dimgray　darkslategray　black

ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。
「カラーネーム」と呼ばれる「gray」などの色の名前とHEX値（16進法）でのカラーの表示例を記載しています。

white
#FFFFFF

gainsboro
#DCDCDC

lightgrey
#D3D3D3

silver
#C0C0C0

darkgray
#A9A9A9

lightslategray
#778899

Slategray
#708090

gray
#808080

dimgray
#696969

darkslategray
#2F4F4F

black
#000000

ウェブ用カラーネーム　フォントサイズ20px
背景 白・シルバー・黒

文字の幅は狭いため、背景色の設定やボーダー色の設定に比べて色が薄く見えやすく、
また、背景色による影響もあるため、背景色を3パターン(白・シルバー・黒)ご用意しました。
こちらはフォントサイズ20pxで表示しています。

背景白 ウェブ用カラーネームとHEX値

Color name & HEX font-size 20px 背景色 white

ウェブ用カラーの一覧（背景白 ウェブ用カラーネームとHEX値）です。

ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色・フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。

ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。このページでは、背景色とフォント色の関係の確認のために、フォントサイズ20pxで、フォントを「カラーネーム」、「HEX値（16進法）」でカラー表示例を記載しています。

文字の幅は狭いため、背景色の設定やボーダー色の設定に比べて色が薄く見えやすく、また、背景色による影響もあるため、背景色を3パターン(白・シルバー・黒)ご用意しました。
こちらはフォントサイズ20pxで表示しています。

このセクションでは背景色「白」で表示しています。

white
#FFFFFF

floralwhite
#FFFAF0

mintcream
#F5FFFA

ghostwhite
#F8F8FF

honeydew
#F0FFF0

seashell
#FFF5EE

ivory
#FFFFF

0azure
#F0FFFF

snow
#FFFAFA

背景黒 ウェブ用カラーネームとHEX値

Color name & HEX font-size 20px 背景色 black

ウェブ用カラーの一覧（背景黒 ウェブ用カラーネームとHEX値）です。

ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。

ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。このページでは、背景色とフォント色の関係の確認のために、フォントサイズ20pxで、フォントを「カラーネーム」、「HEX値（16進法）」でカラー表示例を記載しています。

文字の幅は狭いため、背景色の設定やボーダー色の設定に比べて色が薄く見えやすく、また、背景色による影響もあるため、背景色を3パターン(白・シルバー・黒)ご用意しました。
こちらはフォントサイズ20pxで表示しています。

このセクションでは背景色「黒」で表示しています。

black
#000000

背景シルバー ウェブ用カラーネームとHEX値

Color name & HEX font-size 20px 背景色 silver

ウェブ用カラーの一覧（背景シルバー ウェブ用カラーネームとHEX値）です。

ホームページ（ウェブサイト）を制作する際に、画像を用いず枠線や背景色フォント色などを指定する際に使用する、ウェブ用カラーネーム、HEX値です。

ウェブページにおいて、CSSなどで指定する色の装飾の際のサンプルです。このページでは、背景色とフォント色の関係の確認のために、フォントサイズ20pxで、フォントを「カラーネーム」、「HEX値（16進法）」でカラー表示例を記載しています。

文字の幅は狭いため、背景色の設定やボーダー色の設定に比べて色が薄く見えやすく、また、背景色による影響もあるため、背景色を3パターン(白・シルバー・黒)ご用意しました。
こちらはフォントサイズ20pxで表示しています。

このセクションでは背景色「シルバー」で表示しています。

silver
#C0C0C0

ホームページ（ウェブサイト）における配色の重要性

カラーコードの一覧を活用してホームページ（ウェブサイト）を制作する際、単に好みの色を並べるだけでなく、戦略的な配色を行うことが非常に重要です。デザインにおける色は、ホームページ（ウェブサイト）を訪れたユーザーが最初に受け取る視覚情報であり、サイト全体の印象を瞬時に決定づけます。より専門的には、色は言語化される前の直感的な部分に働きかけるため、企業が伝えたいメッセージを無意識のうちにユーザーへ届ける役割を持っています。ここでは、Webマーケティングやユーザビリティの観点から、ホームページ（ウェブサイト）における配色が果たす役割について詳しく解説します。

色がユーザー心理に与える影響

色はそれぞれ固有の心理的効果や連想させるイメージを持っており、ユーザーの感情や行動に直接働きかけます。例えば青色であれば信頼感や誠実さ、清潔感を連想させることが多いため、企業のコーポレートサイトや医療機関のホームページ（ウェブサイト）でよく採用されます。赤色であれば情熱や活気、緊急性を感じさせるため、セール情報や期間限定のキャンペーンページに効果的です。緑色は安心感や自然、調和を表すため、環境関連の事業活動やリラクゼーションサロンなどに適しています。ホームページ（ウェブサイト）の目的に合わせてベースとなる色を選ぶことで、ユーザーに対してどのような印象を持ってもらいたいかを意図的にコントロールすることができます。ターゲットとなる顧客層が抱く期待感と、サイトの配色を一致させることが集客において効果を発揮します。

コーポレートカラーとブランドイメージの統一

企業や店舗には、ロゴマークや看板、名刺などで日常的に使用されているコーポレートカラーが存在するはずです。ホームページ（ウェブサイト）を制作する際も、このコーポレートカラーを基準に全体の配色を決定することで、ブランドイメージに強い一貫性が生まれます。ウェブ上の接点でも、実店舗や紙媒体のパンフレットと全く同じ色合いを使用することで、ユーザーの記憶に残りやすくなります。視覚的な統一感は、企業に対する信頼感や安心感を醸成するための基盤となります。カラーコード一覧を参照しながら、自社のブランドカラーに最も近いHEX値を正確に指定し、ブレのないブランド発信を行っていくことが重要です。

ユーザビリティを高めるコントラストと視認性

ホームページ（ウェブサイト）は、美しいだけでなく、情報が読みやすくユーザーが迷わずに操作できることが大前提となります。背景色と文字色のコントラストが低いと、文章が非常に読みにくくなり、ユーザーがストレスを感じてすぐにページから離脱してしまう原因になります。特にスマートフォンなどの小さな画面や、屋外の明るい場所で閲覧されることが多い現在では、明確なコントラストを持たせて視認性を高める工夫が必要です。背景には白や非常に薄い色を使い、文字には濃いグレーや黒を使用するなど、コンテンツの読みやすさを最優先に配色を設計します。重要な情報が確実に伝わるように、背景と文字の明度差を意識して色を選択することが大切です。

Webマーケティング効果を高めるカラー戦略

配色は、単なるデザインの表面的な美しさにとどまらず、ホームページ（ウェブサイト）が持つ集客力や成約率にも大きな影響を与えます。適切に色を配置し、視線の誘導を行うことで、ユーザーの行動を促し、Webマーケティングの成果を最大化することが可能になります。

コンバージョンを促すアクセントカラーの活用

お問い合わせボタンや資料請求ボタン、商品の購入ボタンなど、ユーザーにアクションを起こしてほしい重要な箇所には、サイト全体の配色とは対照的な「アクセントカラー」を使用します。ボタンが周囲の色と同化してしまうと、そもそもボタンの存在に気づかれない可能性があります。全体を落ち着いた色調でまとめつつ、目立たせたい部分にオレンジや緑、赤などの目を引く色をピンポイントで配置することで、ユーザーの視線を自然に誘導することができます。この視覚的なメリハリによって、クリック率やコンバージョン率が大きく向上するかもしれません。

ターゲット層に合わせた配色デザイン

ホームページ（ウェブサイト）を訪れるユーザーの年齢層や性別、ライフスタイルによっても、好まれる配色は異なります。若い女性向けの商品やサービスを扱うサイトであれば、明るく柔らかなパステルカラーが好まれる傾向にあります。一方で、中高年の男性向けの事業やBtoB向けのサービスであれば、落ち着いたダークトーンや重厚感のある配色を用いることで、専門性や信頼を集めやすくなります。自社の製品やサービスを誰に届けたいのかというターゲット像を明確にし、そのターゲット層が心地よいと感じる色合いを選択することが、ページ滞在時間の延長やリピート訪問に繋がります。

色の使いすぎを防ぐシンプルな構成

ホームページ（ウェブサイト）内に様々な色を使いすぎると、画面全体が雑然とした印象になり、どこに重要な情報があるのかわからなくなってしまいます。配色の基本として、全体の70%程度を占める「ベースカラー」、25%程度を占める「メインカラー」、そして5%程度の「アクセントカラー」という3つの色に絞り込むと、まとまりのある美しいデザインに仕上がります。カラーネームやHEX値のリストを眺めていると色々な色を使いたくなるかもしれませんが、この法則を意識して色数を抑えることで、より洗練され、情報が伝わりやすいホームページ（ウェブサイト）を構築できます。

ホームページのCSS・スタイルシート編集方法

ホームページ制作やホームページ修正を行う際のCSS・スタイルシート編集方法について。ホームページは基本的にHTMLで構成されています。一方、その外観・デザインを設定するのはCSS（Cascading Style Sheets）・スタイルシートです。ページの基本構成はHTMLで、レイアウトやカラーの設定といった外観面はCSSで設定されています。

ホームページのCSS・スタイルシート編集方法

⇒Web制作 Reference Index（一覧）へ

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ

ホームページ制作 京都のWeb制作会社
株式会社ファンフェアファンファーレ