Can a color picker help me choose complementary colors for my website?

HTML Interface for Color Selection

We'll use an HTML5 <input type="color"> element as a basic color picker. JavaScript will handle the logic for calculating complementary colors.

JavaScript for Complementary Color Calculation

This JavaScript code demonstrates how to convert RGB to HSL, calculate the complementary hue, and convert back to RGB and Hex.

// Helper function to convert Hex to RGB
function hexToRgb(hex) {
    const bigint = parseInt(hex.slice(1), 16);
    const r = (bigint >> 16) & 255;
    const g = (bigint >> 8) & 255;
    const b = bigint & 255;
    return [r, g, b];
}

// Helper function to convert RGB to 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; // achromatic
    } 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); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }
    return [h * 360, s * 100, l * 100]; // Return hue in degrees, saturation and lightness in percent
}

// Helper function to convert HSL to RGB
function hslToRgb(h, s, l) {
    s /= 100; l /= 100;
    let r, g, b;

    if (s === 0) {
        r = g = b = l; // achromatic
    } else {
        const hue2rgb = (p, q, t) => {
            if (t < 0) t += 1;
            if (t > 1) t -= 1;
            if (t < 1/6) return p + (q - p) * 6 * t;
            if (t < 1/2) return q;
            if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        };
        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        const p = 2 * l - q;
        r = hue2rgb(p, q, h / 360 + 1/3);
        g = hue2rgb(p, q, h / 360);
        b = hue2rgb(p, q, h / 360 - 1/3);
    }
    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

// Helper function to convert RGB to Hex
function rgbToHex(r, g, b) {
    const toHex = (c) => {
        const hex = c.toString(16);
        return hex.length === 1 ? "0" + hex : hex;
    };
    return "#" + toHex(r) + toHex(g) + toHex(b);
}

// Function to calculate complementary color
function getComplementaryColor(hex) {
    const [r, g, b] = hexToRgb(hex);
    const [h, s, l] = rgbToHsl(r, g, b);

    // Calculate complementary hue
    const complementaryH = (h + 180) % 360;

    const [compR, compG, compB] = hslToRgb(complementaryH, s, l);
    const complementaryHex = rgbToHex(compR, compG, compB);

    return {
        hex: complementaryHex,
        rgb: `rgb(${compR}, ${compG}, ${compB})`
    };
}

// Event listener for the color picker
document.getElementById('base-color-picker').addEventListener('input', function(event) {
    const baseColorHex = event.target.value;
    const baseColorDisplay = document.getElementById('base-color-display');
    baseColorDisplay.style.backgroundColor = baseColorHex;

    const complementaryColors = getComplementaryColor(baseColorHex);

    document.getElementById('complementary-color-display').style.backgroundColor = complementaryColors.hex;
    document.getElementById('complementary-hex').textContent = complementaryColors.hex;
    document.getElementById('complementary-rgb').textContent = complementaryColors.rgb;
});

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    const initialColor = document.getElementById('base-color-picker').value;
    const complementaryColors = getComplementaryColor(initialColor);
    document.getElementById('complementary-hex').textContent = complementaryColors.hex;
    document.getElementById('complementary-rgb').textContent = complementaryColors.rgb;
});
        

Example Color Combinations in a Table

Here are some common complementary color pairings and their Hex codes, which a color picker can help you discover and manage.