カラーピッカー

ツール概要：カラーピッカーツール

このツールは包括的な色選択・管理システムを提供します。複数の色形式変換、パレット生成、コントラスト分析、テーマシステムをサポートし、デザイナーや開発者にとって必須のツールです。

カラーピッカーツールとは？

カラーピッカーツールは色を選択して値を取得するし、素早くプレビューと出力ができます。

使い方

1. ファイルをアップロードするか内容を入力します。
2. サイズ・品質・形式・効果を調整します。
3. プレビューしてダウンロードします。

よくある利用シーン

• Webやアプリ用素材の最適化
• デザイン/開発向けの形式変換
• SNSやEC向けの簡易編集

❓ よくある質問

Q1: 圧縮後にぼやける？
A: 品質を上げるか圧縮率を下げてください。

Q2: 透明背景を保持したい？
A: PNG/WebP など対応形式を使ってください。

Q3: 一括処理は？
A: 安定のため小分け処理を推奨します。

✨ 主な機能

• 🎨 多形式サポート : HEX、RGB、HSL、HSVなどの形式間変換
• 🌈 パレット生成 : 調和のとれた配色スキームの自動生成
• 📊 コントラスト分析 : WCAGアクセシビリティ標準準拠チェック
• 🎯 精密な色選択 : 正確な色値の入力と調整をサポート
• 💾 色履歴 : 最近使用した色の自動保存

📖 使用例

基本的な色変換

HEXからRGBへ:

入力: #3498db
出力: rgb(52, 152, 219)

RGBからHSLへ:

入力: rgb(52, 152, 219)
出力: hsl(204, 70%, 53%)

HSLからHSVへ:

入力: hsl(204, 70%, 53%)
出力: hsv(204, 76%, 86%)

パレット生成

補色配色:

基本色: #3498db (青)
補色: #db7834 (オレンジ)

三角配色:

基本色: #3498db
三角色1: #34db98
三角色2: #db3456

類似色配色:

基本色: #3498db
類似色1: #3456db
類似色2: #34dbdb

🎯 応用シナリオ

1. デザインシステム開発

/* カラーツールから生成されたデザインシステム */
:root {
  /* プライマリカラー */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;

  /* セマンティックカラー */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* ニュートラルカラー */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
}

/* コンポーネントスタイル */
.btn-primary {
  background-color: var(--primary-600);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: var(--primary-700);
}

.btn-primary:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

2. ブランドカラーシステム

// ブランドカラー管理システム
class BrandColorSystem {
  constructor() {
    this.brandColors = {
      primary: '#2563eb',
      secondary: '#7c3aed',
      accent: '#06b6d4',
      neutral: '#6b7280'
    };
    
    this.colorPalettes = new Map();
    this.generatePalettes();
  }

  // 完全なパレットを生成
  generatePalettes() {
    Object.entries(this.brandColors).forEach(([name, color]) => {
      this.colorPalettes.set(name, this.generateShades(color));
    });
  }

  // 色の階調を生成
  generateShades(baseColor) {
    const shades = {};
    const lightness = [95, 90, 80, 70, 60, 50, 40, 30, 20, 10];
    
    lightness.forEach((l, index) => {
      const shade = (index + 1) * 100;
      shades[shade] = this.adjustLightness(baseColor, l);
    });
    
    return shades;
  }

  // 色のコントラストをチェック
  checkContrast(color1, color2) {
    const luminance1 = this.getLuminance(color1);
    const luminance2 = this.getLuminance(color2);
    
    const lighter = Math.max(luminance1, luminance2);
    const darker = Math.min(luminance1, luminance2);
    
    const contrast = (lighter + 0.05) / (darker + 0.05);
    
    return {
      ratio: contrast,
      aa: contrast >= 4.5,
      aaa: contrast >= 7,
      aaLarge: contrast >= 3
    };
  }

  // 相対輝度を取得
  getLuminance(hex) {
    const rgb = this.hexToRgb(hex);
    const [r, g, b] = [rgb.r, rgb.g, rgb.b].map(c => {
      c = c / 255;
      return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
    });
    
    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
  }

  // HEXからRGBへの変換
  hexToRgb(hex) {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null;
  }
}

// 使用例
const brandSystem = new BrandColorSystem();

// コントラストチェック
const contrast = brandSystem.checkContrast('#2563eb', '#ffffff');
console.log('コントラストチェック:', contrast);

// プライマリパレットを取得
const primaryPalette = brandSystem.getPalette('primary');
console.log('プライマリパレット:', primaryPalette);

3. 動的テーマシステム

// 動的テーマ切り替えシステム
class ThemeManager {
  constructor() {
    this.themes = new Map();
    this.currentTheme = null;
    this.initializeDefaultThemes();
  }

  // デフォルトテーマを初期化
  initializeDefaultThemes() {
    // ライトテーマ
    this.addTheme('light', {
      name: 'ライトテーマ',
      colors: {
        background: '#ffffff',
        surface: '#f8fafc',
        primary: '#3b82f6',
        secondary: '#64748b',
        accent: '#06b6d4',
        text: '#1e293b',
        textSecondary: '#64748b',
        border: '#e2e8f0'
      }
    });

    // ダークテーマ
    this.addTheme('dark', {
      name: 'ダークテーマ',
      colors: {
        background: '#0f172a',
        surface: '#1e293b',
        primary: '#60a5fa',
        secondary: '#94a3b8',
        accent: '#22d3ee',
        text: '#f1f5f9',
        textSecondary: '#94a3b8',
        border: '#334155'
      }
    });
  }

  // テーマを適用
  applyTheme(themeId) {
    const theme = this.themes.get(themeId);
    if (!theme) {
      throw new Error(`テーマ '${themeId}' が見つかりません`);
    }

    const root = document.documentElement;
    
    // カラー変数を適用
    Object.entries(theme.colors).forEach(([key, value]) => {
      root.style.setProperty(`--color-${key}`, value);
    });

    this.currentTheme = themeId;
    localStorage.setItem('preferred-theme', themeId);

    return theme;
  }

  // システムテーマを検出
  detectSystemTheme() {
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark';
    }
    return 'light';
  }
}

🔧 技術詳細

サポートされる色形式

HEX（16進数）:

• 形式: #RRGGBB または #RGB
• 例: #3498db, #fff

RGB（赤、緑、青）:

• 形式: rgb(r, g, b)
• 範囲: 各チャンネル0-255
• 例: rgb(52, 152, 219)

HSL（色相、彩度、明度）:

• 形式: hsl(h, s%, l%)
• H: 0-360°, S: 0-100%, L: 0-100%
• 例: hsl(204, 70%, 53%)

HSV/HSB（色相、彩度、明度/輝度）:

• HSLに似ているが、明度の代わりに輝度を使用
• 例: hsv(204, 76%, 86%)

色彩理論

色の調和:

• 補色: 色相環上で対向する色
• 類似色: 色相環上で隣接する色
• 三角色: 色相環上で等間隔の3色
• 単色: 単一色の変化

コントラストとアクセシビリティ:

• WCAG AA: 最小コントラスト比4.5:1
• WCAG AAA: 最小コントラスト比7:1
• 大きなテキスト: 最小コントラスト比3:1

💡 使用のコツ

• アクセシビリティ : テキストと背景のコントラストを常にチェック
• 一貫性 : プロジェクト全体で一貫した色システムを使用
• 文化的背景 : 色の文化的意味を考慮
• デバイステスト : 異なるデバイスと照明条件で色をテスト

⚠️ 重要な注意事項

• 色覚異常 : 色覚障害のあるユーザーを考慮
• 印刷出力 : 印刷時に色が異なって見える場合がある
• モニターの違い : モニターの校正が色の知覚に影響
• 文化的違い : 色の意味は文化によって異なる

🚀 使用方法

1. 色を選択 : ビジュアルピッカーを使用するか色コードを入力
2. 形式変換 : 異なる形式で色を自動表示
3. パレット生成 : 調和タイプを選択して配色スキームを生成
4. コントラスト分析 : 色の組み合わせのアクセシビリティをチェック
5. コピーして使用 : 任意のコードをクリックしてコピー

ヒント : このツールはクライアント側でローカル処理し、サーバーにデータを送信しないため、プライバシーが保護され、高速な応答が可能です。