カラーコンバーター

カラーコンバーターは、HEX、RGB、HSL色形式間でリアルタイムに変換するオンラインツールです。カラーピッカーで直接色を選択するか、値を手動で入力できます。

#3498DB

🎨 カラーピッカー

HEX

Webで最もよく使用される

RGB

R

G

B

HSL

H

S

L

🎨 プリセットカラー

HEX、RGB、HSLカラーフォーマット間の変換をサポートします。カラーピッカーで直接色を選択するか、値を手動で入力できます。

機能

• 3つの形式をサポート: HEX、RGB、HSLの間で変換
• リアルタイム双方向変換: すべての形式に即座に反映
• ネイティブカラーピッカー: ブラウザの組み込みカラーピッカーで色を選択
• 10のプリセットカラー: よく使用される色に素早くアクセス
• ワンクリックコピー: 任意の色の値をクリックしてクリップボードにコピー
• ビジュアルプレビュー: 選択した色をリアルタイムで表示

色形式の説明

HEX（16進数）

Web開発で最もよく使用される色形式。6桁の16進数（0-9、A-F）を使用して色を表します。

形式: #RRGGBB

• RR: 赤（00-FF）
• GG: 緑（00-FF）
• BB: 青（00-FF）

/* 例 */
#FF0000  /* 純粋な赤 */
#00FF00  /* 純粋な緑 */
#0000FF  /* 純粋な青 */
#FFFFFF  /* 白 */
#000000  /* 黒 */
#808080  /* グレー */

3桁の短縮形: 各ペアが同じ場合、3桁を使用できます：

#F00 = #FF0000  /* 赤 */
#0F0 = #00FF00  /* 緑 */
#00F = #0000FF  /* 青 */

RGB（Red, Green, Blue）

3つの値（0-255）を使用して赤、緑、青の成分を表します。

形式: rgb(R, G, B)

• R: 赤（0-255）
• G: 緑（0-255）
• B: 青（0-255）

/* 例 */
rgb(255, 0, 0)    /* 純粋な赤 */
rgb(0, 255, 0)    /* 純粋な緑 */
rgb(0, 0, 255)    /* 純粋な青 */
rgb(255, 255, 255) /* 白 */
rgb(0, 0, 0)      /* 黒 */
rgb(128, 128, 128) /* グレー */

RGBA（アルファ/不透明度付き）:

rgba(255, 0, 0, 0.5)  /* 50%透明な赤 */
rgba(0, 0, 0, 0.8)    /* 80%不透明な黒 */

HSL（Hue, Saturation, Lightness）

人間にとってより直感的。色相、彩度、明度の観点から色を記述します。

形式: hsl(H, S%, L%)

• H: 色相（0-360°） - カラーホイール上の位置
• S: 彩度（0-100%） - 色の強度
• L: 明度（0-100%） - 明るさ

/* 例 */
hsl(0, 100%, 50%)    /* 純粋な赤 */
hsl(120, 100%, 50%)  /* 純粋な緑 */
hsl(240, 100%, 50%)  /* 純粋な青 */
hsl(0, 0%, 100%)     /* 白 */
hsl(0, 0%, 0%)       /* 黒 */
hsl(0, 0%, 50%)      /* グレー */

色相ホイール（0-360°）:

• 0° = 赤
• 60° = 黄
• 120° = 緑
• 180° = シアン
• 240° = 青
• 300° = マゼンタ
• 360° = 赤（開始に戻る）

HSLA（アルファ/不透明度付き）:

hsla(0, 100%, 50%, 0.5)  /* 50%透明な赤 */

色理論

補色

カラーホイール上で反対側にある色：

function getComplementary(hex) {
  const rgb = hexToRgb(hex);
  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);

  // 色相に180°を加える
  const compHue = (hsl.h + 180) % 360;

  const compRgb = hslToRgb(compHue, hsl.s, hsl.l);
  return rgbToHex(compRgb.r, compRgb.g, compRgb.b);
}

getComplementary('#FF0000'); // "#00FFFF" (シアン)

類似色

カラーホイール上で隣接する色（±30°）：

function getAnalogous(hex) {
  const rgb = hexToRgb(hex);
  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);

  const colors = [-30, 0, 30].map(offset => {
    const newHue = (hsl.h + offset + 360) % 360;
    const newRgb = hslToRgb(newHue, hsl.s, hsl.l);
    return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
  });

  return colors;
}

getAnalogous('#FF0000');
// ["#FF0080", "#FF0000", "#FF8000"]

トライアド配色

カラーホイール上で均等に配置された3色（120°間隔）：

function getTriadic(hex) {
  const rgb = hexToRgb(hex);
  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);

  const colors = [0, 120, 240].map(offset => {
    const newHue = (hsl.h + offset) % 360;
    const newRgb = hslToRgb(newHue, hsl.s, hsl.l);
    return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
  });

  return colors;
}

getTriadic('#FF0000');
// ["#FF0000", "#00FF00", "#0000FF"]

よくある質問

Q1. どの色形式を使用すべきですか？

A:

• HEX: Web開発で最も一般的、コンパクト
• RGB: 直感的、個々のチャンネルの操作が容易
• HSL: 人間の理解に最適、色のバリエーション作成が容易

ニーズと好みに基づいて選択してください。CSSでは3つすべてが同等に機能します。

Q2. コード代わりに色名を使用できますか？

A: はい！CSSは140以上の名前付き色をサポートしています：

.element {
  color: red;              /* 名前付き色 */
  background-color: blue;  /* 名前付き色 */
  border-color: #FF0000;   /* HEX相当 */
}

ただし、名前付き色はHEX/RGB/HSLで使用できる数百万色と比較して精度が低く、オプションが限られています。

Q3. RGBとRGBAの違いは？

A:

• RGB: 不透明な色（透明度なし）
• RGBA: 透明度のためのアルファチャンネル（0-1）を含む

.opaque {
  background-color: rgb(255, 0, 0);     /* 純色の赤 */
}

.transparent {
  background-color: rgba(255, 0, 0, 0.5); /* 50%透明な赤 */
}

関連ツール

• UUIDジェネレーター: 一意の識別子を生成
• タイムスタンプコンバーター: Unixタイムスタンプを日付に変換
• JSONフォーマッター: JSONデータの検証とフォーマット