hex値・とは？初心者が押さえる色コードの基本と使い方共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

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

hex値とは何か

hex値とは、ウェブページで色を表すときに使われるカラーコードの一つです。英語では hex color value と呼ばれ、先頭に # をつけた6桁の16進数で表します。

基本の見方

6桁のうち、前半の2文字が red、次の2文字が green、最後の2文字が blue を表します。各成分は 00 から FF までの値をとり、00 は成分が全くない状態、FF は最大の色を意味します。

例: #FF0000 は赤が最大、他はゼロなので「赤い色」、#00FF00 は緑、#0000FF は青を表します。

3桁のショートハンド

色が単純な場合、3桁の短縮形を使うことがあります。#RGB は #RRGGBB に展開され、R が RR、G が GG、B が BB になります。例えば #3A7 は #33AA77 と同じ色です。

大文字小文字は関係ある？

hex値は大文字・小文字を区別しません。#aabbcc でも #AABBCC でも同じ色として解釈されます。

CSSでの使い方

色を指定する時は CSS の color, background-color, border-color などに使います。例: この文字は青みの色です。

カラーを選ぶコツ

読みやすさやデザインの印象を考える時、コントラストの確保が大切です。背景と文字のコントラストが低いと見づらくなります。アクセシビリティを意識するなら、WCAGのコントラスト比を参考に、十分な差を確保しましょう。色を決める時は、カラーコードを控えておくと後で変更が楽です。

色の組み合わせの例

以下は代表的な組み合わせの例です。色とその hex 値を見比べて覚えるのに役立ちます。

<th>色

hex値	見た目の例
赤	#FF0000
緑	#00FF00
青	#0000FF
青系の明るめ	#1E90FF

この表を見れば、hex値がどのように色を作っているかが直感的に分かります。覚えるポイントは、6桁の数字が赤・緑・青の順番で並んでいること、そして 00 〜 FF の範囲で表されることです。

拡張: 8桁の hex 値

一部の場面では透明度を同時に指定するため、8桁の hex 値も使われます。例: #RRGGBBAA の形で AA に透明度を示す値を入れます。AA が00なら完全に透明、FFなら不透明です。

まとめ

hex値・とは？と聞かれたら、ウェブ上で色を数字で指定する基本的な方法の一つであり、6桁の16進数で赤・緑・青を表す値であると覚えておけばOKです。3桁の略式、大小文字の区別のなさ、CSS での適用方法、そしてコントラストを意識した色選びが、日常のウェブ制作で役立ちます。

hex値の同意語

16進数値: 十六進法で表現された値のこと。0-9とA-Fを用いて表す数値を指します。
16進数: 基数が16の数の表現。数値を16進で表したもの全般を指します。
十六進数値: 十六進法で表現された数値のこと。16進数と同義です。
十六進法値: 十六進法を用いて表現された値のこと。16進数の値を指します。
16進表記: 数値を16進法で書く表記方法のこと。
十六進表記: 数値を十六進法で書く表記方法のこと。
16進数表現: 数値を16進法で表した表現のこと。
16進コード: 16進法で表現されたコード・値のこと。色コードやデータコードなどに使われます。
カラーコード: ウェブカラーなどを表す hex 表記の色コードのこと。#RRGGBB 形式などを指します。
HEX値: 16進数表記の値そのものを指す、英語の HEX の日本語表現です。
HEXコード: HEX で表現されたコードのこと。色コードやデータコードなどに使われます。
カラーHEX値: 色を表す hex 値、例: #RRGGBB の形を指します。
色の16進数表現: 色を16進数で表した表現のことです。
0x表現の値: 0x で始まる hex 表現の値のこと。プログラミングでよく使われます。
0x表記: 0x で始まる hex 表現の書き方のこと。

hex値の対義語・反対語

十進値: hex値を十進法で表現した値。例として、#AABBCC の各成分を十進数で表すと (170, 187, 204) のようになる。
十進数値: 十進法で表した数値の総称。hex値の対義として、色を十進数の表現（例: RGBの各成分を0-255の十進数）で表すときに使われる。
二進値: hex値を二進法で表現した値。ビット列としての表現になる。
二進数表現: 二進法による表現。R, G, B の各成分を二進数のビット列で表す場合など。
RGB三値: 赤・緑・青を0〜255の十進数で表した3つの値。hexコードをRGBの十進数表現へ分解したもの。
RGB表現: RGB形式で色を表す表現。R, G, B の3値を通常は0-255の十進数で並べる表現。
HSL表現: 色相・彩度・明度で色を表現する形式。hex値をHSLへ変換して表す場合などに用いられる。
CMYK表現: シアン・マゼンタ・イエロー・ブラックの四色表現。印刷用途など、デジタル色表現とは別の色表現系として使われる。
色名: 色の名称で色を表す表現。redやblueのような色名は、hexコードの代替として用いられることがある。

hex値の共起語

hex値: 色を表す16進数表現の値。HTML/CSSで色指定に使われ、先頭に#を付けて #RRGGBB の形式が一般的です。
16進数カラーコード: 色を表す16進数表現。6桁の RRGGBB または 8桁の RRGGBBAA の形で表されます。
色コード: 色を識別するためのコードの総称。HEXだけでなくRGB/名前なども含みます。
HTMLカラーコード: HTMLで色を指定するコード。#RRGGBB 形式が基本です。
CSSカラーコード: CSSで使うカラー指定のコード。HEX、RGB(a)、HSL などの形式を含みます。
#RRGGBB: ウェブで使われる代表的な HEX 表記。赤・緑・青を2桁ずつ、先頭に # を付けます。
RGB: 赤・緑・青の成分を0〜255の数値で表す色表現。HEXと相互変換可能です。
RGBA: RGBに透過度(アルファ)を加えた表現。CSSでは rgba(r,g,b,a) や #RRGGBBAA 形式があります。
十六進数: 基数が16の数値表現。hex値はこの形式の一種です。
16進表記: 色を16進数で表す表記法。HEX表記と同義です。
カラーピッカー: 色を選ぶツール。HEX値を直接取得したり、微妙な色の調整をします。
ウェブカラー: Webデザインで使われる色の総称。HEX値と色名の対応がよく用いられます。
色名とコードの対応: 特定の色名とHEXの対応関係のこと。代表的にはウェブカラー名との対応です。
カラーコード表: カラーコードを一覧化した表。よく使われるカラーコードを集めたものです。
カラーコード一覧: よく使われるHEX/カラーコードのリスト。
色の変換: HEXとRGBなどの別表現への変換を指します。
HEXからRGB変換: HEX値をRGBの三値に変換する操作。
RGBからHEX変換: RGBの三値をHEXに変換する操作。
8桁HEX: RGBAを表す8桁のHEX表記。#RRGGBBAA の形を取ります。
アルファ値: 透過度を表す値。RGBAのA部分に相当します。
透明度: 色の不透明さを示す指標。アルファ値で表現されます。
書き方: HEX値の基本的な書き方。先頭の #、6桁または8桁で記述します。
カラーコードの使い方: CSS/HTMLでカラー指定をする方法のこと。
背景色: Webページの背景に使う色のカラーコード。
文字色: テキストの色を指定するカラーコード。
コントラスト: 背景色と文字色の組み合わせの見やすさを評価する指標。
アクセシビリティ: 色の使い方が誰にとっても読みやすいかを考慮する設計ポイント。
CSS変数: CSSで色を変数として管理する際のカラーコードの使い方。
sRGB: 色空間の一つで、HEXは通常sRGBに基づく値として扱われます。
表記揺れ: 同じ色を指す異なる表記（例: #fff と #FFFFFF）などの差異のこと。

hex値の関連用語

hex値: 色を表す値の一種で、16進数表記を用いて RGB の成分を表します。ウェブでは通常 #RRGGBB の6桁、透明度を含む場合は #RRGGBBAA の8桁で表現します。
16進数: 基数が16の数の表現。0-9 の数字と A-F の文字を使い、色コードやデータを表すときに使われます。
HEXカラーコード: ウェブ上で色を指定する代表的な表現。先頭に # を付け、R・G・B の値を16進数で並べます。例: #FF6600。
6桁HEX: 6桁の HEX コード。R・G・B のそれぞれを2桁の16進数で表します（例: #RRGGBB）。
3桁HEX: 短縮表記。#RGB の形で、各成分を1桁で表し、実際にはそれぞれ2桁に展開されます（例: #F60 → #FF6600）。
8桁HEX: アルファ値を含む HEX コード。#RRGGBBAA の形式で、AA が透明度を表します。
RGB: 赤・緑・青の3成分で色を表すモデル。各成分は通常0〜255の整数で表します（例: RGB(255,0,0) は赤）。
RGBA: RGB にアルファ（透明度）を加えた表現。α は 0.0〜1.0 の範囲で指定します。
アルファ値: 色の透明度を表す成分。0%（完全に透明）〜100%（不透明）で表現することが多いです。
0x表記: 多くのプログラミング言語で16進数のリテラルを表す接頭辞。例: 0xFF は 255 に対応します。
色コード: 色を表す一般的な表現の総称。HEX・RGB・カラー名などを含みます。
CSSカラー: CSS で色を指定する方法。HEX、RGB/RGBA、HSL/HSLA、名前付き色などが使えます。
色指定: デザインやウェブ制作で色を決めて適用する作業。コードでの指定が主です。
色空間: 色を数学的に表す枠組み。RGB（スクリーン表示）、sRGB（標準的なガンマ補正付き空間）などが代表例です。
RGB↔HEX変換: RGB の三つの値と HEX の6桁/3桁の対応関係を変換する作業。例: #FFA500 ↔ RGB(255,165,0)。
HSL: 色相・彩度・明度の3要素で色を表すモデル。色の調整が直感的で、 HEX からの変換にも用います。
HSV: 色相・彩度・明度（Value）で色を表すモデル。HSLと似ていますが明度の扱いが異なります。
ウェブカラー名: CSS で使える名前付き色。red や blue など、HEX の代わりに使えます。
ウェブセーフカラー: 旧来の表示機器でも安定して表示される216色のカラーセット。互換性を重視する場面で語られます。
正規表現による検証: HEXカラーコードの形式を検証する正規表現の一例。例: ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8})$
大文字小文字の扱い: HEX は大文字・小文字を区別しても色として同一に扱われることが多く、実用上は問われません。