HTMLカラーコード一覧：HEX・RGB・CSSでの書き方と変換方法

HTMLカラーコードとは？まず覚える4つの形式

厳密には、色を描画する仕組みはHTMLそのものよりもCSSが担当します。HTMLの要素にclassを付け、CSSのcolorやbackground-colorへカラーコードを指定するのが、現在の基本的な書き方です。検索で「HTMLカラーコード」と呼ばれている一覧も、多くはCSSでそのまま利用できる値を意味します。

迷ったときは、固定値の共有にHEX、透明度を含む指定にrgb()、明るさを段階的に変える設計にHSLを選ぶと整理しやすくなります。どの形式でも、最終的な見え方は背景色・フォントサイズ・表示環境の影響を受けます。

HTMLとCSSでカラーコードを書く基本

おすすめはclassとCSSを分ける方法

ページ内で同じ色を何度も使うなら、HTMLに色の数値を直接書くより、classとCSSを分ける方が管理しやすくなります。色の変更が必要になったときも、CSSの1か所を直せば複数の要素へ反映できます。

<h2 class="brand-heading">見出し</h2>

.brand-heading {
  color: #336699;
  background-color: #F4F8FC;
}

インラインstyleは小さな確認用に使う

style="color: #336699;"のようなインライン指定は、サンプルや一時的な検証では便利です。ただし、同じ色を複数ページで使う場合は、CSS変数やclassへまとめた方が、色の一貫性と保守性を保ちやすくなります。

:root {
  --brand-blue: #336699;
  --surface-blue: #F4F8FC;
}

.button-primary {
  color: #FFFFFF;
  background-color: var(--brand-blue);
}

HTMLカラーコード一覧：Webで使いやすい基本8色

次の表は、説明用サンプルや小規模なWeb制作で使いやすい代表色です。色名は覚えやすい一方、細かなブランドカラーの管理にはHEXやRGBを使う方が再現性を保ちやすくなります。

色名一覧だけで決めると、彩度や明るさが強すぎて文字が読みにくくなることがあります。実際の背景に置いた状態で確認し、必要に応じてコントラスト比 チェッカーで文字色との組み合わせを確認してください。

HEX・RGB・HSLを変換する方法

HEXからRGBへ変換する例

#336699のような6桁HEXは、先頭から2桁ずつ赤・緑・青に分けます。33は51、66は102、99は153なので、RGBではrgb(51, 102, 153)です。CSSの新しい記法なら、rgb(51 102 153)のようにカンマを省略しても書けます。

RGBからHEXへ変換する例

RGBの各値を16進数へ直し、赤・緑・青の順に2桁ずつ連結します。rgb(255, 99, 71)なら、255はFF、99は63、71は47なので、HEXは#FF6347です。手計算に迷うときは、RGB変換マスターガイドで公式と形式ごとの違いを確認し、実際の値はカラーコード変換ツールで照合できます。

HSLは配色の明るさを調整しやすい

HSLは色相・彩度・明るさで色を表すため、「同じ青のまま少し暗くする」といった調整を説明しやすい形式です。HEXやRGBの値をそのまま置き換えるのではなく、デザインシステムで役割ごとの色を展開するときの補助形式として使うと便利です。関連する形式変換は16進数カラーコード変換術にもまとめています。

Webカラーコードを選ぶときの5つの注意点

1. HTML属性ではなくCSSを基本にする：色の指定はclass、CSS変数、スタイルシートにまとめると、ページ全体の変更と再利用がしやすくなります。
2. 3桁HEXの意味を確認する：#369は#336699と同じ省略表記です。任意の6桁を3桁に縮められるわけではありません。
3. 透明度は別の値として考える：rgb(51 102 153 / 70%)のようなalpha付き指定は、背景との合成後に見え方が変わります。RGBAカラーコードの使い方も参考にしてください。
4. 色だけで意味を伝えない：エラーや成功を色だけで示すと、色覚特性や環境によって情報が伝わりにくくなります。アイコン、文言、状態ラベルも併用します。
5. 印刷用CMYKと混同しない：HTML・CSSの色は画面表示用です。印刷物へ展開する場合は、RGB⇔CMYK変換ツールで近似値を確認し、紙と印刷条件に合わせて校正します。

HTMLカラーコードのFAQ

まとめ：HTMLカラーコードは用途ごとに形式を使い分ける

HTMLカラーコードは、HTMLとCSSで色を再利用するための数値・色名です。固定値にはHEX、透明度を含む指定にはrgb()、配色調整にはHSL、短いサンプルには色名というように、目的で形式を選ぶとコードを読みやすく保てます。

カラーコードを決めたら、実際の背景に置いた状態、文字とのコントラスト、必要なら印刷用CMYKへの近似まで確認してください。色名やHEXを探す場合はカラーコード検索・活用ガイド、RGBやCMYKへ変換する場合はカラーコード変換ツールと組み合わせると作業を短縮できます。