

<!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="Online color picker for designers &amp; developers. Get instant HEX, RGB, HSL, and CMYK values with one click. 100% free, fast, and no signup required!">
    <title>Free Color Picker - Get HEX, RGB, HSL &amp; CMYK Codes | 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 Picker</strong>
    </div>
</div>

<!-- Page Header Hero Section -->
<section class="page-header" style="background: linear-gradient(135deg, #fef3c7 0%, #fff 100%);">
    <div class="container" style="text-align: center;">
        <div style="font-size: 70px; margin-bottom: 16px;">🎨</div>
        <h1>Color Picker Tool</h1>
        <p style="max-width: 650px; margin: 0 auto;">Pick any color and instantly get HEX, RGB, HSL, and CMYK values. Perfect for designers, developers, and artists!</p>
    </div>
</section>

<!-- Tool Section -->
<section class="bg-gray">
    <div class="tool-container">
        <!-- Simple Color Picker Section -->
        <div class="simple-picker-section">
            <h3 style="margin-bottom: 24px; text-align: center; color: #1f2937;">🎨 Pick Your Color</h3>
            
            <div class="main-picker-area">
                <input type="color" id="mainColorPicker" value="#3b82f6">
                <label for="mainColorPicker" class="picker-label">
                    <div class="picker-display" id="pickerDisplay"></div>
                    <span class="picker-text">Click to choose color</span>
                </label>
            </div>

            <div class="hex-input-section">
                <label for="hexInput" style="font-size: 14px; font-weight: 600; color: #6b7280; margin-bottom: 8px; display: block;">Or enter HEX code:</label>
                <input type="text" id="hexInput" value="#3B82F6" maxlength="7" placeholder="#000000">
            </div>
        </div>

        <!-- Quick Color Presets -->
        <div class="presets-section">
            <h4 style="font-size: 15px; color: #6b7280; margin-bottom: 16px; text-align: center; font-weight: 600;">Quick Color Presets</h4>
            <div class="preset-colors">
                <button class="preset-color" data-color="#ef4444" style="background: #ef4444;" title="Red"></button>
                <button class="preset-color" data-color="#f59e0b" style="background: #f59e0b;" title="Orange"></button>
                <button class="preset-color" data-color="#eab308" style="background: #eab308;" title="Yellow"></button>
                <button class="preset-color" data-color="#84cc16" style="background: #84cc16;" title="Lime"></button>
                <button class="preset-color" data-color="#10b981" style="background: #10b981;" title="Green"></button>
                <button class="preset-color" data-color="#14b8a6" style="background: #14b8a6;" title="Teal"></button>
                <button class="preset-color" data-color="#06b6d4" style="background: #06b6d4;" title="Cyan"></button>
                <button class="preset-color" data-color="#3b82f6" style="background: #3b82f6;" title="Blue"></button>
                <button class="preset-color" data-color="#6366f1" style="background: #6366f1;" title="Indigo"></button>
                <button class="preset-color" data-color="#8b5cf6" style="background: #8b5cf6;" title="Purple"></button>
                <button class="preset-color" data-color="#ec4899" style="background: #ec4899;" title="Pink"></button>
                <button class="preset-color" data-color="#f43f5e" style="background: #f43f5e;" title="Rose"></button>
            </div>
        </div>

        <!-- Color Values -->
        <div class="color-values-section">
            <h3 style="margin-bottom: 20px; text-align: center; color: #1f2937;">📋 Color Values</h3>
            
            <div class="value-grid">
                <div class="value-card">
                    <div class="value-label">HEX</div>
                    <div class="value-display" id="hexValue">#3B82F6</div>
                    <button class="copy-btn" onclick="copyValue('hex')">📋 Copy</button>
                </div>

                <div class="value-card">
                    <div class="value-label">RGB</div>
                    <div class="value-display" id="rgbValue">rgb(59, 130, 246)</div>
                    <button class="copy-btn" onclick="copyValue('rgb')">📋 Copy</button>
                </div>

                <div class="value-card">
                    <div class="value-label">HSL</div>
                    <div class="value-display" id="hslValue">hsl(217, 91%, 60%)</div>
                    <button class="copy-btn" onclick="copyValue('hsl')">📋 Copy</button>
                </div>

                <div class="value-card">
                    <div class="value-label">CMYK</div>
                    <div class="value-display" id="cmykValue">cmyk(76%, 47%, 0%, 4%)</div>
                    <button class="copy-btn" onclick="copyValue('cmyk')">📋 Copy</button>
                </div>
            </div>
        </div>

        <!-- Color Shades -->
        <div class="shades-section">
            <h3 style="margin-bottom: 20px; text-align: center; color: #1f2937;">🌈 Color Shades & Tints</h3>
            <div class="shades-grid" id="shadesGrid">
                <!-- Shades will be generated by JavaScript -->
            </div>
        </div>

        <!-- Complementary Colors -->
        <div class="complementary-section">
            <h3 style="margin-bottom: 20px; text-align: center; color: #1f2937;">🎭 Color Harmonies</h3>
            <div class="harmony-grid" id="harmonyGrid">
                <!-- Harmonies will be generated by JavaScript -->
            </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 Picker</h2>
                    <p>Our Color Picker tool helps you select and explore colors with ease. Pick any color using the intuitive color picker and instantly get its values in multiple formats: HEX, RGB, HSL, and CMYK.</p>
                    <p>The tool also generates color shades, tints, and harmonies to help you build perfect color palettes for your designs.</p>
                </div>

                <!-- How to Use -->
                <div class="content-card">
                    <h2>📝 How to Use</h2>
                    <ul>
                        <li>Click the large color display to open the color picker</li>
                        <li>Choose any color from the picker or use quick presets</li>
                        <li>Alternatively, type a HEX code directly (e.g., #FF5733)</li>
                        <li>View color values in HEX, RGB, HSL, and CMYK formats</li>
                        <li>Click "Copy" buttons to copy color values to clipboard</li>
                        <li>Explore color shades and tints for variations</li>
                        <li>View color harmonies for complementary color schemes</li>
                    </ul>
                </div>

                <!-- Color Formats -->
                <div class="content-card">
                    <h2>📊 Color Format Explanations</h2>
                    <ul>
                        <li><strong>HEX:</strong> Hexadecimal color code (e.g., #FF5733). Most commonly used in web design and CSS.</li>
                        <li><strong>RGB:</strong> Red, Green, Blue values from 0-255 (e.g., rgb(255, 87, 51)). Used in digital displays and web design.</li>
                        <li><strong>HSL:</strong> Hue, Saturation, Lightness (e.g., hsl(9, 100%, 60%)). Intuitive for color adjustments.</li>
                        <li><strong>CMYK:</strong> Cyan, Magenta, Yellow, Key (Black) in percentages. Used in print design.</li>
                    </ul>
                </div>

                <!-- Features -->
                <div class="content-card">
                    <h2>✨ Key Features</h2>
                    <ul>
                        <li><strong>Simple Interface:</strong> Large, easy-to-use color picker</li>
                        <li><strong>Multiple Formats:</strong> Get HEX, RGB, HSL, and CMYK values instantly</li>
                        <li><strong>Quick Presets:</strong> 12 popular color presets for quick selection</li>
                        <li><strong>Color Shades:</strong> Automatically generated shades and tints</li>
                        <li><strong>Color Harmonies:</strong> View complementary, analogous, and triadic colors</li>
                        <li><strong>Copy to Clipboard:</strong> One-click copy for all color formats</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>Web design and development</li>
                        <li>Graphic design projects</li>
                        <li>Creating color palettes</li>
                        <li>UI/UX design work</li>
                        <li>Digital art and illustration</li>
                        <li>Branding and marketing materials</li>
                        <li>Print design preparation</li>
                        <li>Learning about color theory</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>25k+</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-mixer.php" class="related-tool">
                            <div class="related-icon">🎨</div>
                            <div class="related-info">
                                <h4>Color Mixer</h4>
                                <p>Mix colors together</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);
}

.simple-picker-section {
    margin-bottom: 40px;
}

.main-picker-area {
    position: relative;
    margin-bottom: 24px;
}

#mainColorPicker {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.picker-label {
    display: block;
    cursor: pointer;
}

.picker-display {
    width: 100%;
    height: 200px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    transition: all 0.3s;
    margin-bottom: 16px;
}

.picker-label:hover .picker-display {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

.picker-text {
    display: block;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #6b7280;
}

.hex-input-section {
    max-width: 300px;
    margin: 0 auto;
}

#hexInput {
    width: 100%;
    padding: 14px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 18px;
    font-family: 'Courier New', monospace;
    text-align: center;
    font-weight: 700;
    transition: all 0.3s;
    text-transform: uppercase;
}

#hexInput:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1);
}

.presets-section {
    margin-bottom: 40px;
    padding: 24px;
    background: #f9fafb;
    border-radius: 16px;
}

.preset-colors {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.preset-color {
    width: 100%;
    aspect-ratio: 1;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.preset-color:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.color-values-section {
    margin-bottom: 40px;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.value-card {
    background: #f9fafb;
    padding: 20px;
    border-radius: 14px;
    text-align: center;
    border: 2px solid #e5e7eb;
    transition: all 0.3s;
}

.value-card:hover {
    border-color: #f59e0b;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.value-label {
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.value-display {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
    font-family: 'Courier New', monospace;
    word-break: break-all;
}

.copy-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Poppins', sans-serif;
}

.copy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.shades-section, .complementary-section {
    margin-bottom: 40px;
}

.shades-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.shade-item {
    aspect-ratio: 1;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 8px;
}

.shade-item:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.shade-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.3);
    padding: 4px 8px;
    border-radius: 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.harmony-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.harmony-item {
    text-align: center;
}

.harmony-color {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.harmony-color:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.harmony-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

.harmony-value {
    font-size: 11px;
    color: #9ca3af;
    font-family: 'Courier New', monospace;
}

.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: #fef3c7;
    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;
    }
    .value-grid {
        grid-template-columns: 1fr;
    }
    .shades-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .harmony-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .preset-colors {
        grid-template-columns: repeat(4, 1fr);
    }
}
</style>

<script>
const mainColorPicker = document.getElementById('mainColorPicker');
const pickerDisplay = document.getElementById('pickerDisplay');
const hexInput = document.getElementById('hexInput');

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 rgbToHsl(r, g, b) {
    r /= 255; g /= 255; b /= 255;
    const max = Math.max(r, g, b), min = Math.min(r, g, b);
    let h, s, l = (max + min) / 2;

    if (max === min) {
        h = s = 0;
    } 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)) / 6; break;
            case g: h = ((b - r) / d + 2) / 6; break;
            case b: h = ((r - g) / d + 4) / 6; break;
        }
    }

    return {
        h: Math.round(h * 360),
        s: Math.round(s * 100),
        l: Math.round(l * 100)
    };
}

function rgbToCmyk(r, g, b) {
    let c = 1 - (r / 255);
    let m = 1 - (g / 255);
    let y = 1 - (b / 255);
    let k = Math.min(c, m, y);
    
    c = ((c - k) / (1 - k)) || 0;
    m = ((m - k) / (1 - k)) || 0;
    y = ((y - k) / (1 - k)) || 0;
    
    return {
        c: Math.round(c * 100),
        m: Math.round(m * 100),
        y: Math.round(y * 100),
        k: Math.round(k * 100)
    };
}

function hslToHex(h, s, l) {
    s /= 100;
    l /= 100;
    const c = (1 - Math.abs(2 * l - 1)) * s;
    const x = c * (1 - Math.abs((h / 60) % 2 - 1));
    const m = l - c/2;
    let r = 0, g = 0, b = 0;
    
    if (h >= 0 && h < 60) { r = c; g = x; b = 0; }
    else if (h >= 60 && h < 120) { r = x; g = c; b = 0; }
    else if (h >= 120 && h < 180) { r = 0; g = c; b = x; }
    else if (h >= 180 && h < 240) { r = 0; g = x; b = c; }
    else if (h >= 240 && h < 300) { r = x; g = 0; b = c; }
    else if (h >= 300 && h < 360) { r = c; g = 0; b = x; }
    
    const toHex = val => {
        const hex = Math.round((val + m) * 255).toString(16);
        return hex.length === 1 ? '0' + hex : hex;
    };
    
    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}

function updateColorValues(hex) {
    const rgb = hexToRgb(hex);
    const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
    const cmyk = rgbToCmyk(rgb.r, rgb.g, rgb.b);
    
    document.getElementById('hexValue').textContent = hex.toUpperCase();
    document.getElementById('rgbValue').textContent = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
    document.getElementById('hslValue').textContent = `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
    document.getElementById('cmykValue').textContent = `cmyk(${cmyk.c}%, ${cmyk.m}%, ${cmyk.y}%, ${cmyk.k}%)`;
    
    pickerDisplay.style.background = hex;
    hexInput.value = hex.toUpperCase();
    
    generateShades(hex);
    generateHarmonies(hex);
}

function generateShades(hex) {
    const rgb = hexToRgb(hex);
    const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
    const shadesGrid = document.getElementById('shadesGrid');
    shadesGrid.innerHTML = '';
    
    const lightnesses = [90, 70, 50, 30, 10];
    
    lightnesses.forEach(l => {
        const shadeHex = hslToHex(hsl.h, hsl.s, l);
        const shadeDiv = document.createElement('div');
        shadeDiv.className = 'shade-item';
        shadeDiv.style.background = shadeHex;
        shadeDiv.innerHTML = `<span class="shade-label">${l}%</span>`;
        shadeDiv.onclick = () => {
            mainColorPicker.value = shadeHex;
            updateColorValues(shadeHex);
        };
        shadesGrid.appendChild(shadeDiv);
    });
}

function generateHarmonies(hex) {
    const rgb = hexToRgb(hex);
    const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
    const harmonyGrid = document.getElementById('harmonyGrid');
    harmonyGrid.innerHTML = '';
    
    const harmonies = [
        { name: 'Original', offset: 0 },
        { name: 'Complementary', offset: 180 },
        { name: 'Triadic 1', offset: 120 },
        { name: 'Triadic 2', offset: 240 }
    ];
    
    harmonies.forEach(harmony => {
        const newHue = (hsl.h + harmony.offset) % 360;
        const harmonyHex = hslToHex(newHue, hsl.s, hsl.l);
        
        const harmonyDiv = document.createElement('div');
        harmonyDiv.className = 'harmony-item';
        harmonyDiv.innerHTML = `
            <div class="harmony-color" style="background: ${harmonyHex};" onclick="mainColorPicker.value='${harmonyHex}'; updateColorValues('${harmonyHex}');"></div>
            <div class="harmony-label">${harmony.name}</div>
            <div class="harmony-value">${harmonyHex.toUpperCase()}</div>
        `;
        harmonyGrid.appendChild(harmonyDiv);
    });
}

function copyValue(type) {
    let text = '';
    switch(type) {
        case 'hex': text = document.getElementById('hexValue').textContent; break;
        case 'rgb': text = document.getElementById('rgbValue').textContent; break;
        case 'hsl': text = document.getElementById('hslValue').textContent; break;
        case 'cmyk': text = document.getElementById('cmykValue').textContent; break;
    }
    
    navigator.clipboard.writeText(text).then(() => {
        const btn = event.target;
        const originalText = btn.textContent;
        btn.textContent = '✓ Copied!';
        setTimeout(() => {
            btn.textContent = originalText;
        }, 2000);
    });
}

mainColorPicker.addEventListener('input', (e) => {
    updateColorValues(e.target.value);
});

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)) {
        mainColorPicker.value = value;
        updateColorValues(value);
    }
});

document.querySelectorAll('.preset-color').forEach(btn => {
    btn.addEventListener('click', () => {
        const color = btn.dataset.color;
        mainColorPicker.value = color;
        updateColorValues(color);
    });
});

updateColorValues(mainColorPicker.value);

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 Picker 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 Picker 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>