

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Mix up to 4 colors together for free! Adjust percentages to create custom blends and hex codes instantly. A fast, easy-to-use tool for designers and creators.">
    <title>Free Color Mixer - Mix Up to 4 Colors Online | Anylistly</title>
    
        
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="https://anylistly.com//assets/css/style.css">
    
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-R0WQZK9Z1Z"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'G-R0WQZK9Z1Z');
    </script>
</head>
<body>
    <!-- Header Navigation -->
    <header>
        <div class="container">
            <nav>
                <!-- Logo -->
                <a href="https://anylistly.com/" class="logo">
                    <img src="https://anylistly.com//img/anylistly-logo.png" alt="Anylistly Logo">
                </a>
                
                <!-- Navigation Menu -->
                <ul class="nav-menu" id="navMenu">
                    <li><a href="https://anylistly.com/tools/" class="active">Tools</a></li>
                    <li><a href="https://anylistly.com/quotes/" class="">Quotes</a></li>
                    <li><a href="https://anylistly.com/countdowns/" class="">Countdowns</a></li>
                    <li><a href="https://anylistly.com/coloring-pages/" class="">Coloring Pages</a></li>
                </ul>
                
                <!-- Mobile Menu Toggle -->
                <div class="menu-toggle" id="menuToggle">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                
                <!-- Search Icon (can be enhanced later) -->
                <span class="search-icon">🔍</span>
            </nav>
        </div>
    </header>
    
    <!-- Main Content Starts Here (closed in footer.php) -->
    <main>
<!-- Breadcrumbs -->
<div class="container">
    <div class="breadcrumbs">
        <a href="https://anylistly.com/">Home</a>
        <span>›</span>
        <a href="https://anylistly.com/tools/">Free Tools</a>
        <span>›</span>
        <strong>Color Mixer</strong>
    </div>
</div>

<!-- Page Header Hero Section -->
<section class="page-header" style="background: linear-gradient(135deg, #fee2e2 0%, #fff 100%);">
    <div class="container" style="text-align: center;">
        <div style="font-size: 70px; margin-bottom: 16px;">🎨</div>
        <h1>Color Mixer Tool</h1>
        <p style="max-width: 650px; margin: 0 auto;">Mix up to 4 colors together! Adjust each color's percentage and create beautiful custom blends.</p>
    </div>
</section>

<!-- Tool Section -->
<section class="bg-gray">
    <div class="tool-container">
        <!-- Number of Colors Selection -->
        <div class="colors-count-section">
            <h3 style="margin-bottom: 16px; text-align: center; color: #1f2937;">How many colors do you want to mix?</h3>
            <div class="count-buttons">
                <button class="count-btn active" onclick="setColorCount(2)">2 Colors</button>
                <button class="count-btn" onclick="setColorCount(3)">3 Colors</button>
                <button class="count-btn" onclick="setColorCount(4)">4 Colors</button>
            </div>
        </div>

        <!-- Color Inputs -->
        <div class="colors-grid" id="colorsGrid">
            <!-- Color 1 -->
            <div class="color-box" data-color="1">
                <h4>🎨 Color 1</h4>
                <div class="color-picker-box">
                    <input type="color" id="color1" value="#3b82f6">
                    <label for="color1" class="color-label">
                        <div class="color-preview" id="preview1"></div>
                    </label>
                </div>
                <input type="text" class="hex-input-mini" id="hex1" value="#3B82F6" maxlength="7">
                <div class="percentage-control">
                    <label>Percentage: <span id="percent1">50</span>%</label>
                    <input type="range" class="percent-slider" id="slider1" min="0" max="100" value="50">
                </div>
            </div>

            <!-- Color 2 -->
            <div class="color-box" data-color="2">
                <h4>🎨 Color 2</h4>
                <div class="color-picker-box">
                    <input type="color" id="color2" value="#ec4899">
                    <label for="color2" class="color-label">
                        <div class="color-preview" id="preview2"></div>
                    </label>
                </div>
                <input type="text" class="hex-input-mini" id="hex2" value="#EC4899" maxlength="7">
                <div class="percentage-control">
                    <label>Percentage: <span id="percent2">50</span>%</label>
                    <input type="range" class="percent-slider" id="slider2" min="0" max="100" value="50">
                </div>
            </div>

            <!-- Color 3 -->
            <div class="color-box" data-color="3" style="display: none;">
                <h4>🎨 Color 3</h4>
                <div class="color-picker-box">
                    <input type="color" id="color3" value="#10b981">
                    <label for="color3" class="color-label">
                        <div class="color-preview" id="preview3"></div>
                    </label>
                </div>
                <input type="text" class="hex-input-mini" id="hex3" value="#10B981" maxlength="7">
                <div class="percentage-control">
                    <label>Percentage: <span id="percent3">33</span>%</label>
                    <input type="range" class="percent-slider" id="slider3" min="0" max="100" value="33">
                </div>
            </div>

            <!-- Color 4 -->
            <div class="color-box" data-color="4" style="display: none;">
                <h4>🎨 Color 4</h4>
                <div class="color-picker-box">
                    <input type="color" id="color4" value="#f59e0b">
                    <label for="color4" class="color-label">
                        <div class="color-preview" id="preview4"></div>
                    </label>
                </div>
                <input type="text" class="hex-input-mini" id="hex4" value="#F59E0B" maxlength="7">
                <div class="percentage-control">
                    <label>Percentage: <span id="percent4">25</span>%</label>
                    <input type="range" class="percent-slider" id="slider4" min="0" max="100" value="25">
                </div>
            </div>
        </div>

        <!-- Total Percentage Display -->
        <div class="total-percentage">
            <span>Total: <strong id="totalPercent">100</strong>%</span>
            <span class="percentage-status" id="percentStatus">✓ Perfect!</span>
        </div>

        <!-- Mix Button -->
        <button class="btn" id="mixBtn" style="width: 100%; padding: 18px; font-size: 18px; margin: 20px 0;">
            🌈 Mix Colors
        </button>

        <!-- Result Section -->
        <div class="result-section" id="resultSection">
            <h3 style="margin-bottom: 20px; text-align: center; color: #1f2937;">✨ Mixed Color Result</h3>
            
            <div class="result-display">
                <div class="result-color-big" id="resultColor"></div>
            </div>

            <div class="result-values">
                <div class="result-value-item">
                    <span class="result-label">HEX:</span>
                    <span class="result-text" id="resultHex">#000000</span>
                    <button class="copy-mini" onclick="copyResult('hex')">📋</button>
                </div>
                <div class="result-value-item">
                    <span class="result-label">RGB:</span>
                    <span class="result-text" id="resultRgb">rgb(0, 0, 0)</span>
                    <button class="copy-mini" onclick="copyResult('rgb')">📋</button>
                </div>
            </div>

            <!-- Color Gradient Preview -->
            <div class="gradient-section">
                <h4 style="font-size: 14px; color: #6b7280; margin-bottom: 12px; text-align: center; font-weight: 600;">Color Blend Visualization</h4>
                <div class="gradient-display" id="gradientDisplay"></div>
            </div>
        </div>
    </div>
</section>

<!-- Content Section -->
<section>
    <div class="container">
        <div class="content-layout">
            <!-- Main Content -->
            <div class="main-content">
                <!-- About Tool -->
                <div class="content-card">
                    <h2>🎯 About Color Mixer</h2>
                    <p>Our Color Mixer tool lets you blend 2, 3, or 4 colors together to create beautiful custom shades. Choose your colors, adjust each color's percentage contribution, and instantly see the mixed result.</p>
                    <p>Perfect for designers, artists, and anyone exploring color combinations for their creative projects.</p>
                </div>

                <!-- How to Use -->
                <div class="content-card">
                    <h2>📝 How to Use</h2>
                    <ul>
                        <li>Choose how many colors you want to mix (2, 3, or 4)</li>
                        <li>Click each color box to select your colors</li>
                        <li>Optionally, enter HEX codes directly</li>
                        <li>Adjust the percentage slider for each color</li>
                        <li>Make sure percentages add up to 100%</li>
                        <li>Click "Mix Colors" to see the result</li>
                        <li>Copy the HEX or RGB values with one click</li>
                    </ul>
                </div>

                <!-- Color Mixing Theory -->
                <div class="content-card">
                    <h2>🎨 How Color Mixing Works</h2>
                    <p>Digital color mixing uses the RGB (Red, Green, Blue) additive color model:</p>
                    <ul>
                        <li><strong>Additive Mixing:</strong> Colors are combined by adding light wavelengths together</li>
                        <li><strong>Percentage Control:</strong> Each color contributes based on its percentage value</li>
                        <li><strong>RGB Calculation:</strong> Each color channel is weighted and combined proportionally</li>
                        <li><strong>Multiple Colors:</strong> You can mix 2-4 colors simultaneously for complex blends</li>
                    </ul>
                </div>

                <!-- Features -->
                <div class="content-card">
                    <h2>✨ Key Features</h2>
                    <ul>
                        <li><strong>Mix 2-4 Colors:</strong> Flexible mixing from 2 to 4 colors</li>
                        <li><strong>Percentage Control:</strong> Adjust each color's contribution individually</li>
                        <li><strong>Visual Feedback:</strong> See your colors and percentages clearly</li>
                        <li><strong>Auto Validation:</strong> Ensures percentages total 100%</li>
                        <li><strong>HEX Input:</strong> Enter colors via HEX codes directly</li>
                        <li><strong>Instant Results:</strong> Real-time color mixing</li>
                        <li><strong>Copy Values:</strong> One-click copy for HEX and RGB</li>
                        <li><strong>100% Free:</strong> No registration or payment required</li>
                    </ul>
                </div>

                <!-- Use Cases -->
                <div class="content-card">
                    <h2>💡 Common Uses</h2>
                    <ul>
                        <li>Creating unique color palettes for web design</li>
                        <li>Finding intermediate colors for gradients</li>
                        <li>Exploring color combinations for branding</li>
                        <li>Digital art and illustration color mixing</li>
                        <li>UI/UX design color schemes</li>
                        <li>Creating custom theme colors</li>
                        <li>Learning about color theory practically</li>
                        <li>Finding harmonious multi-color blends</li>
                    </ul>
                </div>

                <!-- Tips -->
                <div class="content-card">
                    <h2>💡 Pro Tips</h2>
                    <ul>
                        <li>Start with equal percentages and adjust from there</li>
                        <li>Use 3-4 colors for more complex, rich blends</li>
                        <li>Try mixing complementary colors at different ratios</li>
                        <li>Mix bright colors with white (or light colors) for pastels</li>
                        <li>Experiment with dominant colors (60-70%) and accent colors</li>
                        <li>Save your favorite combinations by copying the HEX values</li>
                    </ul>
                </div>
            </div>

            <!-- Sidebar -->
            <aside class="sidebar">
                <!-- Tool Info Widget -->
                <div class="sidebar-widget">
                    <h3>Tool Information</h3>
                    <div class="widget-content">
                        <div class="widget-item">
                            <strong>Category:</strong>
                            <span>Design Tools</span>
                        </div>
                        <div class="widget-item">
                            <strong>Uses:</strong>
                            <span>18k+</span>
                        </div>
                        <div class="widget-item">
                            <strong>Status:</strong>
                            <span style="color: #10b981;">✓ Active</span>
                        </div>
                    </div>
                </div>

                <!-- Share Widget -->
                <div class="sidebar-widget">
                    <h3>Share This Tool</h3>
                    <div class="share-buttons">
                        <button class="share-btn share-facebook" onclick="shareOnFacebook()">📘 Facebook</button>
                        <button class="share-btn share-twitter" onclick="shareOnTwitter()">🐦 Twitter</button>
                        <button class="share-btn share-whatsapp" onclick="shareOnWhatsApp()">💬 WhatsApp</button>
                    </div>
                </div>

                <!-- Related Tools Widget -->
                <div class="sidebar-widget">
                    <h3>Related Tools</h3>
                    <div class="related-tools">
                        <a href="https://anylistly.com/tools/color-picker.php" class="related-tool">
                            <div class="related-icon">🎨</div>
                            <div class="related-info">
                                <h4>Color Picker</h4>
                                <p>Pick and explore colors</p>
                            </div>
                        </a>
                        <a href="https://anylistly.com/tools/percentage-calculator.php" class="related-tool">
                            <div class="related-icon">💯</div>
                            <div class="related-info">
                                <h4>Percentage Calculator</h4>
                                <p>Calculate percentages</p>
                            </div>
                        </a>
                        <a href="https://anylistly.com/tools/number-converter.php" class="related-tool">
                            <div class="related-icon">🔢</div>
                            <div class="related-info">
                                <h4>Number Converter</h4>
                                <p>Convert number systems</p>
                            </div>
                        </a>
                        <a href="https://anylistly.com/tools/" class="related-tool">
                            <div class="related-icon">🛠️</div>
                            <div class="related-info">
                                <h4>All Tools</h4>
                                <p>Browse all tools</p>
                            </div>
                        </a>
                    </div>
                </div>
            </aside>
        </div>
    </div>
</section>

<!-- Custom Styles -->
<style>
.tool-container {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.colors-count-section {
    margin-bottom: 40px;
}

.count-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
}

.count-btn {
    padding: 14px 20px;
    border: 2px solid #e5e7eb;
    background: #fff;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    color: #6b7280;
    font-family: 'Poppins', sans-serif;
}

.count-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
    transform: translateY(-2px);
}

.count-btn.active {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    border-color: #ef4444;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.colors-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.color-box {
    background: #f9fafb;
    padding: 20px;
    border-radius: 16px;
    border: 2px solid #e5e7eb;
    transition: all 0.3s;
}

.color-box:hover {
    border-color: #ef4444;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.color-box h4 {
    font-size: 15px;
    color: #1f2937;
    margin-bottom: 12px;
    text-align: center;
}

.color-picker-box {
    position: relative;
    margin-bottom: 12px;
}

.color-picker-box input[type="color"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.color-label {
    display: block;
    cursor: pointer;
}

.color-preview {
    width: 100%;
    height: 100px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

.color-label:hover .color-preview {
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.hex-input-mini {
    width: 100%;
    padding: 10px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Courier New', monospace;
    text-align: center;
    font-weight: 600;
    margin-bottom: 12px;
    transition: all 0.3s;
    text-transform: uppercase;
}

.hex-input-mini:focus {
    outline: none;
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.percentage-control {
    text-align: center;
}

.percentage-control label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
}

.percentage-control label span {
    color: #ef4444;
    font-size: 16px;
}

.percent-slider {
    width: 100%;
    height: 6px;
    border-radius: 10px;
    background: #e5e7eb;
    outline: none;
    -webkit-appearance: none;
}

.percent-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ef4444;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.percent-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ef4444;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    border: none;
}

.total-percentage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #f9fafb;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.total-percentage strong {
    color: #ef4444;
    font-size: 20px;
}

.percentage-status {
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 6px;
}

.percentage-status.valid {
    background: #d1fae5;
    color: #047857;
}

.percentage-status.invalid {
    background: #fee2e2;
    color: #dc2626;
}

.result-section {
    display: none;
    padding: 30px;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: 16px;
    border: 2px solid #ef4444;
    animation: slideIn 0.5s ease-out;
}

.result-section.show {
    display: block;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-display {
    margin-bottom: 24px;
}

.result-color-big {
    width: 100%;
    height: 200px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.result-values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.result-value-item {
    background: #fff;
    padding: 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.result-label {
    font-weight: 700;
    color: #6b7280;
    font-size: 13px;
}

.result-text {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
}

.copy-mini {
    padding: 6px 10px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.copy-mini:hover {
    background: #dc2626;
    transform: scale(1.05);
}

.gradient-section {
    margin-top: 20px;
}

.gradient-display {
    height: 60px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.content-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
    margin-top: 40px;
}

.main-content {
    min-width: 0;
}

.content-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

.content-card h2 {
    font-size: 24px;
    color: #1f2937;
    margin-bottom: 20px;
}

.content-card p {
    color: #6b7280;
    line-height: 1.8;
    margin-bottom: 16px;
}

.content-card ul {
    margin-left: 20px;
    margin-bottom: 16px;
}

.content-card li {
    color: #6b7280;
    margin-bottom: 8px;
    line-height: 1.6;
}

.sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.sidebar-widget {
    background: #f9fafb;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
}

.sidebar-widget h3 {
    font-size: 18px;
    color: #1f2937;
    margin-bottom: 16px;
}

.widget-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.widget-item {
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
}

.widget-item:last-child {
    border-bottom: none;
}

.widget-item strong {
    color: #1f2937;
}

.widget-item span {
    color: #6b7280;
}

.share-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.share-btn {
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
}

.share-facebook { background: #1877f2; }
.share-twitter { background: #1da1f2; }
.share-whatsapp { background: #25d366; }

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.related-tools {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.related-tool {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
}

.related-tool:hover {
    background: #fee2e2;
    transform: translateX(5px);
}

.related-icon {
    font-size: 32px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 8px;
    flex-shrink: 0;
}

.related-info h4 {
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 4px;
}

.related-info p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

@media (max-width: 1024px) {
    .content-layout {
        grid-template-columns: 1fr;
    }
    .sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .tool-container {
        padding: 30px 24px;
    }
    .colors-grid {
        grid-template-columns: 1fr;
    }
    .result-values {
        grid-template-columns: 1fr;
    }
}
</style>

<script>
let activeColorCount = 2;
const colors = {};

function 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;
}

function rgbToHex(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
}

function setColorCount(count) {
    activeColorCount = count;
    
    document.querySelectorAll('.count-btn').forEach(btn => btn.classList.remove('active'));
    event.target.classList.add('active');
    
    for (let i = 1; i <= 4; i++) {
        const box = document.querySelector(`[data-color="${i}"]`);
        if (i <= count) {
            box.style.display = 'block';
        } else {
            box.style.display = 'none';
        }
    }
    
    redistributePercentages();
}

function redistributePercentages() {
    const equalPercent = Math.floor(100 / activeColorCount);
    const remainder = 100 - (equalPercent * activeColorCount);
    
    for (let i = 1; i <= activeColorCount; i++) {
        const value = i === 1 ? equalPercent + remainder : equalPercent;
        document.getElementById(`slider${i}`).value = value;
        document.getElementById(`percent${i}`).textContent = value;
    }
    
    updateTotalPercentage();
}

function updateTotalPercentage() {
    let total = 0;
    for (let i = 1; i <= activeColorCount; i++) {
        total += parseInt(document.getElementById(`slider${i}`).value);
    }
    
    document.getElementById('totalPercent').textContent = total;
    
    const status = document.getElementById('percentStatus');
    if (total === 100) {
        status.textContent = '✓ Perfect!';
        status.className = 'percentage-status valid';
    } else {
        status.textContent = `✗ Must equal 100%`;
        status.className = 'percentage-status invalid';
    }
    
    return total === 100;
}

function updatePreview(num) {
    const color = document.getElementById(`color${num}`).value;
    document.getElementById(`preview${num}`).style.background = color;
    document.getElementById(`hex${num}`).value = color.toUpperCase();
}

function mixColors() {
    const percentages = [];
    const hexColors = [];
    
    for (let i = 1; i <= activeColorCount; i++) {
        percentages.push(parseInt(document.getElementById(`slider${i}`).value));
        hexColors.push(document.getElementById(`color${i}`).value);
    }
    
    if (percentages.reduce((a, b) => a + b, 0) !== 100) {
        alert('Percentages must add up to 100%!');
        return null;
    }
    
    let totalR = 0, totalG = 0, totalB = 0;
    
    hexColors.forEach((hex, index) => {
        const rgb = hexToRgb(hex);
        const weight = percentages[index] / 100;
        totalR += rgb.r * weight;
        totalG += rgb.g * weight;
        totalB += rgb.b * weight;
    });
    
    const r = Math.round(totalR);
    const g = Math.round(totalG);
    const b = Math.round(totalB);
    
    return { r, g, b, hex: rgbToHex(r, g, b) };
}

for (let i = 1; i <= 4; i++) {
    const colorInput = document.getElementById(`color${i}`);
    const hexInput = document.getElementById(`hex${i}`);
    const slider = document.getElementById(`slider${i}`);
    const percentSpan = document.getElementById(`percent${i}`);
    
    colorInput.addEventListener('input', () => updatePreview(i));
    
    hexInput.addEventListener('input', function(e) {
        let value = e.target.value.toUpperCase();
        if (!value.startsWith('#')) {
            value = '#' + value;
        }
        e.target.value = value;
        
        if (/^#[0-9A-F]{6}$/i.test(value)) {
            document.getElementById(`color${i}`).value = value;
            updatePreview(i);
        }
    });
    
    slider.addEventListener('input', function() {
        percentSpan.textContent = this.value;
        updateTotalPercentage();
    });
    
    updatePreview(i);
}

document.getElementById('mixBtn').addEventListener('click', function() {
    if (!updateTotalPercentage()) {
        return;
    }
    
    const mixed = mixColors();
    if (!mixed) return;
    
    document.getElementById('resultColor').style.background = mixed.hex;
    document.getElementById('resultHex').textContent = mixed.hex;
    document.getElementById('resultRgb').textContent = `rgb(${mixed.r}, ${mixed.g}, ${mixed.b})`;
    
    const hexColors = [];
    for (let i = 1; i <= activeColorCount; i++) {
        hexColors.push(document.getElementById(`color${i}`).value);
    }
    
    const gradient = `linear-gradient(to right, ${hexColors.join(', ')})`;
    document.getElementById('gradientDisplay').style.background = gradient;
    
    document.getElementById('resultSection').classList.add('show');
    document.getElementById('resultSection').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
});

function copyResult(type) {
    let text = '';
    if (type === 'hex') {
        text = document.getElementById('resultHex').textContent;
    } else if (type === 'rgb') {
        text = document.getElementById('resultRgb').textContent;
    }
    
    navigator.clipboard.writeText(text).then(() => {
        const btn = event.target;
        const originalText = btn.textContent;
        btn.textContent = '✓';
        btn.style.background = '#10b981';
        setTimeout(() => {
            btn.textContent = originalText;
            btn.style.background = '#ef4444';
        }, 2000);
    });
}

function shareOnFacebook() {
    const url = encodeURIComponent(window.location.href);
    window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank', 'width=600,height=400');
}

function shareOnTwitter() {
    const url = encodeURIComponent(window.location.href);
    const text = encodeURIComponent('Check out this Color Mixer tool!');
    window.open(`https://twitter.com/intent/tweet?url=${url}&text=${text}`, '_blank', 'width=600,height=400');
}

function shareOnWhatsApp() {
    const url = encodeURIComponent(window.location.href);
    const text = encodeURIComponent('Check out this Color Mixer tool!');
    window.open(`https://wa.me/?text=${text}%20${url}`, '_blank');
}
</script>

</main>
    <!-- Main Content Ends Here (opened in header.php) -->
    
    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-grid">
                <!-- About Column -->
                <div class="footer-col">
                    <h4>About</h4>
                    <ul>
                        <li><a href="https://anylistly.com/about-us/">About Us</a></li>
                        <li><a href="https://anylistly.com/contact-us/">Contact</a></li>
                        <li><a href="https://anylistly.com/coming-soon/">Blog</a></li>
                    </ul>
                </div>
                
                <!-- Categories Column -->
                <div class="footer-col">
                    <h4>Categories</h4>
                    <ul>
                        <li><a href="https://anylistly.com/coloring-pages/">Coloring Pages</a></li>
                        <li><a href="https://anylistly.com/quotes/">Quotes & Wishes</a></li>
                        <li><a href="https://anylistly.com/tools/">Free Online Tools</a></li>
                        <li><a href="https://anylistly.com/countdowns/">Countdowns</a></li>
                    </ul>
                </div>
                
                <!-- Legal Column -->
                <div class="footer-col">
                    <h4>Legal</h4>
                    <ul>
                        <li><a href="https://anylistly.com/privacy/">Privacy Policy</a></li>
                        <li><a href="https://anylistly.com/terms/">Terms of Service</a></li>
                        <li><a href="https://anylistly.com/disclaimer/">Disclaimer</a></li>
                    </ul>
                </div>
                
                <!-- Social/Newsletter Column (Optional - Add as needed) -->
                <div class="footer-col">
                    <h4>Follow Us</h4>
                    <ul>
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">Pinterest</a></li>
                    </ul>
                </div>
            </div>
            
            <!-- Copyright -->
            <div class="copyright">
                <p>&copy; 2026 Anylistly.com – All Rights Reserved</p>
            </div>
        </div>
    </footer>
    
    <!-- Main JavaScript -->
    <script src="https://anylistly.com/assets/js/main.js"></script>
    
    
    <button id="scrollToTop" class="scroll-to-top-v3" title="Go to top">
        <span>TOP</span>
    </button>

    
</body>
</html>