カラーコードの基礎知識｜CSSでもFigmaでも迷わない、色設計のルールと実例
皆さんは「#000000」や「#FFFFFF」などといったHEXカラーコードの使用経験はありますか？デザイナーにとってこのコードは非常に重要になります。
今回は、エンジニアとの連携を強めたい方やデザイン初心者の方向けにカラーコードについてを解説していきます。
Contents
1. 色はUI/UXとブランディングのカギ
カラーコードのお話をする前に、なぜ「色」が重要なのかというお話をしたいと思います。
Webサイトやアプリのデザインにおいて「色」は単なる飾りではありません。
ユーザーにとっての使いやすさ、視認性、印象、そしてそのサービスや企業のブランディングに大きく影響します。
例：）
- 赤いボタンは危険や警告のサイン
- 青いリンクは「クリックできる」と直感的に伝える
- トーンや配色を統一することでよりブランドイメージを強調することができる
このように、色はユーザーの行動や印象を左右する重要な要素です。 だからこそ、デザインで使う色は正確に、意図通りに伝える必要があります。
そのためにモニターやスマホ、ディスプレイ上で表示される色を指定するために使われるのが、**「カラーコード」**です。
2. カラーコードとは？
カラーコードとは、コンピュータに色を正確に指定するために使う、色の数値表現です。
人間の目は「赤っぽい」「青っぽい」など感覚的に色を捉えますが、コンピュータにはそれが通じません。
そこで、色を数値として指定することで、誰が見ても同じように色を再現できるようにしています。
2-1. モニターに映像が出力される仕組み
まず、モニターやスマホなどのディスプレイは、数百万〜数千万個の非常に小さな点（ピクセル）でできています。
それぞれのピクセルが、「赤・緑・青」の3つの光を別々の強さで発光することで、私たちが見ている映像や画像、文字などの色が再現されています。
2-2. ディスプレイ上の色は「光の三原色」で表現されている
この3つの光は、「赤（Red）・緑（Green）・青（Blue）」で構成され、光の三原色（加法混色）と呼ばれます。
モニターの映像は、赤・緑・青の光の強さを調整することで作られており、すべての色はこの3色を組み合わせることで表現されています。
RGBについてもっと深く知りたい方は、こちらの記事もおすすめです↓
https://engineerforce.io/dstan-pcolnscol01/
3. カラーコードの指定方法
Webデザインで色を指定する方法は主に以下の4つです：
| カラーネーム | red, blue | 色を直感的に指定できるが、種類が少なく微調整ができない |
| HSL | hsl(0, 100%, 50%) | 色相・彩度・明るさを％で指定でき、感覚的な調整に向いている |
| RGB | rgb(255, 0, 0) | 光の3色（赤・緑・青）の強さを数値で指定でき、細かい調整が可能 |
| HEX | #FF0000 | RGBを16進数で短く記述でき、CSSやツールでよく使用されている |
中でも、WEBデザインやUIUXデザインなどでもっともよく使われているのがHEXです。 ここからは、なぜHEXが多く使われているのかについて、RGBとの違いも交えながら詳しく説明していきます。
4. RGBとHEXカラーコードの指定方法について
RGBとHEXのカラーコードの基本は、RGB（赤・緑・青）それぞれの光の強さを数値で指定することで、あらゆる色を作り出すことができます。
下記の図の設定だと、画面上では鮮やかな赤が表示されます。
4-1. RGBは光の強さを10進数で表したもの
RGBでは、赤・緑・青それぞれを「0〜255（10進数）」の範囲で数値指定します。
- 0 = 光が出ていない（真っ暗）
- 255 = 光が最大に出ている
例：
rgb(255, 0, 0)→ 赤のみ最大 → 真っ赤rgb(0, 255, 0)→ 緑のみ最大 → 緑rgb(0, 0, 255)→ 青のみ最大 → 青
このように、3色の光の強さを数値で指定することで、画面上に表示される色が決まります。
4-2. HEXはRGBを16進数で表したもの
HEX（16進数）は、RGBの値（0〜255）を「00〜FF」の2桁の16進数で短く記載した形式です。
rgb(255, 0, 0)→#FF0000rgb(0, 255, 0)→#00FF00
RGBとHEXは、色を表現する仕組みは同じですが記載方法が異なります。
私たちが日常的に使っているのは「10進数」という数の表し方です。 10進数には以下のような特徴があります。
- 0〜9の10種類の数字で数を表します。
- 9の次は10、99の次は100というように桁が繰り上がります。
一方、16進数は「0〜9」の数字に加えて「A〜F」のアルファベットを使い、1桁で0〜15までの値を表す数の表し方です。
4-3. HEXが2桁で255まで表現できる仕組み
前の章で紹介した通り、RGBでは赤・緑・青それぞれの光の強さを「0〜255」の10進数で指定します。
この「0〜255」という範囲を、16進数で表現しようとすると16進数は1桁で0〜15（＝16通り）表せるので、2桁にすれば：
16 × 16 = 256通り（0〜255）
つまり、RGBで必要な1色あたりの範囲（0〜255）を、16進数ならたった2文字で表現することが可能です。
| RGB（10進） | → | HEX（16進） |
| 0 | → | 00 |
| 128 | → | 80 |
| 255 | → | FF |
5. カラーコードの指定に役立つTips
✅ 切りのいいHEX値を指定する
#D55727より#FF6600の方が覚えやすく、管理しやすい- 後から調整しやすいし、再現性が高くなる
✅ グレー系は同じHEX値で揃える
#333333（暗いグレー）#999999（中間グレー）#CCCCCC（明るいグレー）
✅ カラー変数・スタイルを再利用する
- 毎回異なるの色を使わず、共通スタイル化しておくとカラーメンテナンスがしやすい
- 例：
-primary-color,-gray-100など命名しておくと管理しやすい
✅ 意味のあるカラー設定を行う
#6C757D（グレー）→ 無効・補足#FF0000（赤）→ エラー・警告#007BFF（青）→ アクション・リンク#28A745（緑）→ 成功・確認済み
6. まとめ
カラーコードは、コンピュータに色を伝えるための共通言語です。
RGBもHEXも、光の三原色（赤・緑・青）の強さを数値指定する方式ですが、実務でよく使われるのは 「**HEX」**です。
7. デザイン研修会でデザイン思考を学びませんか？
“デザイン原則についてどこから学べばいいのかわからない“、
“デザイン思考には興味があるけど敷居が高そう“といったイメージをお持ちの方に向けて、
UIUXデザイン会社「Engineerforce」では企業向けデザイン研修会を行っています。
この研修では、UIUXデザインの専門家から直接学ぶことで、デザインの基礎知識から最新のトレンドを理解し、デザイン思考を体系的に身につけることができます。
実践的にすぐ応用できるよう詳しく研修しておりますので、興味のある方はぜひ下のリンクからからお気軽にお問い合わせください。