HTML色コード一覧と使い方｜基本カラーからアクセシビリティ配慮まで徹底解説

Webページの色って、どうやって決めているのか気になったことありませんか？
「この文字の赤、どうやってつけてるの？」「背景の青ってどこで設定するの？」と迷うことってよくありますよね。

この記事では、HTMLで使われる色コードの種類や使い方をわかりやすく紹介します。

どんなコードで色を指定するのか、どこに書けば色がつくのか、はじめての人でもしっかり理解できるようにまとめました。

色コードの使い方が分かれば、自分の作ったWebページをもっと見やすく、かっこよくデザインできるようになりますので、ぜひ最後まで読んでみてください。

HTML色コードとは？基本の仕組みと種類を理解しよう

HTML色コードの基本構造

HTML色コードとは、Webページの文字や背景に色をつけるためのコードです。

色を数値や文字で表現し、HTMLやCSSに指定することで、デザインに色を加えることができます。

見た目の印象を大きく左右するため、しっかりと理解することが大切です。

HTMLで使える主な色指定の方法は以下の3つです。

このように、色はさまざまな形式で指定できますが、どの形式でも同じ色を表すことが可能です。

中でも16進数コードはよく使われるので、覚えておくと便利です。

RGBカラーコードとは

RGBカラーコードとは、赤（Red）、緑（Green）、青（Blue）の3つの色の光を混ぜて色を表現する方法です。

各色は0から255の数値で表され、組み合わせによってさまざまな色を作ることができます。

以下に基本的な使い方を紹介します。

RGBの特徴は、色の明るさや濃さを細かく調整できることです。

Webデザインで自由に色をコントロールしたいときにとても役立ちます。

16進数カラーコード（HEX）の特徴

16進数のカラーコードは、「#」から始まり、6桁の英数字で構成される色指定方法です。

RGBの値をそれぞれ16進数に変換して使います。

たとえば、赤は#ff0000、緑は#00ff00、青は#0000ffとなります。

HEXコードの基本構造を整理すると次のようになります。

このコードはWeb上で広く使われており、CSSの中でも最も一般的な色指定方法です。

色を簡単にコピー・共有できるのも便利なポイントです。

色名（カラー名）で指定する方法

HTMLやCSSでは、英語の色名を直接書いて色を指定することもできます。

これを「色名指定」と呼びます。

たとえば、赤はred、青はblue、黄色はyellowのように書くだけで色が反映されます。

使える代表的な色名を以下にまとめます。

色名は覚えやすく、簡単に使えるという利点がありますが、使える色の種類が限られているため、細かいデザインには向いていません。

CSSでの色指定の基本

HTMLで色をつけるには、基本的にCSSを使って指定します。

CSSでは、colorプロパティで文字色を、background-colorで背景色を指定できます。

次のような記述が基本になります。

p { color: red; background-color: #f0f0f0; }

色指定の方法は複数ありますが、以下のようなケースがよく使われます。

色の指定はWebサイトの雰囲気を決める重要な要素です。

見やすさや印象を左右するため、適切な使い方が求められます。

RGBAやHSLAなどの拡張表現

RGBやHEXのほかに、透明度を指定できる「RGBA」や「HSLA」という形式もあります。

これらは背景を少し透かしたいときや、色の彩度や明度を調整したいときに便利です。

たとえば、次のように使います。

このように、RGBAとHSLAはデザインに柔軟性を持たせるのに最適な方法です。

色を細かく調整したい場合には積極的に活用しましょう。

色コードとWebブラウザの対応状況

HTMLで指定する色コードは、基本的にどのモダンブラウザでも問題なく表示されます。

ただし、古いブラウザでは一部の表現に対応していないことがあります。

とくにRGBAやHSLAなどの新しい形式は、古いバージョンでは正しく表示されない可能性があります。

安心して使える色指定の形式は次のとおりです。

基本的には最新のブラウザを使っていれば心配ありませんが、幅広いユーザーに向けて表示する場合は対応状況を確認しておくことが大切です。

HTML色コード一覧：よく使うカラーと視認性の高い組み合わせ

Webデザインでよく使われる定番カラー

Webデザインでは、見た目の美しさやユーザーの操作のしやすさを考えて、よく使われる色があります。

これらの色は、読みやすさや印象のよさに影響を与えるため、基本として知っておくととても便利です。

代表的な定番カラーは以下のとおりです。

これらの色を使い分けることで、見やすくてわかりやすいWebページが作れます。

背景色と文字色の見やすい組み合わせ

文字と背景の色の組み合わせは、読みやすさにとってとても大事です。

色の選び方を間違えると、文字が読みにくくなり、ユーザーがページを見るのをやめてしまうこともあります。

読みやすい組み合わせの例は次のとおりです。

背景と文字のコントラストが高いほど読みやすくなります。

とくに高齢の方や視力の弱い方にも配慮したい場合は、コントラスト比をしっかり確認してから色を決めましょう。

ボタンやリンクに適した色コード

ボタンやリンクには、目立つ色や行動を促す色を使うのが効果的です。

ユーザーの視線を誘導したり、クリックを促したりするために、適切な色を選びましょう。

次に、よく使われる色コードを紹介します。

ボタンの色を選ぶときは、背景とのコントラストやサイト全体のデザインとの調和も考えると、より見やすくわかりやすいページになります。

アクセシビリティを考慮した色選び

アクセシビリティとは、誰でも使いやすいWebサイトを作るための考え方です。

色の見え方には個人差があり、特に色覚に特徴がある人にとって、配色が適切でないと情報が伝わりにくくなります。

アクセシビリティに配慮した色選びのポイントは以下のとおりです。

ユーザーの立場に立って、すべての人が読みやすい・使いやすい色づかいを心がけることが大切です。

モバイル対応に強いカラーパレット

スマートフォンやタブレットでは、画面が小さいため、色の使い方に工夫が必要です。

モバイルでは操作性と視認性が重視されるので、色数を絞って、はっきりとした配色にするのがポイントです。

モバイル対応におすすめのカラーパレットを紹介します。

カラーパレットを事前に決めておくと、どのデバイスでも統一感が出て見た目も美しく、操作しやすいサイトになります。

トレンドカラーや最新の配色例

毎年のように流行するWebデザインのカラーには特徴があります。

トレンドカラーを使うことで、時代に合ったおしゃれな印象のサイトにすることができます。

最近注目されている配色の例は以下のとおりです。

トレンドカラーは使いすぎると逆に見にくくなることもあるので、アクセントとして取り入れるのがおすすめです。

全体のバランスを意識しながら取り入れましょう。

カラーコード一覧表（HEX/RGB/色名）

Web制作でよく使うカラーコードをすぐに見られるように、一覧表としてまとめておくと作業がスムーズになります。

以下は代表的な色をHEX・RGB・色名で表したものです。

このように色コードの一覧を把握しておくと、目的に合った色をすぐに選べて作業効率が上がります。

コピペして使えるようにブックマークしておくと便利です。

HTMLで色コードを使う方法と実装のコツ

style属性での直接指定

HTMLタグに直接色を指定する方法として、style属性を使う方法があります。

これは、HTMLタグの中に書き込んで、すぐに色を適用できるシンプルなやり方です。

とくに少量のHTMLで色を試したいときなどに便利です。

使い方の基本は以下のとおりです。

<p style="color: red;">赤い文字です</p>

以下に、よくある色の指定方法を紹介します。

この方法は手軽でわかりやすいですが、たくさん使うとHTMLがごちゃごちゃになってしまいます。

小規模な調整用に使うのが基本です。

外部CSSファイルで色を管理する

HTMLの中ではなく、別のファイルにスタイルをまとめる方法が「外部CSSファイルの利用」です。

色をたくさん使うページでは、この方法を使うことでデザインの統一性や編集のしやすさが大きく向上します。

使い方はとてもシンプルです。

<link rel="stylesheet" href="style.css">

そしてCSSファイルの中に以下のように書きます。

body { background-color: #f0f0f0; }

外部CSSで色を指定するメリットは次のとおりです。

Webサイト全体の管理を楽にしたい場合には、外部CSSの活用が最もおすすめです。

クラス名で色を統一する方法

Webページで同じ色を何度も使う場合は、クラス名を使って指定するととても便利です。

クラスを使うことで、複数のタグに一括でスタイルを適用できます。

まずCSSにクラスを定義します。

.text-red { color: red; }
.bg-blue { background-color: #007bff; }

そしてHTMLに以下のように書きます。

<div class="text-red">赤い文字</div>

クラス名で色を統一する利点は以下のとおりです。

この方法を使えば、効率よく色指定ができて、修正や更新もすばやく行えます。

レスポンシブ対応時の色設定

スマホやタブレットなど、さまざまな画面サイズに合わせたデザインをするときには、色の指定にも工夫が必要です。

画面サイズによって色を変えたり、表示方法を変えたりするには、メディアクエリを使います。

基本の書き方は以下のとおりです。

@media (max-width: 768px) { body { background-color: #eeeeee; } }

このようにすることで、スマホのときだけ背景色を変えることができます。

よくある対応パターンは以下のとおりです。

レスポンシブデザインでは、見やすさと使いやすさを両立させるために、色使いにも柔軟さが求められます。

インラインスタイルとCSSの使い分け

HTMLで色をつけるとき、「インラインスタイル」と「CSSクラス」のどちらを使うか迷うことがあります。

それぞれにメリットがありますので、使い分けのコツを知っておきましょう。

以下のように整理するとわかりやすいです。

たとえば、<span style="color: red;">赤文字</span>はすぐに色が出せますが、数が多くなると管理が大変になります。

使う状況に応じて、「簡単さ」と「効率の良さ」のバランスを考えることがポイントです。

グラデーションや透明度の設定

Webデザインにアクセントを加える方法として、グラデーションや透明色を使うテクニックがあります。

これらはCSSで簡単に表現でき、背景やボタンなどの見た目をきれいにできます。

以下はグラデーションの基本的な書き方です。

background: linear-gradient(to right, #ff7e5f, #feb47b);

そして透明度のある色はrgba形式を使います。

background-color: rgba(255, 0, 0, 0.5);

活用シーンの例を紹介します。

グラデーションや透明度をうまく使うことで、プロっぽい美しいデザインが実現できます。

HTMLタグ別の色適用のポイント

HTMLのタグには、それぞれに合った色指定のポイントがあります。

たとえば、見出しタグと本文タグでは色の与える印象が違うので、タグごとに考えて色をつける必要があります。

具体的には以下のように使い分けると効果的です。

タグの役割に合った色指定をすることで、ユーザーにとってわかりやすく、直感的に使えるWebページを作ることができます。

色コード活用の注意点とおすすめツール

配色による印象の違い

Webページの配色は、見る人に与える印象を大きく左右します。

色にはそれぞれ意味や心理的な効果があるため、目的に応じて使い分けることが大切です。

たとえば、青は信頼感を与え、赤は強い注意を引きます。

よく使われる色とその印象は以下のとおりです。

このように、色には「気持ちを動かす力」があります。

サイトの目的やターゲットに合った色を使うことで、伝えたいことがより伝わりやすくなります。

色覚バリアフリーの考慮点

誰もが見やすく使いやすいWebサイトを目指すには、色覚バリアフリーを意識することがとても大切です。

特定の色が見分けにくい人もいるため、色だけに頼らず、形や文字でも情報を伝える工夫が必要です。

色覚に配慮した配色をするためのポイントを紹介します。

すべての人がストレスなく使えるサイトを作るために、見え方の違いを想像することが重要です。

コントラスト比チェックの重要性

文字と背景の色の違い（コントラスト比）が小さいと、文字が読みづらくなってしまいます。

とくに高齢者や視力の弱い人にとっては深刻な問題になります。

そのため、WCAG（Web Content Accessibility Guidelines）に基づいたコントラスト比のチェックがとても重要です。

目安とされる基準は以下のとおりです。

コントラスト比を確認するためのおすすめツールもあります。

チェックを怠ると、せっかくのデザインが「見えにくい」だけで終わってしまいます。

必ず確認するようにしましょう。

配色ミスを防ぐチェックポイント

Webデザインでありがちな配色のミスは、見た目が派手すぎたり、読みにくかったりすることです。

ミスを防ぐには、いくつかの基本的なルールを覚えておくと安心です。

次のチェックポイントを意識しましょう。

基本を守るだけで、統一感のある、見やすいデザインになります。

色の選び方ひとつで印象が大きく変わるので、丁寧に確認しましょう。

便利なカラーコード生成ツール

自分で色を決めるのがむずかしいときや、見た目のバランスが気になるときには、カラーコードを自動で作ってくれるツールを使うのが便利です。

色の組み合わせを提案してくれるものもあり、初心者にも使いやすいです。

おすすめのツールをいくつか紹介します。

こういったツールを使えば、時間をかけずにプロのような配色が実現できます。

迷ったときはぜひ活用しましょう。

カラーパレット作成のオンラインサービス

カラーパレットとは、Webデザインに使う色のセットのことです。

全体の雰囲気を決めたり、ブランドイメージを統一するために、とても大切な役割を果たします。

オンラインで作成できるサービスを使うと、見た目と機能を両立した配色が簡単に作れます。

おすすめのオンラインサービスは以下のとおりです。

カラーパレットを最初にしっかり作っておくと、ページごとのデザインが統一され、見た目も整いやすくなります。

実践に使える配色見本サイト

配色に悩んだときは、すでに作られている配色の例を参考にするととても役立ちます。

プロが作った配色を真似することで、実際に使えるデザインの感覚を身につけることができます。

実用的な配色見本が見られるサイトを紹介します。

見本サイトは実際のWebサイトやアプリに近い感覚で色を選べるので、とても参考になります。

手軽にセンスのいい配色を取り入れるために、ぜひ活用してみましょう。

まとめ

HTMLの色コードは、Webサイトの見た目やわかりやすさを大きく左右する大切なポイントです。

今回紹介した内容をしっかり押さえておくことで、もっと伝わるデザインが作れるようになります。

最後に、大事なポイントをもう一度まとめます。

まずはひとつの色からでも使ってみて、自分のサイトやページをもっと見やすくてカッコよく変えてみましょう！