【2026年10月最新】HTMLカラーコード完全ガイド｜16進数・RGBの意味から非エンジニアの配色調整まで
aikanri-admin
「サイトのボタンの色をもう少し明るくしたい」「会社のコーポレートカラーに合わせて配色を変えたい」——こうした要望を制作会社やエンジニアに頼むたびに、見積もりと納期を待つのに疲れていませんか。
実はHTMLカラーコードの仕組みさえ理解してしまえば、色の指定自体は驚くほどシンプルです。#から始まる6桁の英数字、あるいはrgb()という関数、さらには英語の色名までを使い分けられれば、Webサイトの色に関するほとんどの疑問は自分で解決できます。
代表菅澤
AI鬼管理山崎
この記事を最後まで読むと、次の6つが明確になります。
01 COLOR CODE BASICS カラーコードとは何か──16進数とRGBの関係 なぜ「#FF0000」が赤色になるのかを仕組みから理解する
Webサイトで色を指定するとき、最もよく使われるのがカラーコードと呼ばれる「#」から始まる6桁の英数字です。例えば赤は#FF0000、白は#FFFFFF、黒は#000000と表記します。一見すると暗号のようですが、仕組みを分解すると非常にシンプルです。
📚 用語解説
カラーコード：Webサイトやアプリで色を指定するための、6桁の英数字による表記法。「#」に続けて赤・緑・青の強さをそれぞれ2桁ずつ、合計6桁の16進数で表します。世界共通の規格なので、どのブラウザ・どのソフトでも同じ色として認識されます。
1-1. RGB三原色──光の色は「赤・緑・青」の掛け合わせ
テレビやパソコンのディスプレイは、赤（Red）・緑（Green）・青（Blue）という光の三原色を組み合わせて、あらゆる色を表現しています。この頭文字を取ってRGBと呼びます。絵の具の三原色（赤・青・黄）と混同されがちですが、光の三原色は「混ぜるほど明るくなり、全部混ぜると白になる」という点が絵の具とは逆の性質を持っています。
📚 用語解説
RGB：Red（赤）・Green（緑）・Blue（青）の頭文字を取った、光の三原色による色の表現方式。それぞれの色を0〜255の256段階（合計1,677万色以上）で調整し、組み合わせることであらゆる色を作り出します。ディスプレイが色を表示する仕組みそのものです。
カラーコードの6桁は、この赤・緑・青をそれぞれ2桁ずつの16進数で表したものです。例えば#FF0000は「赤を最大値(FF)、緑を0、青を0」にした色、つまり純粋な赤を意味します。同様に#00FF00は緑、#0000FFは青になります。
1-2. なぜ「16進数」を使うのか
ここで疑問に思うのが「なぜ普通の数字（10進数）ではなく16進数を使うのか」という点です。理由はシンプルで、2桁で256段階を表現できるからです。10進数の2桁（00〜99）では100段階しか表現できませんが、16進数の2桁（00〜FF）なら0〜255の256段階をぴったり表現できます。コンピュータが色の情報を扱う単位（1バイト＝256段階）と相性が良いため、Web業界では標準的にこの16進数表記が使われています。
📚 用語解説
16進数：0〜9の数字に加えて、A・B・C・D・E・Fの6文字を使って数を表す記数法。「0,1,2...9,A,B,C,D,E,F」の16種類の文字で1桁を表現し、2桁で0〜255（256段階）を表せます。カラーコードのほか、コンピュータ内部のデータ表現でも頻繁に使われる考え方です。
「赤緑青の順に2桁ずつ」「FFが最大(255)、00が最小(0)」の2点さえ覚えておけば、カラーコードの見た目から大まかな色の傾向を読み取れるようになります。例えば#FFCC00なら「赤も緑も強く、青がゼロ」なので黄色〜オレンジ系だと予測できます。
AI鬼管理山崎
02 HOW TO WRITE HTML・CSSでの具体的な書き方と省略ルール 3桁省略記法とrgb()関数、実務でよく使う指定方法を整理する
カラーコードの仕組みが分かったところで、実際にHTMLやCSSでどう書けばよいのかを見ていきます。書き方には主に4パターンあり、それぞれ使いどころが少しずつ異なります。
| 記法 | 書き方の例 | 特徴 | 使いどころ |
|---|---|---|---|
| 6桁カラーコード | color: #FF6600; | 最も一般的。正確な色を指定できる | 通常のデザイン指定全般 |
| 3桁省略記法 | color: #F60; | 各桁が同じ数字2つの繰り返しの時のみ使える | コードを短くしたい時 |
| rgb()関数 | color: rgb(255, 102, 0); | 10進数でそのまま指定できる。透明度も追加可能 | 透明度(alpha)を使いたい時 |
| カラーネーム | color: orange; | 英単語で直感的に指定できる | 簡易的な指定・学習用 |
2-1. 3桁の省略記法が使えるケース
#FF6600のように、各色の2桁が同じ数字の繰り返しになっている場合（例：FF・66・00のように上下2文字が同一）は、#F60のように3桁へ省略して書くことができます。ただし#FF6601のように上下の桁が異なる場合は省略できません。実務では省略記法よりも6桁での指定が一般的ですが、手早くメモを取る際などには便利です。
📚 用語解説
16進数省略記法（3桁カラーコード）：6桁のカラーコードのうち、各色の上位桁と下位桁が同じ数字の場合に3桁へ短縮して書ける記法。例えば#AABBCCは#ABCと省略できます。ブラウザ側が自動的に「各桁を2回繰り返す」と解釈して元の6桁に復元してくれる仕組みです。
実際にサイトの色を決める際の一般的な流れを図解すると、以下の4ステップになります。
使いたい色を
イメージする
カラーピッカー
ツールで確認
カラーコードを
コピーする
HTML/CSSに
貼り付けて確認
Step 2の「カラーピッカーツール」は、Google検索で「カラーピッカー」と入力するだけで無料のツールが出てきます。マウスで色を選ぶだけで、対応するカラーコードを自動的に表示してくれるため、16進数を暗算する必要はまったくありません。
代表菅澤
03 COLOR NAMES カラーネーム（色名）で指定する方法 英単語での色指定と、実務で気をつけたい落とし穴
HTML/CSSでは、カラーコードの代わりに英語の色名（カラーネーム）で色を指定することもできます。red（赤）・blue（青）・orange（オレンジ）のように直感的に書けるため、学習用のサンプルコードなどでよく使われています。
📚 用語解説
カラーネーム：HTML/CSSの仕様で定義されている、色を表す英単語。「red」「blue」「white」のような基本的な色名から、「tomato」「slateblue」のような凝った名前まで、合計147種類が標準で用意されています。ブラウザ側が各カラーネームに対応するカラーコードを内部で保持しているため、名前を書くだけで色が反映されます。
| カラーネーム | 対応するカラーコード | 色のイメージ |
|---|---|---|
| red | #FF0000 | 赤 |
| orange | #FFA500 | オレンジ |
| gold | #FFD700 | 金色・濃い黄色 |
| forestgreen | #228B22 | 深緑 |
| royalblue | #4169E1 | 鮮やかな青 |
| slategray | #708090 | くすんだ灰色 |
| white | #FFFFFF | 白 |
| black | #000000 | 黒 |
3-1. 実務でカラーネームを使う際の注意点
カラーネームは手軽な反面、実際の企業サイト制作ではあまり推奨されません。理由は、147色という限られた選択肢の中からしか選べないため、コーポレートカラーのような厳密な色指定には対応できないためです。「うちの会社のロゴの赤」は、標準のカラーネームの「red」とは微妙に異なる色である場合がほとんどです。
AI鬼管理山崎
もし自社のロゴやブランドガイドラインに「正式なカラーコード」が明記されていない場合は、ロゴのデザインデータ（Illustrator・Photoshop・Figmaなど）を制作会社やデザイナーに確認し、正式なカラーコードを社内共有しておくことを強くおすすめします。これが決まっていないと、サイトを修正するたびに「前と微妙に色が違う」という問題が発生します。
自社サイトのメインカラー・サブカラー・アクセントカラーの3〜4色を、正式なカラーコードとして社内ドキュメント（Notion・スプレッドシートなど）に一覧化しておくと、今後の修正依頼や新規ページ制作の際に「色がブレる」事故を防げます。
04 ACCESSIBILITY 業務サイトで色を扱う際に外せない注意点 コントラスト比とアクセシビリティの基準を押さえる
コーポレートサイトや業務システムの配色を検討する際、デザインの好みだけで色を決めてしまうと、「文字が読みにくい」「一部のユーザーに見えづらい」といった問題を引き起こすことがあります。ここで重要になるのがコントラスト比という考え方です。
📚 用語解説
コントラスト比：背景色と文字色の「明るさの差」を数値化した指標。1:1（差がまったくない状態）から21:1（黒と白のような最大の差）までの範囲で表され、Webアクセシビリティの国際基準（WCAG）では通常の文字で4.5:1以上を推奨しています。数値が低いと、視力の弱い方や高齢者、屋外でスマホ画面を見る場面などで文字が読みにくくなります。
📚 用語解説
アクセシビリティ（Webアクセシビリティ）：高齢者・障害のある方・一時的に不自由な状況にある方も含め、誰もがWebサイトの情報に問題なくアクセスできる状態を指す概念。色の見え方に配慮したコントラスト比の確保は、アクセシビリティ対応の基本項目のひとつです。
例えば、薄いグレーの背景に薄い黄色の文字を乗せるようなデザインは、見た目にはおしゃれに感じられても、コントラスト比が不足して多くの人にとって読みにくい可能性があります。特に問い合わせフォームのボタンや重要な案内文など、行動を促したい箇所ほど、はっきりとした色のコントラストを意識する必要があります。
サイトの配色を変更する際は、変更後の背景色と文字色の組み合わせで「コントラスト比チェッカー」（無料のオンラインツールが多数あります）を使い、4.5:1以上を確保できているか必ず確認してください。デザインの見た目だけで判断すると、後から「文字が見づらい」というクレームにつながるケースがあります。
代表菅澤
4-4. 業種別に見る配色のよくある失敗パターン
実際に弊社がサイト運用を支援してきた中で、配色に関する相談として多いのが「良かれと思って変えた色が、かえって使いにくくなった」というケースです。特に多いのが、アクセントカラーの使いすぎです。目立たせたいボタンやリンクが多すぎると、結果的にどれも目立たなくなり、本当にクリックしてほしい箇所（お問い合わせボタンなど）が埋もれてしまいます。
もう一つよくある失敗が、季節や流行に合わせてメインカラーを頻繁に変えてしまうことです。コーポレートサイトの配色は、名刺・パンフレット・広告バナーなど他の媒体とも統一されている必要があります。サイトだけを流行色に合わせて変更すると、ブランド全体としての一貫性が崩れ、かえって「この会社、大丈夫かな」という印象を与えかねません。
📚 用語解説
アクセントカラー：メインカラー・サブカラーとは別に、特に目立たせたい要素（ボタン・注意書きなど）だけに限定して使う色。全体の5〜10%程度に絞って使うのが基本とされ、使いすぎると本来の「目立たせる」効果が薄れてしまいます。
メインカラー60%・サブカラー30%・アクセントカラー10%という配分（60-30-10ルール）を目安にすると、初めて配色を検討する方でもバランスの取れたデザインに近づけやすくなります。
こうした配色の失敗は、デザインの知識がなくても「なぜこの色をこの場所に使うのか」という目的を一言で説明できるかどうかで、ある程度は事前に防げます。「なんとなく目立つから」ではなく「ここは絶対にクリックしてほしい箇所だから、他と明確に区別する色にする」というように、色を使う理由を言語化する習慣が、結果的に良い配色につながります。
05 COMMON PITFALLS 【独自】非エンジニアが配色変更で陥る3つの罠 「色を変えただけ」のはずが大きな修正になってしまう理由
ここからは、弊社が実際にお客様のサイト運用を支援する中で見てきた、非エンジニアの方がサイトの配色を自分で変更しようとして詰まりやすいポイントを3つに整理してご紹介します。
5-1. 【罠1】1箇所を変えたら他の場所の色が崩れる
多くのWebサイトでは、同じ色のコードが複数のファイルに何十箇所も散らばって記述されています。例えば「ボタンの色」を変えたいだけなのに、そのカラーコードがヘッダー・フッター・見出し装飾など別々の箇所にも同じ数値で使い回されているケースが非常に多く、1箇所だけ書き換えると他の場所とデザインの統一感が崩れるという事態が起こります。
5-2. 【罠2】CSSの優先順位（詳細度）でうまく反映されない
CSSには「どのスタイル指定が優先されるか」を決めるルール（詳細度）があり、正しい書き方で色を変更したつもりでも、別の場所でより強い優先度のスタイルが指定されていると、変更が画面に反映されないことがあります。「コードは合っているはずなのに、なぜか色が変わらない」というのは、非エンジニアがつまずく典型的なパターンです。
5-3. 【罠3】スマホ表示だけ意図しない色になる
パソコンでは正しく表示されているのに、スマホで見ると色が違って見えるケースもあります。多くのサイトはパソコン用とスマホ用で別々のスタイル指定（レスポンシブデザイン）を持っており、パソコン画面だけを見て「直った」と判断すると、スマホ側の指定を見落としてしまうことがあります。
色が複数箇所に
散らばっている
CSSの優先順位で
反映されない
スマホ表示だけ
崩れる
サイト全体を
把握してから直す
いきなりコードを書き換えるのではなく、まずブラウザの「検証ツール（右クリック→検証）」で、変更したい色がどのファイルの何行目に書かれているかを確認する習慣をつけましょう。この一手間で、罠1・罠2の多くは事前に見抜けます。
AI鬼管理山崎
代表菅澤
06 GENAI CASE STUDY 【独自データ】Claude Codeに配色調整・CSS修正を任せる GENAI実運用データで見る「サイト修正をAIに任せる」という選択肢
前章で挙げた「色が複数箇所に散らばっている」「CSSの優先順位で反映されない」「スマホだけ崩れる」という3つの罠は、実はAIエージェントであるClaude Codeが最も得意とする種類の作業です。Claude Codeは、サイトのファイル一式を読み込んだ上で「このボタンの色を変えたい」という日本語の指示だけで、関連する箇所をすべて洗い出し、矛盾なく書き換えることができます。
📚 用語解説
Claude Code：Anthropic社が提供するAIエージェントツール。従来のチャットAIと異なり、ファイルを実際に読み込み・編集し、複数のファイルにまたがる修正を自律的に行える点が特徴です。「サイトのボタンの色を全部#DC2626に統一して」といった指示だけで、関連ファイルを横断して修正してくれます。
弊社（株式会社GENAI）では、Claude Max 20xプラン（月額$200・約30,000円）を契約し、営業・広告運用・記事制作・経理・秘書業務に加えて、コーポレートサイトやLPの配色・CSS修正にもClaude Codeを日常的に活用しています。
| 項目 | 従来（人力での配色修正） | Claude Codeに任せた場合 |
|---|---|---|
| 調査にかかる時間 | ファイルを1つずつ開いて目視で確認（数時間） | 数分でサイト全体の該当箇所を洗い出し |
| 修正の抜け漏れ | 見落としが発生しやすい（罠1に該当） | ファイル横断で一括置換・整合性を確認 |
| スマホ表示への配慮 | 別途確認が必要（罠3に該当） | 該当するレスポンシブ指定も併せて修正 |
| 依頼から反映までの時間 | 制作会社への依頼〜納品まで数日〜数週間 | 指示から数分〜数十分で修正案が完成 |
弊社の肌感としては、以前は「コーポレートカラーを少し変更する」といった軽微な修正依頼でも、制作会社に依頼すると都度数時間〜半日分の工数がかかっていました。Claude Codeに任せるようになってからは、こうした都度発生する軽微な修正が数時間規模で完結するようになっています。
「ボタンの色を
もう少し明るく」
関連ファイルを
横断的に検索
複数箇所を
一括で書き換え
表示を見て
人間が最終承認
代表菅澤
AI鬼管理山崎
07 QUICK GUIDE 目的別・カラーコード活用早見表 自分の状況に近いものを探してすぐ実践できる一覧
ここまでの内容を目的別に整理した早見表です。自分の状況に近い行から実践してみてください。
| やりたいこと | おすすめの方法 | 補足 |
|---|---|---|
| 学習用に簡単な色を指定したい | カラーネーム（red, blueなど） | 147色の範囲内で直感的に書ける |
| 正確な色を指定したい | 6桁カラーコード（#FF6600など） | 実務では基本的にこちらを使う |
| 透明度を含めて指定したい | rgba()関数 | 第4引数(0〜1)で透明度を追加できる |
| 自社サイトの色を今すぐ知りたい | ブラウザの検証ツール | 右クリック→検証で該当箇所を確認 |
| 文字の見やすさを確認したい | コントラスト比チェッカー | 4.5:1以上を目安に確認する |
| 配色変更を自分では手が回らない | Claude Codeに指示を出す | 調査から修正案作成までを任せられる |
08 CONCLUSION まとめ ── 仕組みを理解すれば、色の指示はもう怖くない カラーコードの知識は「AIへの指示力」にそのまま直結する
この記事では、HTMLカラーコードの基本的な仕組みから、実務での書き方、カラーネームとの違い、アクセシビリティの注意点、そして非エンジニアが配色変更で陥りやすい3つの罠と、その解決策としてのClaude Code活用までを整理しました。最後にポイントを振り返ります。
カラーコードという一見地味なテーマですが、その仕組みを理解しておくことは、今後AIエージェントにサイトの修正を依頼する際の「指示力」に直結します。「なんとなく明るい色にして」ではなく「コントラスト比を保ったまま、もう少し彩度を上げて」と伝えられるだけで、AIが返してくる修正案の精度は大きく変わります。
代表菅澤
サイトの「ちょっとした修正」を、AI鬼管理が一緒に仕組み化します
配色調整のような軽微な修正依頼が積み重なって、制作会社とのやり取りに時間を取られていませんか。
Claude Codeを使った修正フローの設計から、社内での運用定着まで伴走します。
AI鬼管理山崎
ここから先の進め方は、大きく2つあります。
自社で回せるようになりたい方は、AI鬼管理でClaude Code／Codexの使い方から業務設計・社内定着まで伴走を受けながら、社内に仕組みを作る道があります。
覚えるより任せたい方は、AI社員AIKATAでこの記事のような定型業務を丸ごと預ける道があります。料金は月30万円の月額定額、追加費用は0円です。
どちらが合うかは、業務量と社内体制次第です。無料相談・無料適合診断で、貴社の場合はどちらが向くかからご相談いただけます。
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか？
よくある質問
Q. カラーコードの「#」にはどんな意味がありますか？
A. 「#」はカラーコードが16進数表記であることを示す記号（プレフィックス）です。特別な計算をするわけではなく、「この後に続く6桁（または3桁）は色を表す16進数ですよ」とブラウザに伝える目印だと考えてください。
Q. カラーコードとRGB関数、どちらを使えばいいですか？
A. 基本的にはどちらでも同じ色を表現できます。カラーコード（#FF0000）は書き方が短く一般的、rgb()関数は10進数で直感的に書けるうえ、rgba()にすることで透明度も指定できます。透明度が必要ない場面ではカラーコードの方が主流です。
Q. カラーネームは何種類くらいありますか？
A. CSSの標準仕様では147種類のカラーネームが定義されています。「red」「blue」のような基本的な色名から、「cornflowerblue」「mediumseagreen」のような凝った名前まで幅広く用意されていますが、実務での厳密な色指定には向いていません。
Q. コントラスト比はどうやって確認すればいいですか？
A. 無料のオンラインコントラスト比チェッカーに、背景色と文字色のカラーコードをそれぞれ入力するだけで数値が表示されます。通常の文字は4.5:1以上、大きな見出し文字は3:1以上を目安に確認してください。
Q. 自社サイトの色を自分で調べる方法はありますか？
A. あります。ブラウザで該当箇所を右クリックし「検証」（Inspect）を選ぶと、その要素に使われているカラーコードがCSSの記述とともに表示されます。エンジニアでなくても閲覧だけなら誰でも確認できます。
Q. コーポレートカラーが決まっていない場合はどうすればいいですか？
A. まずはロゴのデザインデータ（Illustrator・Figmaなど）を確認し、正式なカラーコードを制作会社やデザイナーに聞いて社内で一覧化することをおすすめします。感覚だけで都度色を選ぶと、サイト内で色がブレる原因になります。
Q. 配色修正をClaude Codeに任せる場合、専門知識は必要ですか？
A. ターミナル操作などの専門知識は不要です。ただし、この記事で紹介したカラーコードやコントラスト比の基礎知識があると、AIが提示した修正案に対して「もう少し明るく」「コントラストを保ったまま」といった的確な追加指示が出せるようになり、やり取りの精度が上がります。
Claude Codeで業務自動化を90日で叩き込む
経営者向けの伴走型パーソナルトレーニング
AI鬼管理／AI社員AIKATAへのお問い合わせ
この記事を読んで気になった方へ。
専門スタッフが、御社に最適な
業務自動化・業務代行プランを無料でご提案します。
- AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
- Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
- 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
- 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
- メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
- 明治大学政治経済学部卒
