カラーコードの種類と違い

Webデザインやフロントエンド開発では、色を数値で表現するための表記法が複数あります。

HEX（16進数カラーコード）

#rrggbb の形式で色を表現します。CSSで最もよく使われる表記法です。

  • #ff0000 → 赤
  • #00ff00 → 緑
  • #0000ff → 青
  • #ffffff → 白
  • #000000 → 黒

先頭の # に続く6桁は、赤（R）・緑（G）・青（B）それぞれを00〜FFの16進数で表したものです。

RGB（Red / Green / Blue）

rgb(255, 0, 0) のように、各チャンネルを0〜255の10進数で指定します。直感的に色を調整しやすい形式です。

HSL（Hue / Saturation / Lightness）

hsl(0, 100%, 50%) の形式で、色相・彩度・明度で色を表現します。

  • Hue（色相）: 0〜360°。0が赤、120が緑、240が青
  • Saturation（彩度）: 0〜100%。0%はグレー、100%が最も鮮やか
  • Lightness（明度）: 0〜100%。0%が黒、100%が白、50%が純色

HSLはデザインで色のバリエーションを作るとき（明るさだけを変えたい、彩度だけを落としたいなど）に特に便利です。

カラーコード変換ツールの使い方

基本操作

  1. カラーピッカー（左上の色付き四角）をクリックして視覚的に色を選択
  2. HEX入力欄に直接6桁の16進数を入力
  3. R/G/B スライダーまたは数値入力で各チャンネルを調整
  4. H/S/L スライダーで色相・彩度・明度を調整

いずれの方法で変更しても、他のすべての表示がリアルタイムで連動します。

コードのコピー

各表示カード右下の「コピー」ボタンをクリックすると、その形式のカラーコードをクリップボードにコピーできます。

WCAGコントラスト比とは

WCAG（Web Content Accessibility Guidelines）は、Webアクセシビリティの国際標準規格です。文字と背景のコントラスト比について、以下の基準が定められています。

基準コントラスト比対象
AA（最低限）4.5:1 以上通常サイズのテキスト
AA（大文字）3:1 以上18pt以上または14pt以上の太字
AAA（最高）7:1 以上より高いアクセシビリティが必要な場合

当ツールでは、選択した色を白背景・黒背景に配置した場合のコントラスト比を自動計算し、AA・AAAの合否を表示します。

コントラスト比の確認方法

  • テキストカラーを選択すると、白背景・黒背景それぞれとのコントラスト比が表示されます
  • 「AA」以上になるように色を調整することで、アクセシブルなデザインを実現できます

カラーパレットの活用

補色（Complementary Color）

色相環で正反対（180°）の色です。視覚的なコントラストが強く、CTAボタンなどで目立たせたいときに有効です。

類似色（Analogous Color）

色相環で隣り合う色（±15〜30°）です。統一感のあるデザインに向いています。

三角色相（Triadic Color）

色相環を3等分した位置の色（120°間隔）です。バランスよく3色を使いたいときに活用できます。

明度バリエーション

同じ色相・彩度で明度だけを変えることで、ボタンのホバー状態・テキストの強調・背景色などに使える統一感のある配色が作れます。

よくある質問

3桁のHEXコード（#fff）は使えますか？

当ツールは6桁形式に対応しています。3桁（#rgb）は各桁を繰り返して6桁に変換してから入力してください（例：#fff → #ffffff）。

Alpha（透明度）には対応していますか？

現在のバージョンでは不透明度（Alphaチャンネル）には対応していません。rgba() や hsla() の変換は対象外です。