---
title: "カラーコードとは？HEX・RGB・HSLで色を指定する基礎"
description: "CSSで色を指定するHEX・RGB・HSLの書き方の違いが分からなくて困る人向けに、それぞれの特徴と選び方の基準を整理。半透明を扱うrgba・hslaや、実務で使いやすい形式を選ぶ判断軸まで基礎から解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/color-code-term"
markdown: "https://giga-site.com/articles/color-code-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# カラーコードとは？HEX・RGB・HSLで色を指定する基礎

Webで色を指定するとき、#ffffffやrgb()といった書き方を見たことがあるでしょう。これらはカラーコードと呼ばれ、色を数値で正確に表すための仕組みです。この記事では、HEX・RGB・HSLという3つの書き方の違いと使い分け、半透明の指定のしかたまでをやさしく整理します。

> Source HTML: https://giga-site.com/articles/color-code-term
> Article index: https://giga-site.com/articles/index.md

## カラーコードとは

カラーコードとは、色を数値や記号で正確に表すための表記方法です。Webでは「赤っぽい色」のような曖昧な指定ではなく、誰が見ても同じ色になるよう、コードで色を指定します。

画面の色は基本的に光の三原色である赤（Red）・緑（Green）・青（Blue）の組み合わせで作られます。これらをどれだけ混ぜるかを数値で表すのがカラーコードの考え方です。

代表的な書き方にはHEX（16進数）、RGB、HSLの3つがあり、同じ色でも異なる形式で表現できます。それぞれに向いた場面があります。

## HEX（16進数）

HEXは、シャープ記号に続けて6桁の英数字で色を表す形式です。たとえば白は#ffffff、黒は#000000です。最初の2桁が赤、次の2桁が緑、最後の2桁が青の強さを表します。

各2桁は16進数で00からffまでの値をとり、00が最も弱く、ffが最も強い状態です。Webの色指定で最もよく見かける形式で、簡潔に書けるのが利点です。

同じ色を2文字ずつ繰り返す場合は、3桁に短縮して書けることもあります。たとえば#ffffffは#fffと書けます。

## 実務ではどこで関係する？

カラーコードは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

カラーコードについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## RGBとHSL

RGBは、赤・緑・青の強さをそれぞれ0から255の数値で指定する形式です。rgb(255, 255, 255)なら白を表します。HEXと同じ色を表しますが、数値が直感的に読み取りやすいのが特徴です。

HSLは、色相（Hue）・彩度（Saturation）・明度（Lightness）の3つで色を表す形式です。色相は色味、彩度は鮮やかさ、明度は明るさを示します。「同じ色味のまま少し明るくしたい」といった調整がしやすいのが利点です。

どの形式でも表せる色は同じですが、HEXは簡潔さ、RGBは分かりやすさ、HSLは調整のしやすさという違いがあります。目的に応じて使い分けるとよいでしょう。

## 透明度の指定と使い分けの手順

色には透明度（不透明度）を加えることもできます。RGBにアルファ値を加えたrgba()や、HSLにアルファを加えたhsla()を使うと、半透明の色を作れます。HEXでも末尾に2桁を加えて透明度を表せる場合があります。

実際に色を選んで指定するときは、次のような流れで進めると迷いにくくなります。

1. 使いたい色をカラーピッカーなどで選ぶ
2. その色のカラーコードを確認する（HEXやRGBで表示されることが多い）
3. 用途に合わせて形式を選ぶ（簡潔ならHEX、調整重視ならHSL）
4. 半透明にしたい場合はrgba()やhsla()でアルファ値を加える
5. 実際の画面で見え方を確認し、必要なら微調整する

## まとめと確認の場面

カラーコードは、色を正確に伝えるための共通言語です。HEX・RGB・HSLの違いを理解しておけば、場面に応じて最適な書き方を選べます。透明度を扱えることも覚えておくと表現の幅が広がります。

配色を決めたHTMLを関係者と共有して、実際の画面での色味を確認したいときは、ギガサイト便が便利です。HTMLやZIPをドロップするだけで共有URLが発行でき、複数の配色案を同じURLのまま差し替えながら見比べてもらえます。

## よくある質問

### HEXとRGBはどちらを使えばよいですか？

どちらも同じ色を表せます。簡潔に書きたいならHEX、各色の強さを数値で直感的に把握したいならRGBが向いています。好みやチームの慣習で選んで問題ありません。

### HSLは何が便利なのですか？

HSLは色相・彩度・明度で色を表すため、「同じ色味のまま少し明るく/暗くする」といった調整がしやすいのが利点です。色のバリエーションを作るときに役立ちます。

### #fffと#ffffffは同じ色ですか？

はい。HEXは同じ文字が2つずつ並ぶ場合に3桁へ短縮できます。#fffは#ffffffの省略形で、どちらも白を表します。

### 半透明の色はどう指定しますか？

RGBにアルファ値を加えたrgba()や、HSLにアルファを加えたhsla()を使うと半透明を表現できます。アルファ値は不透明度を表し、0で完全な透明、最大で完全な不透明になります。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [コントラスト比とは？文字が読みやすい配色の基礎](https://giga-site.com/articles/color-contrast-term/index.md)
- [HTTPステータスコードとは？主要な番号の意味](https://giga-site.com/articles/what-is-http-status-code/index.md)
- [Flexboxとは？要素を横並び・縦並びに整えるCSSの基礎](https://giga-site.com/articles/flexbox-term/index.md)
- [CSS Gridとは？格子状にレイアウトを組む仕組みをやさしく解説](https://giga-site.com/articles/grid-layout-term/index.md)
- [メディアクエリとは？画面幅でデザインを切り替えるCSSの基礎](https://giga-site.com/articles/media-query-term/index.md)
- [CSSセレクタとは？要素を狙ってスタイルを当てる基礎](https://giga-site.com/articles/css-selector-term/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "カラーコードとは？HEX・RGB・HSLで色を指定する基礎",
  "description": "CSSで色を指定するHEX・RGB・HSLの書き方の違いが分からなくて困る人向けに、それぞれの特徴と選び方の基準を整理。半透明を扱うrgba・hslaや、実務で使いやすい形式を選ぶ判断軸まで基礎から解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/color-code-term",
  "url": "https://giga-site.com/articles/color-code-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "HEXとRGBはどちらを使えばよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "どちらも同じ色を表せます。簡潔に書きたいならHEX、各色の強さを数値で直感的に把握したいならRGBが向いています。好みやチームの慣習で選んで問題ありません。"
      }
    },
    {
      "@type": "Question",
      "name": "HSLは何が便利なのですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HSLは色相・彩度・明度で色を表すため、「同じ色味のまま少し明るく/暗くする」といった調整がしやすいのが利点です。色のバリエーションを作るときに役立ちます。"
      }
    },
    {
      "@type": "Question",
      "name": "#fffと#ffffffは同じ色ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい。HEXは同じ文字が2つずつ並ぶ場合に3桁へ短縮できます。#fffは#ffffffの省略形で、どちらも白を表します。"
      }
    },
    {
      "@type": "Question",
      "name": "半透明の色はどう指定しますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "RGBにアルファ値を加えたrgba()や、HSLにアルファを加えたhsla()を使うと半透明を表現できます。アルファ値は不透明度を表し、0で完全な透明、最大で完全な不透明になります。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```