16進数カラーコード・とは？初心者でもつまずかない基礎と使い方ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

16進数カラーコード・とは？

ウェブサイトの色を決めるときに使うのが 16進数カラーコード です。色は赤・緑・青の3つの成分で作られ、それぞれの成分を 0 〜 255 の数字で表します。ここでは その数字を 16進数（0〜9 と A〜F の組み合わせ）で表し、合計6桁の文字列として表現します。先頭の 「#」 を付けて #RRGGBB という形になります。例えば、真っ赤は #FF0000、真っ青は #0000FF、真っ黒は #000000、真っ白は #FFFFFF です。

重要ポイントは次の3つです。1) 各色を2桁ずつ表す。2) 文字は 0-9 と A-F の組み合わせ。3) 大文字小文字はどちらでも機能します（CSS では #ff0000 でも同じ色になります）。

1. 基本の仕組み

色は「赤(R)・緑(G)・青(B)」の三原色を組み合わせて作ります。R の2桁が最初、G の2桁が中央、B の2桁が最後に来ます。例えば #1E90FF は赤が 0x1E、緑が 0x90、青が 0xFF という意味です。

2. 3桁表記と6桁表記

ほとんどの場合は6桁表記が使われますが、3桁表記も CSS で使えます。3桁表記では #RGB の形で、R・G・B の1桁をそれぞれ2倍の値として解釈します。例えば #F60 は #FF6600 と同じ色を表します。

実例と使い方

ウェブ制作で色を決める基本は CSS です。テキストの色は color プロパティ、背景色は background-color プロパティに、値として #RRGGBB や #RGB を書きます。例として、テキストを青にする場合は color: #1E90FF と書き、背景を薄いグレーにする場合は background-color: #F0F0F0 と書きます。

よく使われる6桁カラーコードの表

カラー名	カラーコード	説明
ブラック	#000000	完全な黒を表します
ホワイト	#FFFFFF	最も明るい白系の色
レッド	#FF0000	強い赤の色味
グリーン	#00FF00	鮮やかな緑の色
ブルー	#0000FF	はっきりした青色
グレー	#808080	中間の中間色として使われやすい

3桁表記と注意点のまとめ

3桁表記は #RGB の形で、R・G・B の一文字を2倍の値として解釈します。#RGB と #RRGGBB は同じ色を指す場合が多いですが、厳密には別表現になることがあります。CSSでは大文字・小文字の区別は基本なく同じ色として扱われます。ただし、コードの可読性を考え、統一した表記にするのがおすすめです。

まとめと次のステップ

16進数カラーコードは、ウェブ上の色を統一して指定する基本的な方法です。6桁のRRGGBBで表すのが基本ですが、場合によっては 3桁表記 も使えます。実際に CSS の color や background-color に #RRGGBB や #RGB を書く練習をすると、色の組み合わせ方がつかめてきます。いくつかの色コードをノートに書き出して、背景色と文字色の組み合わせを試してみると良いでしょう。

16進数カラーコードの同意語

16進数カラーコード: 色を表すコードで、数値を16進数で記述したもの。通常は先頭に # を付け、赤・緑・青の成分をそれぞれ 2 桁の16進数で表します。
十六進数カラーコード: 16進数カラーコードと同じ意味の表現。十六進法でRGBの値を示すカラーコードです。
HEXカラーコード: 英語の 'HEX color code' の略。ウェブ制作でよく使われ、#RRGGBB の形で表されます。
HEX色コード: HEXカラーコードの別表現。RGB の成分を 16 進数で表した文字列です。
HEXコード: HEX の略称で、カラーコードを指す場合に用いられます。色を指定する際の表現として広く使われます。
カラーコード(HEX): HEX 形式のカラーコードを指す表現。#RRGGBB などの形で色を指定します。
カラーコード HEX形式: HEX 形式のカラーコードのこと。ウェブデザインなどで、色を指定する文字列として使われます。
十六進カラー値: カラーを表す値を十六進法で表した値。RGB の各成分を 2 桁ずつ 16進数で示します。
16進数のカラーコード: 16進法で表現されたカラーコードのこと。よく見かけるのは #RRGGBB 形式です。
HEX値: 色を表す 16進数の値。通常は #RRGGBB の形で表されます。

16進数カラーコードの対義語・反対語

十進数カラーコード: 色を十進数のRGB値で表す表現。例: rgb(255, 0, 0) は赤を表す。HEX表現（#ff0000）とは別の表現方法で、デジタル表示でよく用いられる。
RGB十進数表記: RGB成分を十進数で書く表現。例: rgb(0, 128, 255)。HEXの代わりに使われることが多い。英語圏では“decimal RGB”とも呼ばれることがある。
色名（名前付き色）: 色を名前で表す表現。具体的なRGB値を直接書かず、色名で伝えられる。例: 赤、青、黄、橙など。精密さは落ちるが直感的に伝わりやすい。
CSSカラー名: CSSで定義された標準カラー名の集合を使う表現。例: red, blue, lime, navy。細かな色コードを覚えなくても色を指定できる利点がある。
HSL表現: 色相・彩度・明度で色を表す表現。例: hsl(210, 100%, 50%)。HEX/ RGBとは異なる色空間での表現で、色の調整が直感的になる。
CMYK表現: 印刷用のシアン・マゼンタ・イエロー・ブラックの組で色を表す表現。デジタルカラーのHEX/RGBに対し、印刷時の色管理で用いられるカラー表現。
RGBA/HSLA 表現: 透明度を含む色表現。例: rgba(255,0,0,0.5) や hsla(0, 100%, 50%, 0.5)。不透明度を付けたい場合に HEX/ RGB の拡張として使われる。

16進数カラーコードの共起語

HEX: 16進法で表すカラーコードの略称。主に CSS で #RRGGBB 形式として使われます。
#RRGGBB: 赤・緑・青をそれぞれ2桁の hex 値で並べた6桁の表現です。先頭には # をつけます。
RGB: Red・Green・Blue の三原色の数値表現。CSS では rgb(255,0,0) のように使います。
RGBA: RGB にアルファ（透明度）を加えた表現。rgba(255,0,0,0.5) のように半透明を指定します。
HSL: 色相・彩度・明度で色を表現する形式。hex から変換して使われます。
CSS: ウェブのデザイン言語。色値として hex や rgb()、hsl() などを使います。
HTML: ウェブページの骨組みを作る言語。色は style 属性や CSS で指定します。
色コード: 色を識別するためのコード全般のこと。hex・rgb・named color などを含みます。
色指定: プログラムやスタイルシートで色を決めること。
色表現: 色をどう表すかの方法全体。 hex、rgb、hsl、名前付きカラーなど。
ウェブカラー: ウェブで使われる色のこと。ブラウザが対応する表現形式を指します。
カラーピッカー: 色を視覚的に選べる道具。
カラーパレット: デザインで使う色の組み合わせ集。ブランドカラーを含むことが多いです。
アクセシビリティ: 誰もが見やすく使いやすい色の設計を意識する考え方です。
コントラスト比: 背景と前景の明暗差の指標。読みやすさに直結します。
WCAG: Web Content Accessibility Guidelines の略。カラーのコントラストなど基準を示します。
変換: hex ⇄ rgb ⇄ hsl など、別の表現へ変えること。
変換ツール: オンライン上で色コードを相互変換できるツールのことです。
短縮表記: 3 桁の hex 表現（例: #ABC）は 6 桁の #AABBCC の短縮形です。
三桁カラー: 3 桁の hex 表現。読みやすく省略できます。
六桁カラー: 通常の 6 桁の hex 表現。RRGGBB の形です。
24bitカラー: 1 色を赤・緑・青に各8bitずつ割り当てた表現。
赤色: 赤を表す色名の一つ。RGB で (255,0,0) に相当します。
緑色: 緑を表す色名の一つ。RGB で (0,128,0) などの表現を使います。
青色: 青を表す色名の一つ。RGB で (0,0,255) に相当します。
先頭の#記号: カラーコードの先頭に付く #。識別と表現の基準になります。
カラー名: CSS で直接使える色の名前（red, blue など）。
アルファ値: 透明度を表す値。RGBA で 0 〜 1 の範囲で指定します。
透明度: 色の透過具合。0 が完全に透明、1 が完全に不透明です。
色相: 色の種類を表す属性。赤・青・緑などの分野分けに使います。
彩度: 色の鮮やさを示す指標。高いと鮮やか、低いとくすんで見えます。
明度: 色の明るさを示す指標。高いほど明るく、低いほど暗くなります。
バックグラウンドカラー: 背景として使う色のコード。
テキストカラー: 文字として表示する色のコード。
デザインシステム: 組織で一貫性を保つため、色を tokens として管理する設計手法。

16進数カラーコードの関連用語

16進数カラーコード: 16進数で表現されたカラーコードの総称。赤・緑・青をそれぞれ2桁の16進数で表し、先頭に # をつけます。3桁の短縮形も存在します。
#RRGGBB: 6桁のHEXカラーコード形式。赤・緑・青をそれぞれ2桁ずつ表し、先頭に # を付けます。
#RGB: 3桁カラーコードの短縮形式。各桁を展開すると #RRGGBB になります。例: #3A9 → #33AA99。
3桁カラーコード: 3桁形式のHEXカラーコードの呼び方。縮約版で #RGB のこと。
6桁カラーコード: 6桁形式のHEXカラーコードの呼び方。#RRGGBB のこと。
RGB: 赤・緑・青の3色成分を0〜255の整数で表現するカラー表現。加法混色の基本モデル。
RGBA: RGBにアルファ値を追加した表現。alpha は透明度を表し、0.0（完全透過）〜1.0（完全不透明）の範囲。
アルファ値: 透明度を表す値。0.0 は透明、1.0 は不透明。
透明度: 色の不透過度や透過度を表す概念。アルファチャンネルで表現されることが多い。
8桁HEXカラーコード: 8桁のHEXカラーコード。#RRGGBBAA の形式で赤緑青に加えてアルファ情報を同時に表現します。
sRGB: ウェブで標準的に使われる色空間。ほとんどのデバイスで一貫した色再現を目指します。
色空間: 色を数値で表現する枠組み。例として sRGB、Display P3、Adobe RGB などがあります。
色モデル: 色を表現する方式の総称。RGB、HSL、HSV などが代表的です。
RGBからHEX変換: RGBの各成分を2桁の16進数に変換して連結し、先頭に # を付ける手順。
HEXからRGB変換: HEXの各成分を10進数に戻し、0〜255 の値としてRGBに戻す手順。
HSL: 色相(H)、彩度(S)、輝度(L)の3要素で色を表すモデル。色相環に沿って色を表現します。
HSV: 色相(H)、彩度(S)、明度(V)の表現。HSV系は明度を直感的に扱いやすいことが多いです。
色相: 色の基本的な属性で、赤・青・緑などの区別を決める軸。0〜360度で表現します。
彩度: 色の鮮やかさの程度。0% だと灰色、100% だと最も鮮やかな状態です。
明度/輝度: 色の明るさの指標。HSLのLやHSVのVとして表現されます。
コントラスト比: 前景と背景の明暗差の指標。WCAG などの基準で文字の可読性を評価します。
WCAG: ウェブコンテンツのアクセシビリティガイドライン。色のコントラスト基準も含まれます。
カラーキーワード: CSSで使える色名（red、blue、green など）。 HEX への変換が可能です。
CSSカラー: CSSで色を指定する方法。hex、rgb()、rgba()、hsl()、hsla()、カラー名などを使います。
rgb() 関数: CSSでRGB値を関数として指定する方法。例: rgb(255,0,0)。
rgba() 関数: RGBに透明度を含む関数。例: rgba(255,0,0,0.5)。
HSL() 関数: CSSでHSL表現を指定する関数。例: hsl(210, 50%, 60%)。
HSLA() 関数: HSL表現に透明度を加えた関数。例: hsla(210, 50%, 60%, 0.5)。
Web安全カラー: 旧ブラウザ互換のために用いられた216色のカラー群。現代は必須ではないが知識として有用です。
補色: 色相環の反対側に位置する色。対比を強める際によく使われます。