HTML色指定の基本とカラーコード一覧｜使い方からアクセシビリティ対応まで

Webページを作っていると、「この文字の色を変えたい」「背景にやさしい色をつけたい」って思うこと、ありますよね。

でも、色の指定方法ってたくさんあって、どれを使えばいいか迷ってしまう人も多いと思います。

この記事では、HTMLやCSSで色を指定する方法についてわかりやすく紹介していきます。

16進数・RGB・HSLなどの色指定方法から、よく使うカラーコード、デザインに役立つ配色のコツまで、しっかりまとめました。

色の指定方法が分かれば、見た目がきれいで読みやすいWebページが作れるようになりますので、ぜひ最後まで参考にしてください。

HTMLで色を指定する基本の方法

style属性によるインライン指定

HTMLでは、タグに直接色を指定できる「style属性」があります。

これはHTML初心者にとって最もシンプルでわかりやすい方法です。

以下のように、タグの中に直接書いて使います。

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

この方法では、色の指定と一緒に他のCSSも同時に記述できます。

style属性を使って色を指定する時のポイントは以下の通りです。

この方法は簡単ですが、たくさんの場所で使うと管理が難しくなるので注意が必要です。

CSSを使った色指定の基本

色指定は、HTMLだけでなくCSS（スタイルシート）を使ってより効率的に行えます。

特に複数の要素に共通して色を適用する場合、CSSを使うことで見やすく整理されたコードになります。

以下に、CSSを使った基本的な色指定方法を紹介します。

例えば、以下のようにCSSで文字色を指定できます。


p { color: blue; }


CSSを使うことで、Webページ全体のデザインをスッキリ管理できるようになります。

背景色（background-color）の指定方法

HTMLでは、文字色だけでなく背景色も自由に変えることができます。

背景色を変えることで、文字を目立たせたり、デザインにメリハリをつけたりできます。

背景色の指定は、以下のように書きます。

<div style="background-color: yellow;">背景が黄色のボックス</div>

背景色を指定する時のポイントは以下の通りです。

背景色を上手に使うと、見た目にインパクトを出すことができます。

文字色（color）の指定方法

HTMLでは、文字そのものの色を「color」プロパティで指定できます。

見出しや本文、リンクなど、それぞれに合った色を設定することで、情報の整理や視認性の向上につながります。

以下のように使います。

<h1 style="color: green;">緑色の見出し</h1>

文字色を指定するときのポイントは次の通りです。

適切な文字色を使えば、読者に伝えたい部分がより明確になります。

ボーダーや枠線の色指定

HTMLやCSSでは、要素のまわりにある枠線（ボーダー）の色も指定できます。

ボーダーの色を変えることで、内容の区切りやデザインのアクセントとして活用できます。

以下のように指定します。

<div style="border: 2px solid red;">赤い枠のボックス</div>

ボーダーの色を設定する際のポイントは以下の通りです。

ボーダーを上手に使うと、情報の区切りや強調ができ、読みやすさがアップします。

hover時に色を変える方法

ユーザーがマウスカーソルをのせたときだけ色が変わる「hover」スタイルは、インタラクティブなデザインを作るのにとても役立ちます。

hoverの指定はCSSで行います。


a:hover { color: orange; }


hoverの指定でよく使われるパターンは以下の通りです。

hoverスタイルを使うと、ユーザーが「触れられる部分」だと気付きやすくなり、操作性も良くなります。

よく使う色指定のサンプルコード

実際によく使われている色の指定方法を、いくつかのパターンに分けて紹介します。

色を指定する方法を覚えるだけでなく、目的に合った書き方を選ぶことが大切です。

代表的な色指定コードは以下の通りです。

これらのコードは、HTMLやCSSで色を指定する時によく使う基本形です。

まずはこのあたりから覚えると便利です。

HTMLカラーコードの種類と使い分け

16進数（Hex）カラーコードとは

HTMLでよく使われる色指定のひとつが「16進数カラーコード」です。

これは数字とアルファベットを組み合わせて色を表す方法で、#RRGGBBという形式で書かれます。

以下は、よく使われる16進数カラーコードの例です。

色を構成する「R（赤）」「G（緑）」「B（青）」の値をそれぞれ2桁で指定します。

最大値は「FF（＝255）」、最小値は「00（＝0）」です。

この形式は、色の再現性が高く、デザインの微調整にも適しています。

RGBカラーコードの使い方

「RGBカラーコード」は、赤（Red）、緑（Green）、青（Blue）の3つの光の強さを数値で指定する方法です。

以下のように書きます。

color: rgb(255, 0, 0);

これは赤を最大にして、緑と青をゼロにした「真っ赤な色」になります。

RGBのそれぞれの値は0から255の間で指定します。

RGBの指定には、次のような特徴があります。

RGBは、細かい色調整をしたいときや、16進数がわかりにくいと感じたときに便利です。

RGBAで透明度を調整する方法

「RGBA」はRGBに加えて、透明度（Alpha）を指定できる色指定方法です。

Alpha値は0（完全に透明）から1（不透明）の間で設定します。

以下のように使います。

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

このコードは「黒を50％の透明度」で背景に使うことができます。

RGBAの主な活用ポイントは以下の通りです。

透明度を使うと、見た目が軽くなり、現代的なデザインに仕上がります。

HSLとHSLAの色指定とは

HSLは「色相（Hue）」「彩度（Saturation）」「明度（Lightness）」で色を表現する方法で、デザイナーにとって感覚的に使いやすいのが特徴です。

HSLAはそれに透明度（Alpha）を加えたものです。

以下がHSLの基本的な書き方です。

color: hsl(120, 100%, 50%);

この例では、緑（Hue 120度）を鮮やかに（Saturation 100%）、明るさ50%で表示しています。

HSL/HSLAの便利な点は次の通りです。

HSLは感覚的に色をコントロールしたい人に向いています。

HSLAならさらに透明度も調整できます。

色名（英語名）による指定方法

HTMLやCSSでは、あらかじめ決められた色名（英語）でも色を指定できます。

これは初心者にもわかりやすい方法で、覚えやすく手軽に使えるのが特長です。

よく使われる色名には以下のようなものがあります。

色名での指定は便利ですが、細かい色の調整には向きません。

デザインの初期段階や仮置きに使うのに最適です。

Webセーフカラーとは

Webセーフカラーとは、昔のディスプレイ環境でも確実に表示できるように決められた「216色」のセットです。

今ではあまり気にされないことも多いですが、一部の環境や用途では今でも使われています。

Webセーフカラーは、以下のような色の組み合わせだけで作られています。

色数が少ない分、デザインに一貫性を持たせやすく、シンプルなサイトに向いています。

各カラーコードのメリットとデメリット

ここまで紹介した色指定方法には、それぞれに良い点と注意点があります。

目的に応じて正しく使い分けることが大切です。

以下に、主なカラーコードの比較をまとめます。

それぞれの特徴を理解し、シーンに合った指定方法を選ぶことが、見やすく使いやすいWebデザインへの近道です。

デザインに役立つカラーコード一覧

基本のHTMLカラーコード一覧

HTMLでよく使われる基本のカラーコードを知っておくと、デザインのスタートがとてもスムーズになります。

まずはよく登場する色とそのカラーコードを覚えておきましょう。

基本的なHTMLカラーコードの一部を以下に紹介します。

これらの色は、多くのWebサイトやアプリの中でも頻繁に使われています。

まずはこの基本色から覚えると、配色の応用も簡単になります。

グラデーションに使える配色例

グラデーションとは、2つ以上の色が自然に変化していく表現のことです。

背景やボタンにグラデーションを使うと、見た目がより魅力的になります。

グラデーションに使える組み合わせ例を紹介します。

グラデーションは、背景やボタンのアクセントに最適です。

うまく取り入れると、Webページ全体がいきいきとした印象になります。

アクセントカラーに適した色

アクセントカラーとは、デザインの中で目立たせたい部分に使う色のことです。

リンクやボタン、見出しなどに使われることが多いです。

アクセントカラーにおすすめの色は以下の通りです。

アクセントカラーを使うことで、ユーザーの視線をしっかりと導くことができます。

ただし使いすぎには注意が必要です。

多用すると逆に見づらくなってしまいます。

背景に使いやすい落ち着いた色

背景色には、文字やコンテンツが読みやすくなるように、目に優しい落ち着いた色を選ぶのが基本です。

派手すぎると読みづらくなってしまうので注意しましょう。

背景に向いているカラーコードの例を紹介します。

これらの色は、テキストとのコントラストを保ちながら、やさしい印象を与えるのにぴったりです。

ボタンやリンクに使える目立つ色

ボタンやリンクなど、ユーザーが行動する部分にはぱっと目に入る色を使うことが大切です。

ただし、目立ちすぎてデザインを壊さないように工夫する必要があります。

目立つけれど使いやすい色は次のようなものがあります。

ボタンやリンクは、色によって「ここを押してほしい」というサインになります。

だからこそ、しっかりと計算して色を決めることが重要です。

モノトーン系のカラーコード

モノトーン配色は、白・黒・グレーを中心としたシンプルな色使いです。

落ち着いた印象を与えたいときや、写真やイラストを目立たせたいときに使われます。

代表的なモノトーンカラーコードは以下の通りです。

モノトーン配色は、高級感や洗練された印象を出すのにも向いています。

シンプルながらも奥が深い配色スタイルです。

季節やテーマ別のカラーパターン

季節やイベントに合わせて色を選ぶと、ユーザーに季節感や世界観をしっかり伝えることができます。

季節ごとにおすすめの色を覚えておくと、テーマづくりがしやすくなります。

季節やテーマ別のカラー例を紹介します。

このように、季節やテーマを意識した色を使うことで、Webサイトの世界観が一気に広がります。

見る人に合わせた色選びが、印象を大きく左右します。

色指定でよくある悩みと解決策

思った色にならない原因と対処法

HTMLで色を指定したのに「思った色が出ない」「全然違う色になってしまった」といった経験はありませんか？これは、いくつかの共通する原因によって起こることが多いです。

よくある原因と対処法を以下にまとめました。

このようなときは、まずコードを見直して、正しく指定できているか確認しましょう。

また、ブラウザのキャッシュを削除して再読み込みすると、正しく表示される場合もあります。

複数の要素に一括で色を指定する方法

Webページ全体で同じ色を複数の場所に使いたいとき、毎回個別に指定しているととても大変です。

そんなときは、CSSを使ってまとめて指定することで効率よく管理できます。

一括指定に便利な方法は以下の通りです。

たとえば、すべての見出しに青色を指定したい場合は以下のように書けます。

h1, h2, h3 { color: #2196F3; }

このように一括で指定すると、色を変更したいときも一か所直すだけで済むので、とても便利です。

スマホとPCで色味が違う場合の対策

スマホとパソコンで同じカラーコードを使っているのに、見た目の色が微妙に違って見えることがあります。

これは、デバイスごとの画面の表示特性が原因です。

そんな時に気をつけたいポイントをまとめました。

これを防ぐには、複数の端末で表示を確認するのが一番です。

また、明るすぎたり暗すぎたりする色は避けて、コントラストをしっかりつけると、どの端末でも読みやすくなります。

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

すべての人が読みやすいデザインを作るためには、アクセシビリティにも配慮した色選びが重要です。

色の組み合わせによっては、視覚的に見えづらくなってしまう人もいます。

アクセシビリティに配慮した色の選び方は以下の通りです。

特に重要なのは、情報を「色だけ」で伝えないことです。

色の違いがわからない人でも使いやすいWebページが理想です。

色のコントラスト比チェック方法

コントラスト比とは、背景と文字の「明るさの差」を数値で表したものです。

この値が高いほど、文字がはっきりと読みやすくなります。

Webアクセシビリティ基準では、ある程度のコントラスト比を保つことが求められています。

チェック方法には以下のようなものがあります。

目安として、コントラスト比は「4.5:1」以上が望ましいとされています。

見た目がきれいでも、読みにくければ意味がありません。

しっかり確認することが大切です。

おすすめのカラーピッカー・ツール

色を決めるのが難しいと感じる人には、カラーピッカーという便利なツールがあります。

色見本を見ながら選べるので、初心者にもわかりやすく、プロのデザイナーもよく使っています。

使いやすいカラーピッカーツールをいくつか紹介します。

これらのツールでは、色の組み合わせやコントラスト比もチェックできます。

「なんとなくの色選び」から卒業したい人にぴったりです。

デザインに統一感を出す配色のコツ

Webデザインでよくある悩みのひとつが「全体の色バランスがちぐはぐになってしまう」ということです。

統一感を持たせるためには、色数を絞ったり、ルールを作ったりすることが大切です。

配色に統一感を出すためのコツは以下の通りです。

統一感があると、見る人に安心感やプロっぽさを与えることができます。

配色で迷ったら、まずは「少ない色で整える」ことから始めてみましょう。

まとめ

HTMLでの色指定は、見やすくて伝わりやすいデザインを作るためにとても大切です。

今回の記事では、色の指定方法から、便利なカラーコード、よくある悩みの解決法まで、幅広く紹介しました。

ここで、特に大事なポイントを振り返っておきましょう。

さっそく今日から、あなたのWebページに素敵な色を加えてみましょう！