Selector de color

Resumen de la herramienta: Herramienta Selector de Color

Esta herramienta proporciona un sistema integral de selección y gestión de colores. Soporta conversiones entre múltiples formatos de color, generación de paletas, análisis de contraste y sistemas de temas, convirtiéndola en una herramienta esencial para diseñadores y desarrolladores.

¿Qué es Herramienta Selector de Color?

Herramienta Selector de Color te permite seleccionar colores y exportar valores para previsualizar y exportar rápido.

Cómo usarlo

1. Sube un archivo o ingresa el contenido.
2. Ajusta tamaño, calidad, formato o efectos.
3. Previsualiza y descarga el resultado.

Casos de uso comunes

• Optimizar recursos para web y apps
• Convertir formatos para diseño/desarrollo
• Ediciones rápidas para redes o ecommerce

❓ Preguntas frecuentes

P1: ¿Se ve borroso tras comprimir?
R: Aumenta la calidad o reduce la compresión.

P2: ¿Necesitas transparencia?
R: Usa PNG/WebP u otro formato compatible.

P3: ¿Procesamiento por lotes?
R: Procesa en lotes pequeños para mayor estabilidad.

✨ Características Principales

• 🎨 Soporte Multi-formato : Conversión entre HEX, RGB, HSL, HSV y más
• 🌈 Generación de Paletas : Generación automática de esquemas de color armoniosos
• 📊 Análisis de Contraste : Verificación de cumplimiento de estándares de accesibilidad WCAG
• 🎯 Selección Precisa de Color : Soporte para entrada y ajuste preciso de valores de color
• 💾 Historial de Colores : Guardado automático de colores utilizados recientemente

📖 Ejemplos de Uso

Conversión Básica de Colores

HEX a RGB:

Entrada: #3498db
Salida: rgb(52, 152, 219)

RGB a HSL:

Entrada: rgb(52, 152, 219)
Salida: hsl(204, 70%, 53%)

HSL a HSV:

Entrada: hsl(204, 70%, 53%)
Salida: hsv(204, 76%, 86%)

Generación de Paletas

Esquema de Colores Complementarios:

Color Base: #3498db (Azul)
Complementario: #db7834 (Naranja)

Esquema de Colores Triádicos:

Color Base: #3498db
Triádico 1: #34db98
Triádico 2: #db3456

Esquema de Colores Análogos:

Color Base: #3498db
Análogo 1: #3456db
Análogo 2: #34dbdb

🎯 Escenarios de Aplicación

1. Desarrollo de Sistema de Diseño

/* Sistema de diseño generado desde la herramienta de color */
:root {
  /* Colores primarios */
  --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;

  /* Colores semánticos */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* Colores neutrales */
  --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;
}

/* Estilos de componentes */
.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. Sistema de Colores de Marca

// Sistema de gestión de colores de marca
class BrandColorSystem {
  constructor() {
    this.brandColors = {
      primary: '#2563eb',
      secondary: '#7c3aed',
      accent: '#06b6d4',
      neutral: '#6b7280'
    };
    
    this.colorPalettes = new Map();
    this.generatePalettes();
  }

  // Generar paletas completas
  generatePalettes() {
    Object.entries(this.brandColors).forEach(([name, color]) => {
      this.colorPalettes.set(name, this.generateShades(color));
    });
  }

  // Generar tonos de 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;
  }

  // Verificar contraste de color
  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
    };
  }

  // Obtener luminancia relativa
  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;
  }

  // Conversión HEX a 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;
  }
}

// Ejemplo de uso
const brandSystem = new BrandColorSystem();

// Verificar contraste
const contrast = brandSystem.checkContrast('#2563eb', '#ffffff');
console.log('Verificación de contraste:', contrast);

// Obtener paleta primaria
const primaryPalette = brandSystem.getPalette('primary');
console.log('Paleta primaria:', primaryPalette);

3. Sistema de Temas Dinámicos

// Sistema de cambio de temas dinámicos
class ThemeManager {
  constructor() {
    this.themes = new Map();
    this.currentTheme = null;
    this.initializeDefaultThemes();
  }

  // Inicializar temas por defecto
  initializeDefaultThemes() {
    // Tema claro
    this.addTheme('light', {
      name: 'Tema Claro',
      colors: {
        background: '#ffffff',
        surface: '#f8fafc',
        primary: '#3b82f6',
        secondary: '#64748b',
        accent: '#06b6d4',
        text: '#1e293b',
        textSecondary: '#64748b',
        border: '#e2e8f0'
      }
    });

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

  // Aplicar tema
  applyTheme(themeId) {
    const theme = this.themes.get(themeId);
    if (!theme) {
      throw new Error(`Tema '${themeId}' no encontrado`);
    }

    const root = document.documentElement;
    
    // Aplicar variables de color
    Object.entries(theme.colors).forEach(([key, value]) => {
      root.style.setProperty(`--color-${key}`, value);
    });

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

    return theme;
  }

  // Detectar tema del sistema
  detectSystemTheme() {
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark';
    }
    return 'light';
  }
}

🔧 Detalles Técnicos

Formatos de Color Soportados

HEX (Hexadecimal):

• Formato: #RRGGBB o #RGB
• Ejemplo: #3498db, #fff

RGB (Rojo, Verde, Azul):

• Formato: rgb(r, g, b)
• Rango: 0-255 para cada canal
• Ejemplo: rgb(52, 152, 219)

HSL (Matiz, Saturación, Luminosidad):

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

HSV/HSB (Matiz, Saturación, Valor/Brillo):

• Similar a HSL pero usa Valor en lugar de Luminosidad
• Ejemplo: hsv(204, 76%, 86%)

Teoría del Color

Armonía de Color:

• Complementarios: Colores opuestos en la rueda de color
• Análogos: Colores adyacentes en la rueda de color
• Triádicos: Tres colores equidistantes en la rueda
• Monocromáticos: Variaciones de un solo color

Contraste y Accesibilidad:

• WCAG AA: Relación de contraste mínima 4.5:1
• WCAG AAA: Relación de contraste mínima 7:1
• Texto Grande: Relación de contraste mínima 3:1

💡 Consejos de Uso

• Accesibilidad : Siempre verificar el contraste entre texto y fondo
• Consistencia : Usar un sistema de color consistente en todo el proyecto
• Contexto Cultural : Considerar los significados culturales de los colores
• Pruebas en Dispositivos : Probar colores en diferentes dispositivos y condiciones de iluminación

⚠️ Notas Importantes

• Daltonismo : Considerar usuarios con deficiencias en la visión del color
• Salida de Impresión : Los colores pueden aparecer diferentes al imprimir
• Diferencias de Monitor : La calibración del monitor afecta la percepción del color
• Diferencias Culturales : Los significados de los colores varían entre culturas

🚀 Cómo Usar

1. Seleccionar Color : Usar el selector visual o ingresar códigos de color
2. Conversión de Formato : Ver automáticamente colores en diferentes formatos
3. Generar Paletas : Elegir tipo de armonía para generar esquemas de color
4. Análisis de Contraste : Verificar accesibilidad de combinaciones de color
5. Copiar para Usar : Hacer clic en cualquier código para copiarlo

Consejo : Esta herramienta procesa localmente en el lado del cliente y no envía datos a servidores, asegurando privacidad y respuesta rápida.