🔰
🎨 Webデザイン初心者必見！よく使われる人気カラー50選【保存版】
「どんな色を使えば、見やすくておしゃれなWebサイトになるんだろう…？」
そんな悩みを持つWebデザイン初心者のあなたへ。
色選びは、Webサイトの印象を大きく左右する大事なポイントです。信頼感のある青、やさしい印象を与えるベージュ、目を引く赤など、色にはそれぞれ「感情に訴えかける力」があります。
この記事では、実際のWeb制作現場でもよく使われている「人気カラー50色」をランキング形式で紹介します。
それぞれの色にはカラーコード（#ffffff のような形式）も付けているので、コピペでそのまま使えて便利！
初心者の方でも分かりやすく、すぐに役立つ内容にしているので、これからWebサイトを作る人も、デザインを見直したい人も、ぜひ最後までご覧ください。
| 順位 | 色名 | 16進数カラーコード | 表示 |
|---|---|---|---|
| 1 | ホワイト | #ffffff |
 |
| 2 | ブラック | #000000 |
 |
| 3 | ネイビーブルー | #000080 |
 |
| 4 | ロイヤルブルー | #4169E1 |
 |
| 5 | スカイブルー | #87CEEB |
 |
| 6 | ライトグレー | #D3D3D3 |
 |
| 7 | グレー | #808080 |
 |
| 8 | ダークグレー | #A9A9A9 |
 |
| 9 | レッド | #FF0000 |
 |
| 10 | ダークレッド | #8B0000 |
 |
| 11 | オレンジ | #FFA500 |
 |
| 12 | ダークオレンジ | #FF8C00 |
 |
| 13 | ゴールド | #FFD700 |
 |
| 14 | イエロー | #FFFF00 |
 |
| 15 | ライトイエロー | #FFFFE0 |
 |
| 16 | グリーン | #008000 |
 |
| 17 | ライトグリーン | #90EE90 |
 |
| 18 | ダークグリーン | #006400 |
 |
| 19 | シアン | #00FFFF |
 |
| 20 | ターコイズ | #40E0D0 |
 |
| 21 | ティール | #008080 |
 |
| 22 | パープル | #800080 |
 |
| 23 | バイオレット | #EE82EE |
 |
| 24 | インディゴ | #4B0082 |
 |
| 25 | ピンク | #FFC0CB |
 |
| 26 | ホットピンク | #FF69B4 |
 |
| 27 | ディープピンク | #FF1493 |
 |
| 28 | ブラウン | #A52A2A |
 |
| 29 | チョコレート | #D2691E |
 |
| 30 | タン | #D2B48C |
 |
| 31 | ベージュ | #F5F5DC |
 |
| 32 | アイボリー | #FFFFF0 |
 |
| 33 | シルバー | #C0C0C0 |
 |
| 34 | ミッドナイトブルー | #191970 |
 |
| 35 | スチールブルー | #4682B4 |
 |
| 36 | コーラル | #FF7F50 |
 |
| 37 | サーモン | #FA8072 |
 |
| 38 | トマト | #FF6347 |
 |
| 39 | ペルー | #CD853F |
 |
| 40 | オリーブ | #808000 |
 |
| 41 | シーフォームグリーン | #2E8B57 |
 |
| 42 | スレートグレー | #708090 |
 |
| 43 | ライトスレートグレー | #778899 |
 |
| 44 | ダークスレートグレー | #2F4F4F |
 |
| 45 | ラベンダー | #E6E6FA |
 |
| 46 | ミントクリーム | #F5FFFA |
 |
| 47 | アクアマリン | #7FFFD4 |
 |
| 48 | アリスブルー | #F0F8FF |
 |
| 49 | アズール | #F0FFFF |
 |
| 50 | ホワイトスモーク | #F5F5F5 |
 |
Discussion