メインコンテンツにスキップ

カラーコンバーター

HEX、RGB、HSL色形式間の変換をサポートする無料オンラインツールです。

#3498DB

🎨 색상 선택

HEX

웹에서 가장 많이 사용

RGB

HSL

🎨 미리 설정된 색상

HEX, RGB, HSL 색상 형식 간 변환을 지원합니다. 색상 피커로 직접 색상을 선택하거나, 값을 직접 입력할 수 있습니다.

色形式とは?​

デジタル環境で色を表現する様々な方法があります。各形式には特定の用途と利点があり、状況に応じて適切な形式を選択する必要があります。

主要機能​

  • 3つの形式サポート: HEX、RGB、HSL
  • リアルタイム変換: 1つの形式を変更すると、すべての形式が自動更新
  • カラーピッカー: 視覚的に色を選択
  • 大きなプレビュー: 選択した色を大きく確認
  • 即座にコピー: 各形式をワンクリックでコピー
  • プリセット色: 10種類の人気のある色を提供

色形式の説明​

HEX (Hexadecimal) - 16進数​

Webで最も多く使用される形式です。

形式:

#RRGGBB

例:

#3498db  /* 青 */
#e74c3c  /* 赤 */
#2ecc71  /* 緑 */

構造:

  • #: プレフィックス
  • RR: 赤 (00-FF)
  • GG: 緑 (00-FF)
  • BB: 青 (00-FF)

3桁省略形式:

#f00  /* #ff0000と同じ */
#abc  /* #aabbccと同じ */

長所:

  • 簡潔
  • CSSで基本形式
  • コピーしやすい

短所:

  • 人間が理解しにくい
  • 色の調整が直感的でない

RGB (Red, Green, Blue)​

光の三原色を使用した形式です。

形式:

rgb(R, G, B)

例:

rgb(52, 152, 219)   /* 青 */
rgb(231, 76, 60)    /* 赤 */
rgb(46, 204, 113)   /* 緑 */

値の範囲:

  • 各チャンネル: 0-255
  • 0 = 暗い、255 = 明るい

RGBA (透明度含む):

rgba(52, 152, 219, 0.5)  /* 50%透明度 */

長所:

  • 理解しやすい
  • 各色チャンネルを独立して調整可能
  • プログラミングで直感的

短所:

  • HEXより長い
  • 明度調整が直感的でない

HSL (Hue, Saturation, Lightness)​

色相、彩度、明度を使用した形式です。

形式:

hsl(H, S%, L%)

例:

hsl(204, 70%, 53%)   /* 青 */
hsl(6, 78%, 57%)     /* 赤 */
hsl(145, 63%, 49%)   /* 緑 */

値の範囲:

  • H (Hue): 0-360° (色相ホイール)
    • 0° = 赤
    • 120° = 緑
    • 240° = 青
  • S (Saturation): 0-100% (彩度)
    • 0% = グレー
    • 100% = 純粋な色
  • L (Lightness): 0-100% (明度)
    • 0% = 黒
    • 50% = 純粋な色
    • 100% = 白

HSLA (透明度含む):

hsla(204, 70%, 53%, 0.5)  /* 50%透明度 */

長所:

  • 色の調整が非常に直感的
  • 明度/彩度の調整が簡単
  • カラーパレット生成に便利

短所:

  • HEX/RGBより直感的でない
  • 一部の古いブラウザは未対応

色形式の比較​

特徴HEXRGBHSL
簡潔性⭐⭐⭐⭐⭐⭐⭐
可読性⭐⭐⭐⭐⭐⭐
CSSサポート⭐⭐⭐⭐⭐⭐⭐⭐⭐
調整の容易さ⭐⭐⭐⭐⭐⭐
透明度✗✓✓

使用例​

1. CSSスタイリング​

/* HEX */
.button {
  background-color: #3498db;
}

/* RGB */
.button {
  background-color: rgb(52, 152, 219);
}

/* HSL */
.button {
  background-color: hsl(204, 70%, 53%);
}

2. カラーパレット生成​

/* HSLで類似色を簡単に生成 */
.primary   { color: hsl(204, 70%, 53%); }
.lighter   { color: hsl(204, 70%, 70%); }  /* L増加 */
.darker    { color: hsl(204, 70%, 35%); }  /* L減少 */
.desaturate{ color: hsl(204, 40%, 53%); }  /* S減少 */

3. JavaScript動的色​

// RGBでグラデーション生成
for (let i = 0; i < 255; i++) {
  const color = `rgb(${i}, 100, 200)`;
  // 使用
}

// HSLで虹色
for (let h = 0; h < 360; h += 30) {
  const color = `hsl(${h}, 100%, 50%)`;
  // 使用
}

4. デザインシステム​

/* 変数で色管理 */
:root {
  --primary-h: 204;
  --primary-s: 70%;
  --primary-l: 53%;

  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-light: hsl(var(--primary-h), var(--primary-s), 70%);
  --primary-dark: hsl(var(--primary-h), var(--primary-s), 35%);
}

5. アクセシビリティの改善​

// 明度基準でテキスト色を決定
function getTextColor(bgColor) {
  const [h, s, l] = parseHSL(bgColor);
  return l > 50 ? '#000000' : '#ffffff';
}

変換公式​

HEX → RGB​

function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  };
}

RGB → HEX​

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

RGB → HSL​

function rgbToHsl(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0;
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }

  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    l: Math.round(l * 100)
  };
}

プリセット色​

このツールは人気のある10種類の色を提供します:

色HEX名前
🔴#e74c3c赤
🔵#3498db青
🟢#2ecc71緑
🟠#f39c12オレンジ
🟣#9b59b6紫
🔷#1abc9cターコイズ
⚫#34495eダークグレー
🟤#e67e22ブラウン
⚪#95a5a6ライトグレー
🟧#d35400ダークオレンジ

実用的なヒント​

1. 色を明るく/暗くする​

/* 元 */
.button { background: hsl(204, 70%, 53%); }

/* 10%明るく */
.button-light { background: hsl(204, 70%, 63%); }

/* 10%暗く */
.button-dark { background: hsl(204, 70%, 43%); }

2. 透明度を追加​

/* HEXに透明度追加 (8桁) */
#3498db80  /* 50%透明度 */

/* RGB/HSL */
rgba(52, 152, 219, 0.5)
hsla(204, 70%, 53%, 0.5)

3. 補色を見つける​

// HSLでH + 180度
function getComplementary(h, s, l) {
  return `hsl(${(h + 180) % 360}, ${s}%, ${l}%)`;
}

4. グレースケール変換​

/* 彩度を0に */
.grayscale {
  filter: grayscale(100%);
  /* または */
  background: hsl(204, 0%, 53%);
}

5. 色のアクセシビリティチェック​

// WCAGコントラスト比計算
function getContrastRatio(color1, color2) {
  const l1 = getLuminance(color1);
  const l2 = getLuminance(color2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

// 4.5:1以上推奨 (通常のテキスト)
// 3:1以上推奨 (大きなテキスト)

色理論​

色の調和​

1. 補色 (Complementary)​

H + 180°
例: 青(204°) + オレンジ(24°)

2. 類似色 (Analogous)​

H ± 30°
例: 青(204°)、ターコイズ(174°)、藍(234°)

3. 三色 (Triadic)​

H, H+120°, H+240°
例: 赤(0°)、黄(120°)、青(240°)

4. 四角 (Tetradic)​

H, H+90°, H+180°, H+270°

色の心理学​

色意味
🔴 赤情熱、エネルギー、危険
🔵 青信頼、平和、冷静
🟢 緑自然、成長、安定
🟡 黄幸福、楽観、注意
🟣 紫高級、創造性、神秘
🟠 オレンジ親しみ、活力、温かさ

よくある質問​

Q: どの形式を使用すべきですか?​

  • HEX: CSSで簡潔に使用、コピーしやすい
  • RGB: プログラミング、各チャンネル調整が必要な場合
  • HSL: カラーパレット生成、明度/彩度調整時

一般的にはHEXの使用を推奨!

Q: HEXの3桁と6桁の違いは?​

3桁は6桁の省略形式です:

  • #f00 = #ff0000
  • #abc = #aabbcc

正確な色が必要な場合は6桁を使用!

Q: RGBの最大値がなぜ255ですか?​

8ビット = 2^8 = 256通りの値 (0-255) 総色数 = 256 × 256 × 256 = 16,777,216色

Q: HSLのHがなぜ360度ですか?​

色相ホイールが円(circle)だからです。360度 = 一周

Q: 透明度はどう表現しますか?​

  • HEX: 8桁 (#RRGGBBAA)
  • RGB: RGBAを使用
  • HSL: HSLAを使用

Q: 色覚異常ユーザーへのヒントは?​

  • 色だけで情報伝達を禁止
  • テキストラベルを追加
  • 十分なコントラスト比を維持 (4.5:1以上)
  • 色覚異常シミュレーターでテスト

関連ツール​

パフォーマンス​

  • 変換速度: ミリ秒未満
  • リアルタイム更新: 即座
  • メモリ使用: 最小
  • オフライン動作: 完全サポート

ブラウザ互換性​

形式ChromeFirefoxSafariEdge
HEX✓✓✓✓
RGB✓✓✓✓
RGBA✓✓✓✓
HSL✓✓✓✓
HSLA✓✓✓✓

💬 このツールは役に立ちましたか?​

このカラーコンバーターは、Web開発者、デザイナー、デジタルアーティストにとって必須のツールです。HEX、RGB、HSL間の変換を瞬時に行い、色の選択と調整を効率化します。

プライバシー保護​

このツールは完全にクライアント側で動作します。選択した色情報はサーバーに送信されず、ブラウザ内でのみ処理されます。