Generátor kontrastních barev

Tento nástroj vám pomůže vygenerovat kontrastní barvu textu pro zadanou barvu pozadí. Zadejte barvu v libovolném formátu (HEX, RGB, RGBA) a nástroj vypočítá optimální barvu textu (černou nebo bílou) pro zajištění dobré čitelnosti.

Původní barva

#3498db

Kontrastní barva textu

#ffffff

Informace o kontrastu

Kontrastní poměr: 3.96:1

Kontrastní poměr měří rozdíl v jasnosti mezi textem a pozadím. Pro dobrou čitelnost doporučujeme:

Minimum

4.5:1

Doporučeno

7:1

Vynikající

10:1

JavaScript kód

// Funkce pro převod barvy do formátu RGBA
function parseColor(color) {
    // Odstranění mezer a převedení na malá písmena
    color = color.trim().toLowerCase();
    
    // Rozpoznání formátu a převod do RGBA
    if (color.startsWith('#')) {
        return hexToRgba(color);
    } else if (color.startsWith('rgb')) {
        return rgbToRgba(color);
    }
    
    throw new Error('Nepodporovaný formát barvy');
}

// Funkce pro převod HEX na RGBA
function hexToRgba(hex) {
    hex = hex.replace('#', '');
    
    if (hex.length === 3) {
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    
    if (hex.length !== 6) {
        throw new Error('Neplatný formát HEX barvy');
    }
    
    const r = parseInt(hex.substring(0, 2), 16);
    const g = parseInt(hex.substring(2, 4), 16);
    const b = parseInt(hex.substring(4, 6), 16);
    
    return { r, g, b, a: 1 };
}

// Funkce pro převod RGB/RGBA na objekt RGBA
function rgbToRgba(rgb) {
    const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/i);
    
    if (!match) {
        throw new Error('Neplatný formát RGB/RGBA barvy');
    }
    
    return {
        r: parseInt(match[1]),
        g: parseInt(match[2]),
        b: parseInt(match[3]),
        a: match[4] ? parseFloat(match[4]) : 1
    };
}

// Funkce pro výpočet relativního jasu
function getLuminance(r, g, b) {
    const [rs, gs, bs] = [r, g, 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 * rs + 0.7152 * gs + 0.0722 * bs;
}

// Funkce pro výpočet kontrastního poměru
function getContrastRatio(luminance1, luminance2) {
    const lighter = Math.max(luminance1, luminance2);
    const darker = Math.min(luminance1, luminance2);
    return (lighter + 0.05) / (darker + 0.05);
}

// Funkce pro získání kontrastní barvy
function getContrastColor(inputColor) {
    try {
        const rgba = parseColor(inputColor);
        const luminance = getLuminance(rgba.r, rgba.g, rgba.b);
        
        // Výpočet jasu černé a bílé
        const blackLuminance = 0;
        const whiteLuminance = 1;
        
        // Výpočet kontrastního poměru
        const contrastWithBlack = getContrastRatio(luminance, blackLuminance);
        const contrastWithWhite = getContrastRatio(whiteLuminance, luminance);
        
        // Výběr barvy s vyšším kontrastem
        return contrastWithBlack > contrastWithWhite ? '#000000' : '#ffffff';
    } catch (error) {
        console.error('Chyba při zpracování barvy:', error);
        return '#000000'; // Výchozí barva v případě chyby
    }
}