{"id":50678,"date":"2026-05-07T06:09:49","date_gmt":"2026-05-07T06:09:49","guid":{"rendered":"https:\/\/bsolution.me\/he\/color-studio-2\/"},"modified":"2026-05-31T19:59:20","modified_gmt":"2026-05-31T19:59:20","slug":"color-studio","status":"publish","type":"page","link":"https:\/\/bsolution.me\/he\/color-studio\/","title":{"rendered":"\ud83c\udfa8 \u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05e7\u05d3\u05dd"},"content":{"rendered":"\n\n<style>\n\/* Perfected Futuristic Design System by Bsolution *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Heebo:wght@300;400;500;700;800&display=swap');\n\n:root {\n    --f-bg: #F5F5F7;\n    --f-card: rgba(255, 255, 255, 0.85);\n    --f-text: #1d1d1f;\n    --f-muted: #86868b;\n    --f-accent: #0066cc;\n    --f-border: rgba(0, 0, 0, 0.08);\n    --f-shadow: 0 8px 30px rgba(0,0,0,0.04);\n}\n\n.dark-theme {\n    --f-bg: #000000;\n    --f-card: rgba(28, 28, 30, 0.85);\n    --f-text: #f5f5f7;\n    --f-muted: #86868b;\n    --f-accent: #2997ff;\n    --f-border: rgba(255, 255, 255, 0.12);\n    --f-shadow: 0 8px 40px rgba(0,0,0,0.6);\n}\n\n.futur-layout {\n    max-width: 900px;\n    margin: 0 auto;\n    padding: 60px 20px;\n    font-family: 'Heebo', -apple-system, system-ui, sans-serif;\n    direction: rtl;\n    color: var(--f-text);\n    background-color: transparent;\n    transition: color 0.3s ease;\n}\n\n\/* Global Background override when tool is active *\/\nbody.tool-active {\n    background-color: var(--f-bg) !important;\n}\n\n.futur-glass-card {\n    background: var(--f-card);\n    backdrop-filter: saturate(180%) blur(20px);\n    -webkit-backdrop-filter: saturate(180%) blur(20px);\n    border: 1px solid var(--f-border);\n    border-radius: 22px;\n    padding: 40px;\n    box-shadow: var(--f-shadow);\n    margin-bottom: 40px;\n}\n\n.futur-layout h1.wp-block-heading {\n    font-size: clamp(2.5rem, 5vw, 3.5rem);\n    font-weight: 800;\n    color: var(--f-text);\n    margin-bottom: 12px;\n    letter-spacing: -0.02em;\n    text-align: center;\n}\n\n.futur-layout .tool-card {\n    width: 80%;\n    margin: 0 auto 40px auto;\n}\n@media (max-width: 900px) {\n    .futur-layout .tool-card { width: 100%; }\n}\n\n.futur-layout header {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    gap: 12px;\n    margin-bottom: 34px;\n    max-width: 800px;\n    margin-left: auto;\n    margin-right: auto;\n}\n.futur-layout header h1, \n.futur-layout header h2.main-title,\n.futur-layout header .title-wrap .main-title {\n    margin: 0;\n    font-size: clamp(2rem, 4vw, 2.7rem);\n    font-weight: 800;\n    letter-spacing: -0.02em;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    color: var(--f-text);\n}\n.futur-layout header h2.main-title span.icon { font-size: 1.25em; }\n.futur-layout header .subtitle,\n.futur-layout header p.subtitle {\n    margin: 0;\n    font-size: 1.05rem;\n    color: var(--f-muted);\n    line-height: 1.6;\n}\n.futur-layout header .badge-local,\n.futur-layout header .free-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.78rem;\n    padding: 6px 14px;\n    border-radius: 999px;\n    border: 1px solid var(--f-border);\n    background: var(--f-card);\n    color: var(--f-text);\n    box-shadow: 0 4px 10px rgba(0,0,0,0.02);\n}\n.futur-layout header .badge-dot,\n.futur-layout header .free-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 999px;\n    background: #22c55e;\n    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);\n}\n\n.futur-layout .page-hook {\n    font-size: 1.25rem;\n    color: var(--f-muted);\n    text-align: center;\n    margin-bottom: 50px;\n    max-width: 700px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.futur-layout h2.wp-block-heading {\n    font-size: 1.7rem;\n    font-weight: 700;\n    margin: 40px 0 20px;\n}\n\n.futur-layout p {\n    font-size: 1.15rem;\n    color: var(--f-text);\n    opacity: 0.9;\n    margin-bottom: 24px;\n    line-height: 1.7;\n}\n\n\/* Theme Toggle Button *\/\n.theme-toggle-wrap {\n    display: flex;\n    justify-content: flex-end;\n    margin-bottom: 20px;\n}\n.theme-btn {\n    background: var(--f-card);\n    border: 1px solid var(--f-border);\n    color: var(--f-text);\n    padding: 8px 16px;\n    border-radius: 999px;\n    cursor: pointer;\n    font-size: 0.9rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    box-shadow: var(--f-shadow);\n}\n\n\/* Input & Button Styles for Tools *\/\n.futur-input {\n    width: 100%;\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid var(--f-border);\n    background: rgba(0,0,0,0.03);\n    color: var(--f-text);\n    font-size: 1rem;\n    margin-bottom: 16px;\n    transition: all 0.2s ease;\n}\n.dark-theme .futur-input { background: rgba(255,255,255,0.05); }\n\n.futur-btn {\n    background: var(--f-accent);\n    color: #fff;\n    border: none;\n    padding: 14px 28px;\n    border-radius: 12px;\n    font-weight: 700;\n    font-size: 1.1rem;\n    cursor: pointer;\n    transition: transform 0.2s ease;\n}\n.futur-btn:hover { transform: scale(1.02); }\n\n@media (max-width: 600px) {\n    .futur-layout { padding: 40px 16px; }\n    .futur-glass-card { padding: 24px; }\n}\n<\/style>\n<script>\n(function() {\n    var applyTheme = function(theme) {\n        if (theme === 'dark') {\n            document.documentElement.classList.add('dark-theme');\n        } else {\n            document.documentElement.classList.remove('dark-theme');\n        }\n        localStorage.setItem('bsolution-theme', theme);\n    };\n    \n    \/\/ Apply saved theme immediately\n    document.body.classList.add('tool-active');\n    var saved = localStorage.getItem('bsolution-theme') || 'light';\n    applyTheme(saved);\n    \n    \/\/ Bind theme toggle button (with retry since it may not exist yet)\n    function bindToggle() {\n        var btn = document.getElementById('globalThemeToggle');\n        if (!btn) { setTimeout(bindToggle, 100); return; }\n        if (btn.dataset.bound) return;\n        btn.dataset.bound = '1';\n        btn.addEventListener('click', function() {\n            var isDark = document.documentElement.classList.contains('dark-theme');\n            applyTheme(isDark ? 'light' : 'dark');\n        });\n    }\n    bindToggle();\n})();\n<\/script>\n\n<div class=\"futur-layout\">\n<div class=\"theme-toggle-wrap\"><button class=\"theme-btn\" id=\"globalThemeToggle\">\ud83c\udf19 \u05de\u05e6\u05d1 \u05dc\u05d9\u05dc\u05d4<\/button><\/div>\n\n\n\n<header>\n<h2 class=\"main-title\">\u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05e7\u05d3\u05dd <span class=\"icon pill\">\ud83c\udfa8<\/span><\/h2>\n<p class=\"subtitle\">19 \u05db\u05dc\u05d9 \u05e6\u05d1\u05e2 \u05e2\u05d5\u05e6\u05de\u05ea\u05d9\u05d9\u05dd \u05d1\u05de\u05de\u05e9\u05e7 \u05d0\u05d7\u05d3 \u05d7\u05db\u05dd \u05dc\u05de\u05e6\u05d9\u05d0\u05ea \u05e1\u05db\u05de\u05d5\u05ea, \u05d2\u05d5\u05d5\u05e0\u05d9\u05dd \u05d5\u05d7\u05d9\u05dc\u05d5\u05e5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05de\u05d5\u05e0\u05d5\u05ea.<\/p>\n<div class=\"free-badge\"><span class=\"free-dot\"><\/span> \u05d7\u05d9\u05e0\u05dd \u05dc\u05d7\u05dc\u05d5\u05d8\u05d9\u05df<\/div>\n<\/header>\n\n\n\n<div class=\"futur-glass-card tool-card\">\n<div id=\"bnet-tool-color-studio\">\n<style>\n        \/* CSS Variables: Light Mode *\/\n        #bnet-tool-color-studio {\n            --bg-color: transparent;\n            --text-color: #333333;\n            --border-color: #e5e5e5;\n            --accent-color: #3b82f6;\n            --accent-hover: #2563eb;\n            --surface-color: #ffffff;\n            --surface-hover: #f1f5f9;\n            --muted-color: #64748b;\n            --radius: 12px;\n            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n            \n            font-family: 'Heebo', sans-serif;\n            direction: rtl;\n            color: var(--text-color);\n            background-color: var(--bg-color);\n        }\n\n        \/* CSS Variables: Dark Mode *\/\n        .dark-theme #bnet-tool-color-studio {\n            --text-color: #f8fafc;\n            --border-color: #334155;\n            --accent-color: #3b82f6;\n            --accent-hover: #2563eb;\n            --surface-color: #1e293b;\n            --surface-hover: #334155;\n            --muted-color: #94a3b8;\n        }\n\n        #bnet-tool-color-studio * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n            font-family: inherit;\n        }\n\n        \/* Container & Tabs *\/\n        #bnet-tool-color-studio .bs-tabs {\n            display: flex;\n            gap: 10px;\n            margin-bottom: 20px;\n            background: var(--surface-color);\n            padding: 5px;\n            border-radius: var(--radius);\n            overflow-x: auto;\n            border: 1px solid var(--border-color);\n        }\n        #bnet-tool-color-studio .bs-tab {\n            flex: 1;\n            padding: 12px 20px;\n            border: none;\n            background: transparent;\n            color: var(--muted-color);\n            font-weight: 600;\n            font-size: 1rem;\n            cursor: pointer;\n            border-radius: 8px;\n            transition: var(--transition);\n            white-space: nowrap;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n        }\n        #bnet-tool-color-studio .bs-tab:hover {\n            color: var(--text-color);\n            background: rgba(128, 128, 128, 0.1);\n        }\n        #bnet-tool-color-studio .bs-tab.active {\n            background: var(--accent-color);\n            color: white;\n            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);\n        }\n\n        #bnet-tool-color-studio .bs-panel {\n            display: none;\n            animation: fadeIn 0.4s ease;\n        }\n        #bnet-tool-color-studio .bs-panel.active {\n            display: block;\n        }\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        #bnet-tool-color-studio .bs-card {\n            background: var(--surface-color);\n            border-radius: var(--radius);\n            padding: 24px;\n            border: 1px solid var(--border-color);\n            margin-bottom: 24px;\n        }\n        #bnet-tool-color-studio .bs-card h3 {\n            font-size: 1.25rem;\n            margin-bottom: 20px;\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            border-bottom: 1px solid var(--border-color);\n            padding-bottom: 12px;\n            color: var(--text-color);\n        }\n\n        #bnet-tool-color-studio .bs-main-color {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: 20px;\n        }\n        @media (min-width: 768px) {\n            #bnet-tool-color-studio .bs-main-color {\n                grid-template-columns: 250px 1fr;\n            }\n        }\n        \n        #bnet-tool-color-studio #iro-color-picker {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            background: var(--surface-hover);\n            border-radius: var(--radius);\n            padding: 15px;\n            border: 1px solid var(--border-color);\n        }\n\n        #bnet-tool-color-studio .bs-inputs-grid {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: 15px;\n        }\n        @media (min-width: 500px) {\n            #bnet-tool-color-studio .bs-inputs-grid { grid-template-columns: repeat(2, 1fr); }\n        }\n\n        #bnet-tool-color-studio .bs-input-group {\n            display: flex;\n            flex-direction: column;\n            gap: 5px;\n        }\n        #bnet-tool-color-studio .bs-input-group label {\n            font-size: 0.85rem;\n            color: var(--muted-color);\n            font-weight: 500;\n        }\n        #bnet-tool-color-studio .bs-input {\n            width: 100%;\n            padding: 12px 16px;\n            background: transparent;\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            color: var(--text-color);\n            font-size: 1rem;\n            font-family: monospace;\n            transition: var(--transition);\n        }\n        #bnet-tool-color-studio .bs-input:focus {\n            outline: none;\n            border-color: var(--accent-color);\n            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);\n        }\n\n        #bnet-tool-color-studio .bs-copy-btn {\n            position: absolute;\n            left: 5px;\n            top: 50%;\n            transform: translateY(-50%);\n            background: transparent;\n            border: none;\n            color: var(--muted-color);\n            cursor: pointer;\n            padding: 8px;\n            transition: var(--transition);\n        }\n        #bnet-tool-color-studio .bs-copy-btn:hover {\n            color: var(--accent-color);\n        }\n\n        #bnet-tool-color-studio .bs-mode-toggle {\n            display: flex;\n            background: var(--surface-hover);\n            padding: 4px;\n            border-radius: 8px;\n            border: 1px solid var(--border-color);\n        }\n        #bnet-tool-color-studio .bs-mode-toggle label {\n            padding: 4px 12px;\n            color: var(--muted-color);\n            cursor: pointer;\n            transition: var(--transition);\n            border-radius: 6px;\n            font-size: 0.9rem;\n        }\n        #bnet-tool-color-studio .bs-mode-toggle input[type=\"radio\"] {\n            display: none;\n        }\n        #bnet-tool-color-studio .bs-mode-toggle input[type=\"radio\"]:checked + span {\n            color: var(--accent-color);\n            font-weight: 700;\n        }\n        #bnet-tool-color-studio .bs-mode-toggle label:hover {\n            background: rgba(128, 128, 128, 0.1);\n        }\n\n        \/* Sliders *\/\n        #bnet-tool-color-studio .bs-slider-group {\n            margin-bottom: 20px;\n        }\n        #bnet-tool-color-studio .bs-slider-header {\n            display: flex;\n            justify-content: space-between;\n            margin-bottom: 8px;\n            font-size: 0.9rem;\n            color: var(--muted-color);\n        }\n        #bnet-tool-color-studio .bs-range {\n            width: 100%;\n            -webkit-appearance: none;\n            height: 6px;\n            background: var(--border-color);\n            border-radius: 3px;\n            outline: none;\n        }\n        #bnet-tool-color-studio .bs-range::-webkit-slider-thumb {\n            -webkit-appearance: none;\n            width: 20px;\n            height: 20px;\n            border-radius: 50%;\n            background: var(--accent-color);\n            cursor: pointer;\n            transition: var(--transition);\n        }\n        #bnet-tool-color-studio .bs-range::-webkit-slider-thumb:hover {\n            transform: scale(1.2);\n        }\n\n        \/* Buttons *\/\n        #bnet-tool-color-studio .bs-btn {\n            padding: 10px 16px;\n            background: var(--surface-hover);\n            color: var(--text-color);\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            cursor: pointer;\n            font-weight: 500;\n            font-size: 0.9rem;\n            transition: var(--transition);\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n            width: 100%;\n        }\n        #bnet-tool-color-studio .bs-btn:hover {\n            background: var(--accent-color);\n            border-color: var(--accent-color);\n            color: white;\n        }\n        #bnet-tool-color-studio .bs-actions-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n            gap: 10px;\n            margin-top: 20px;\n        }\n\n        \/* Color Display \/ Swatches *\/\n        #bnet-tool-color-studio .bs-swatch-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n            gap: 15px;\n            margin-top: 15px;\n        }\n        #bnet-tool-color-studio .bs-swatch {\n            border-radius: 8px;\n            overflow: hidden;\n            border: 1px solid var(--border-color);\n            cursor: pointer;\n            transition: var(--transition);\n        }\n        #bnet-tool-color-studio .bs-swatch:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 6px 12px rgba(0,0,0,0.2);\n        }\n        #bnet-tool-color-studio .bs-swatch-color {\n            height: 80px;\n            width: 100%;\n        }\n        #bnet-tool-color-studio .bs-swatch-info {\n            background: var(--surface-color);\n            padding: 10px;\n            text-align: center;\n            font-family: monospace;\n            font-size: 0.85rem;\n            color: var(--text-color);\n        }\n\n        \/* Blend & Gradient Section *\/\n        #bnet-tool-color-studio .bs-dual-color {\n            display: flex;\n            align-items: center;\n            gap: 15px;\n            margin-bottom: 20px;\n        }\n        #bnet-tool-color-studio .bs-color-preview-box {\n            height: 60px;\n            flex: 1;\n            border-radius: var(--radius);\n            box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n            border: 1px solid var(--border-color);\n            position: relative;\n        }\n        #bnet-tool-color-studio .bs-color-input-native {\n            opacity: 0;\n            position: absolute;\n            inset: 0;\n            width: 100%;\n            height: 100%;\n            cursor: pointer;\n        }\n        #bnet-tool-color-studio .bs-gradient-preview {\n            width: 100%;\n            height: 120px;\n            border-radius: var(--radius);\n            background: linear-gradient(to right, #3b82f6, #ef4444);\n            border: 1px solid var(--border-color);\n            margin-top: 15px;\n        }\n\n        \/* Image Extractor *\/\n        #bnet-tool-color-studio .bs-upload-area {\n            border: 2px dashed var(--border-color);\n            border-radius: var(--radius);\n            padding: 40px 20px;\n            text-align: center;\n            cursor: pointer;\n            transition: var(--transition);\n            background: rgba(128, 128, 128, 0.05);\n            margin-bottom: 20px;\n        }\n        #bnet-tool-color-studio .bs-upload-area:hover, \n        #bnet-tool-color-studio .bs-upload-area.dragover {\n            border-color: var(--accent-color);\n            background: rgba(59, 130, 246, 0.05);\n        }\n        #bnet-tool-color-studio .bs-upload-area i {\n            font-size: 3rem;\n            color: var(--accent-color);\n            margin-bottom: 15px;\n        }\n        #bnet-tool-color-studio #bs-image-canvas {\n            max-width: 100%;\n            max-height: 400px;\n            border-radius: var(--radius);\n            display: none;\n            margin: 0 auto 20px auto;\n            cursor: crosshair;\n            border: 1px solid var(--border-color);\n        }\n\n        \/* Utilities *\/\n        #bnet-tool-color-studio .mt-4 { margin-top: 1rem; }\n        \n        \/* Toast Notification *\/\n        #bnet-tool-color-studio .bs-toast {\n            position: fixed;\n            bottom: 20px;\n            left: 50%;\n            transform: translateX(-50%) translateY(100px);\n            background: var(--text-color);\n            color: var(--surface-color);\n            padding: 12px 24px;\n            border-radius: 30px;\n            font-weight: 500;\n            box-shadow: 0 4px 15px rgba(0,0,0,0.3);\n            transition: var(--transition);\n            z-index: 9999;\n            opacity: 0;\n            pointer-events: none;\n        }\n        #bnet-tool-color-studio .bs-toast.show {\n            transform: translateX(-50%) translateY(0);\n            opacity: 1;\n        }\n    <\/style>\n<script defer=\"\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/@jaames\/iro@5\"><\/script>\n<div class=\"bs-tabs\">\n<button aria-label=\"\u05d9\u05e6\u05d9\u05e8\u05d4 \u05d5\u05db\u05d5\u05d5\u05e0\u05d5\u05df \u05e6\u05d1\u05e2\u05d9\u05dd\" class=\"bs-tab active\" data-target=\"tab-generator\"><i class=\"fa-solid fa-sliders\"><\/i> \u05d9\u05e6\u05d9\u05e8\u05d4 \u05d5\u05db\u05d5\u05d5\u05e0\u05d5\u05df<\/button>\n<button aria-label=\"\u05e1\u05db\u05de\u05d5\u05ea \u05e6\u05d1\u05e2\u05d9\u05dd\" class=\"bs-tab\" data-target=\"tab-schemes\"><i class=\"fa-solid fa-palette\"><\/i> \u05e1\u05db\u05de\u05d5\u05ea \u05e6\u05d1\u05e2\u05d9\u05dd<\/button>\n<button aria-label=\"\u05d7\u05d9\u05dc\u05d5\u05e5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05de\u05d5\u05e0\u05d4\" class=\"bs-tab\" data-target=\"tab-image\"><i class=\"fa-solid fa-image\"><\/i> \u05d7\u05d9\u05dc\u05d5\u05e5 \u05de\u05ea\u05de\u05d5\u05e0\u05d4<\/button>\n<\/div>\n<div class=\"bs-card\" id=\"global-color-card\">\n<div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; flex-wrap: wrap; gap: 10px;\">\n<h3 style=\"margin: 0; border: none; padding: 0;\"><i class=\"fa-solid fa-eye-dropper\"><\/i> \u05e6\u05d1\u05e2 \u05d1\u05e1\u05d9\u05e1<\/h3>\n<div class=\"bs-mode-toggle\">\n<label>\n<input checked=\"\" name=\"global-mode\" type=\"radio\" value=\"rgb\"\/> <span>RGB (Web)<\/span>\n<\/label>\n<label>\n<input name=\"global-mode\" type=\"radio\" value=\"cmyk\"\/> <span>CMYK (Print)<\/span>\n<\/label>\n<\/div>\n<\/div>\n<div class=\"bs-main-color\">\n<div id=\"iro-color-picker\"><\/div>\n<div class=\"bs-inputs-grid\">\n<div class=\"bs-input-group\">\n<label>HEX<\/label>\n<div style=\"position: relative;\">\n<input aria-label=\"\u05e2\u05e8\u05da HEX\" class=\"bs-input\" id=\"input-hex\" style=\"padding-left: 40px; direction: ltr; text-align: left;\" type=\"text\" value=\"#3b82f6\"\/>\n<button aria-label=\"\u05d4\u05e2\u05ea\u05e7 HEX\" class=\"bs-copy-btn\" onclick=\"copyTextToClipboard(document.getElementById('input-hex').value)\" title=\"\u05d4\u05e2\u05ea\u05e7\"><i class=\"fa-solid fa-copy\"><\/i><\/button>\n<\/div>\n<\/div>\n<div class=\"bs-input-group\">\n<label>RGB<\/label>\n<div style=\"position: relative;\">\n<input aria-label=\"\u05e2\u05e8\u05da RGB\" class=\"bs-input\" id=\"input-rgb\" style=\"padding-left: 40px; direction: ltr; text-align: left;\" type=\"text\" value=\"rgb(59, 130, 246)\"\/>\n<button aria-label=\"\u05d4\u05e2\u05ea\u05e7 RGB\" class=\"bs-copy-btn\" onclick=\"copyTextToClipboard(document.getElementById('input-rgb').value)\" title=\"\u05d4\u05e2\u05ea\u05e7\"><i class=\"fa-solid fa-copy\"><\/i><\/button>\n<\/div>\n<\/div>\n<div class=\"bs-input-group\">\n<label>HSL<\/label>\n<div style=\"position: relative;\">\n<input aria-label=\"\u05e2\u05e8\u05da HSL\" class=\"bs-input\" id=\"input-hsl\" style=\"padding-left: 40px; direction: ltr; text-align: left;\" type=\"text\" value=\"hsl(217, 90%, 60%)\"\/>\n<button aria-label=\"\u05d4\u05e2\u05ea\u05e7 HSL\" class=\"bs-copy-btn\" onclick=\"copyTextToClipboard(document.getElementById('input-hsl').value)\" title=\"\u05d4\u05e2\u05ea\u05e7\"><i class=\"fa-solid fa-copy\"><\/i><\/button>\n<\/div>\n<\/div>\n<div class=\"bs-input-group\">\n<label>CMYK<\/label>\n<div style=\"position: relative;\">\n<input aria-label=\"\u05e2\u05e8\u05da CMYK\" class=\"bs-input\" id=\"input-cmyk\" style=\"padding-left: 40px; direction: ltr; text-align: left;\" type=\"text\" value=\"cmyk(76%, 47%, 0%, 4%)\"\/>\n<button aria-label=\"\u05d4\u05e2\u05ea\u05e7 CMYK\" class=\"bs-copy-btn\" onclick=\"copyTextToClipboard(document.getElementById('input-cmyk').value)\" title=\"\u05d4\u05e2\u05ea\u05e7\"><i class=\"fa-solid fa-copy\"><\/i><\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"bs-actions-grid mt-4\">\n<button aria-label=\"\u05d4\u05e4\u05d5\u05da \u05e6\u05d1\u05e2\" class=\"bs-btn\" id=\"btn-invert\"><i class=\"fa-solid fa-circle-half-stroke\"><\/i> \u05d4\u05e4\u05d5\u05da \u05e6\u05d1\u05e2<\/button>\n<button aria-label=\"\u05e9\u05d7\u05d5\u05e8 \u05dc\u05d1\u05df\" class=\"bs-btn\" id=\"btn-greyscale\"><i class=\"fa-solid fa-moon\"><\/i> \u05e9\u05d7\u05d5\u05e8 \u05dc\u05d1\u05df<\/button>\n<button aria-label=\"\u05e6\u05d1\u05e2 \u05d0\u05e7\u05e8\u05d0\u05d9\" class=\"bs-btn\" id=\"btn-random\"><i class=\"fa-solid fa-dice\"><\/i> \u05d0\u05e7\u05e8\u05d0\u05d9<\/button>\n<\/div>\n<\/div>\n<div class=\"bs-panel active\" id=\"tab-generator\">\n<div class=\"bs-card\">\n<h3><i class=\"fa-solid fa-sliders\"><\/i> \u05db\u05d5\u05d5\u05e0\u05d5\u05df \u05de\u05ea\u05e7\u05d3\u05dd<\/h3>\n<div class=\"bs-slider-group\">\n<div class=\"bs-slider-header\">\n<span>\u05d1\u05d4\u05d9\u05e8\u05d5\u05ea (Lightness)<\/span>\n<span id=\"val-lightness\">60%<\/span>\n<\/div>\n<input aria-label=\"\u05d1\u05d4\u05d9\u05e8\u05d5\u05ea\" class=\"bs-range\" id=\"slider-lightness\" max=\"100\" min=\"0\" type=\"range\" value=\"60\"\/>\n<\/div>\n<div class=\"bs-slider-group\">\n<div class=\"bs-slider-header\">\n<span>\u05e8\u05d5\u05d5\u05d9\u05d4 (Saturation)<\/span>\n<span id=\"val-saturation\">90%<\/span>\n<\/div>\n<input aria-label=\"\u05e8\u05d5\u05d5\u05d9\u05d4\" class=\"bs-range\" id=\"slider-saturation\" max=\"100\" min=\"0\" type=\"range\" value=\"90\"\/>\n<\/div>\n<div class=\"bs-slider-group\">\n<div class=\"bs-slider-header\">\n<span>\u05d2\u05d5\u05d5\u05df (Hue)<\/span>\n<span id=\"val-hue\">217\u00b0<\/span>\n<\/div>\n<input aria-label=\"\u05d2\u05d5\u05d5\u05df\" class=\"bs-range\" id=\"slider-hue\" max=\"360\" min=\"0\" type=\"range\" value=\"217\"\/>\n<\/div>\n<\/div>\n<div class=\"bs-card\">\n<h3><i class=\"fa-solid fa-fill-drip\"><\/i> \u05de\u05d9\u05d6\u05d5\u05d2 \u05d5\u05d2\u05e8\u05d3\u05d9\u05d0\u05e0\u05d8 (Blend &amp; Gradient)<\/h3>\n<p style=\"color: var(--muted-color); margin-bottom: 15px; font-size: 0.9rem;\">\u05d1\u05d7\u05e8 \u05e6\u05d1\u05e2 \u05e9\u05e0\u05d9 \u05dc\u05de\u05d9\u05d6\u05d5\u05d2 \u05d5\u05d9\u05e6\u05d9\u05e8\u05ea \u05de\u05e2\u05d1\u05e8 \u05e6\u05d1\u05e2 (\u05d2\u05e8\u05d3\u05d9\u05d0\u05e0\u05d8)<\/p>\n<div class=\"bs-dual-color\">\n<div class=\"bs-color-preview-box\" id=\"blend-color1-preview\" style=\"background-color: #3b82f6;\"><\/div>\n<i class=\"fa-solid fa-plus\"><\/i>\n<div class=\"bs-color-preview-box\" id=\"blend-color2-preview\" style=\"background-color: #ef4444;\">\n<input aria-label=\"\u05e6\u05d1\u05e2 \u05dc\u05de\u05d9\u05d6\u05d5\u05d2\" class=\"bs-color-input-native\" id=\"blend-color-native\" type=\"color\" value=\"#ef4444\"\/>\n<\/div>\n<i class=\"fa-solid fa-equals\"><\/i>\n<div class=\"bs-color-preview-box\" id=\"blend-result-preview\" style=\"background-color: #95639d; cursor: copy;\" title=\"\u05dc\u05d7\u05e5 \u05dc\u05d4\u05e2\u05ea\u05e7\u05ea \u05d4\u05e6\u05d1\u05e2 \u05d4\u05de\u05de\u05d5\u05d6\u05d2\"><\/div>\n<\/div>\n<div class=\"bs-gradient-preview\" id=\"gradient-preview\"><\/div>\n<div class=\"mt-4\" style=\"text-align: center;\">\n<code aria-label=\"\u05e7\u05d5\u05d3 CSS \u05dc\u05d2\u05e8\u05d3\u05d9\u05d0\u05e0\u05d8\" id=\"gradient-css\" style=\"background: var(--surface-color); padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); display: block; font-size: 0.9rem; cursor: copy; direction: ltr;\" title=\"\u05dc\u05d7\u05e5 \u05dc\u05d4\u05e2\u05ea\u05e7\u05ea \u05d4-CSS\">linear-gradient(to right, #3b82f6, #ef4444)<\/code>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"bs-panel\" id=\"tab-schemes\">\n<div class=\"bs-card\">\n<h3><i class=\"fa-solid fa-circle-notch\"><\/i> \u05e6\u05d1\u05e2 \u05de\u05e9\u05dc\u05d9\u05dd (Complementary)<\/h3>\n<div class=\"bs-swatch-grid\" id=\"scheme-complementary\"><\/div>\n<\/div>\n<div class=\"bs-card\">\n<h3><i class=\"fa-solid fa-triangle-exclamation\"><\/i> \u05d8\u05e8\u05d9\u05d0\u05d3\u05d4 (Triad)<\/h3>\n<div class=\"bs-swatch-grid\" id=\"scheme-triad\"><\/div>\n<\/div>\n<div class=\"bs-card\">\n<h3><i class=\"fa-solid fa-square\"><\/i> \u05d8\u05d8\u05e8\u05d3\u05d4 \/ \u05e8\u05d9\u05d1\u05d5\u05e2 (Tetrad \/ Square)<\/h3>\n<div class=\"bs-swatch-grid\" id=\"scheme-tetrad\"><\/div>\n<\/div>\n<div class=\"bs-card\">\n<h3><i class=\"fa-solid fa-arrows-split-up-and-left\"><\/i> \u05e4\u05d9\u05e6\u05d5\u05dc \u05de\u05e9\u05dc\u05d9\u05dd (Split Complementary)<\/h3>\n<div class=\"bs-swatch-grid\" id=\"scheme-split\"><\/div>\n<\/div>\n<div class=\"bs-card\">\n<h3><i class=\"fa-solid fa-layer-group\"><\/i> \u05d0\u05e0\u05dc\u05d5\u05d2\u05d9 (Analogous)<\/h3>\n<div class=\"bs-swatch-grid\" id=\"scheme-analogous\"><\/div>\n<\/div>\n<div class=\"bs-card\">\n<h3><i class=\"fa-solid fa-bars-staggered\"><\/i> \u05de\u05d5\u05e0\u05d5\u05db\u05e8\u05d5\u05de\u05d8\u05d9 (Monochromatic)<\/h3>\n<div class=\"bs-swatch-grid\" id=\"scheme-monochromatic\"><\/div>\n<\/div>\n<\/div>\n<div class=\"bs-panel\" id=\"tab-image\">\n<div class=\"bs-card\">\n<h3><i class=\"fa-solid fa-upload\"><\/i> \u05d7\u05d9\u05dc\u05d5\u05e5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05de\u05d5\u05e0\u05d4<\/h3>\n<p style=\"color: var(--muted-color); margin-bottom: 15px; font-size: 0.9rem;\">\u05d4\u05e2\u05dc\u05d4 \u05ea\u05de\u05d5\u05e0\u05d4 \u05db\u05d3\u05d9 \u05dc\u05d7\u05dc\u05e5 \u05de\u05de\u05e0\u05d4 \u05d0\u05ea \u05e4\u05dc\u05d8\u05ea \u05d4\u05e6\u05d1\u05e2\u05d9\u05dd \u05d0\u05d5 \u05dc\u05d3\u05d2\u05d5\u05dd \u05e6\u05d1\u05e2 \u05e1\u05e4\u05e6\u05d9\u05e4\u05d9 \u05d1\u05e2\u05d6\u05e8\u05ea \u05d4\u05e2\u05db\u05d1\u05e8.<\/p>\n<div class=\"bs-upload-area\" id=\"image-dropzone\">\n<i class=\"fa-solid fa-cloud-arrow-up\"><\/i>\n<h4>\u05d2\u05e8\u05d5\u05e8 \u05ea\u05de\u05d5\u05e0\u05d4 \u05dc\u05db\u05d0\u05df \u05d0\u05d5 \u05dc\u05d7\u05e5 \u05dc\u05d1\u05d7\u05d9\u05e8\u05d4<\/h4>\n<input accept=\"image\/*\" aria-label=\"\u05d4\u05e2\u05dc\u05d0\u05ea \u05ea\u05de\u05d5\u05e0\u05d4\" id=\"image-upload\" style=\"display: none;\" type=\"file\"\/>\n<\/div>\n<canvas aria-label=\"\u05e7\u05e0\u05d1\u05e1 \u05dc\u05d1\u05d7\u05d9\u05e8\u05ea \u05e6\u05d1\u05e2 \u05de\u05ea\u05de\u05d5\u05e0\u05d4\" id=\"bs-image-canvas\"><\/canvas>\n<div id=\"image-palette-container\" style=\"display: none;\">\n<h4 style=\"margin-bottom: 10px; border-bottom: 1px solid var(--border-color); padding-bottom: 5px;\">\u05e4\u05dc\u05d8\u05ea \u05e6\u05d1\u05e2\u05d9\u05dd \u05e9\u05d7\u05d5\u05dc\u05e6\u05d4:<\/h4>\n<div class=\"bs-swatch-grid\" id=\"image-palette-grid\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"bs-toast\" id=\"toast\"><\/div>\n<script>\n    document.addEventListener(\"DOMContentLoaded\", () => {\n        const container = document.getElementById(\"bnet-tool-color-studio\");\n        \n        let baseColor = { h: 217, s: 90, l: 60 };\n        let blendColor = { h: 0, s: 84, l: 60 };\n        let globalMode = 'rgb';\n        \n        let colorPicker = null;\n        \n        \/\/ Polling loop for iro since it's loaded with defer\n        const checkIro = setInterval(() => {\n            if (typeof iro !== 'undefined') {\n                clearInterval(checkIro);\n                colorPicker = new iro.ColorPicker(container.querySelector(\"#iro-color-picker\"), {\n                    width: 180,\n                    color: \"hsl(217, 90%, 60%)\",\n                    borderWidth: 1,\n                    borderColor: \"#334155\",\n                    layout: [\n                        { component: iro.ui.Wheel },\n                        { component: iro.ui.Slider, options: { sliderType: 'value' } }\n                    ]\n                });\n                colorPicker.on('input:change', function(color) {\n                    baseColor = color.hsl;\n                    updateAll('iro');\n                });\n            }\n        }, 100);\n\n        const tabBtns = container.querySelectorAll('.bs-tab');\n        const tabPanels = container.querySelectorAll('.bs-panel');\n        const globalColorCard = container.querySelector('#global-color-card');\n        const inputHex = container.querySelector('#input-hex');\n        const inputRgb = container.querySelector('#input-rgb');\n        const inputHsl = container.querySelector('#input-hsl');\n        const inputCmyk = container.querySelector('#input-cmyk');\n        const sliderLightness = container.querySelector('#slider-lightness');\n        const sliderSaturation = container.querySelector('#slider-saturation');\n        const sliderHue = container.querySelector('#slider-hue');\n        const valLightness = container.querySelector('#val-lightness');\n        const valSaturation = container.querySelector('#val-saturation');\n        const valHue = container.querySelector('#val-hue');\n        const btnInvert = container.querySelector('#btn-invert');\n        const btnGreyscale = container.querySelector('#btn-greyscale');\n        const btnRandom = container.querySelector('#btn-random');\n        const blendNative = container.querySelector('#blend-color-native');\n        const blendPreview1 = container.querySelector('#blend-color1-preview');\n        const blendPreview2 = container.querySelector('#blend-color2-preview');\n        const blendResult = container.querySelector('#blend-result-preview');\n        const gradientPreview = container.querySelector('#gradient-preview');\n        const gradientCss = container.querySelector('#gradient-css');\n        const toast = container.querySelector('#toast');\n\n        function showToast(msg) {\n            toast.textContent = msg;\n            toast.classList.add('show');\n            setTimeout(() => toast.classList.remove('show'), 2500);\n        }\n        \n        \/\/ Expose copy function globally so onclick=\"\" works\n        window.copyTextToClipboard = function(text) {\n            navigator.clipboard.writeText(text).then(() => {\n                showToast('\u05d4\u05d5\u05e2\u05ea\u05e7: ' + text);\n            });\n        };\n\n        function hslToHex(h, s, l) {\n            l \/= 100;\n            const a = s * Math.min(l, 1 - l) \/ 100;\n            const f = n => {\n                const k = (n + h \/ 30) % 12;\n                const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n                return Math.round(255 * color).toString(16).padStart(2, '0');\n            };\n            return `#${f(0)}${f(8)}${f(4)}`;\n        }\n        \n        function hexToHsl(hex) {\n            let result = \/^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$\/i.exec(hex);\n            if (!result) return {h:0, s:0, l:0};\n            let r = parseInt(result[1], 16) \/ 255, g = parseInt(result[2], 16) \/ 255, b = parseInt(result[3], 16) \/ 255;\n            let max = Math.max(r, g, b), min = Math.min(r, g, b);\n            let h, s, l = (max + min) \/ 2;\n            if (max === min) h = s = 0; \n            else {\n                let d = max - min;\n                s = l > 0.5 ? d \/ (2 - max - min) : d \/ (max + min);\n                switch (max) {\n                    case r: h = (g - b) \/ d + (g < b ? 6 : 0); break;\n                    case g: h = (b - r) \/ d + 2; break;\n                    case b: h = (r - g) \/ d + 4; break;\n                }\n                h \/= 6;\n            }\n            return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };\n        }\n\n        function hslToRgb(h, s, l) {\n            let hex = hslToHex(h, s, l);\n            let result = \/^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$\/i.exec(hex);\n            return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null;\n        }\n\n        function rgbToCmyk(r, g, b) {\n            let c = 1 - (r \/ 255);\n            let m = 1 - (g \/ 255);\n            let y = 1 - (b \/ 255);\n            let k = Math.min(c, Math.min(m, y));\n            if (k === 1) return { c: 0, m: 0, y: 0, k: 100 };\n            c = (c - k) \/ (1 - k); m = (m - k) \/ (1 - k); y = (y - k) \/ (1 - k);\n            return { c: Math.round(c * 100), m: Math.round(m * 100), y: Math.round(y * 100), k: Math.round(k * 100) };\n        }\n\n        function invertHex(hex) {\n            let h = hex.replace('#', '');\n            let inverted = (parseInt(h, 16) ^ 0xFFFFFF).toString(16).padStart(6, '0').toUpperCase();\n            return '#' + inverted;\n        }\n\n        function blendHexes(hex1, hex2) {\n            let h1 = parseInt(hex1.substring(1, 3), 16), s1 = parseInt(hex1.substring(3, 5), 16), l1 = parseInt(hex1.substring(5, 7), 16);\n            let h2 = parseInt(hex2.substring(1, 3), 16), s2 = parseInt(hex2.substring(3, 5), 16), l2 = parseInt(hex2.substring(5, 7), 16);\n            let r = Math.round((h1 + h2) \/ 2).toString(16).padStart(2, '0');\n            let g = Math.round((s1 + s2) \/ 2).toString(16).padStart(2, '0');\n            let b = Math.round((l1 + l2) \/ 2).toString(16).padStart(2, '0');\n            return `#${r}${g}${b}`;\n        }\n\n        function updateAll(source) {\n            baseColor.h = (baseColor.h + 360) % 360;\n            baseColor.s = Math.max(0, Math.min(100, baseColor.s));\n            baseColor.l = Math.max(0, Math.min(100, baseColor.l));\n\n            const hex = hslToHex(baseColor.h, baseColor.s, baseColor.l);\n            const rgb = hslToRgb(baseColor.h, baseColor.s, baseColor.l);\n            const cmyk = rgbToCmyk(rgb.r, rgb.g, rgb.b);\n            \n            if (source !== 'hex') inputHex.value = hex.toUpperCase();\n            if (source !== 'rgb') inputRgb.value = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n            if (source !== 'hsl') inputHsl.value = `hsl(${Math.round(baseColor.h)}, ${Math.round(baseColor.s)}%, ${Math.round(baseColor.l)}%)`;\n            if (source !== 'cmyk') inputCmyk.value = `cmyk(${cmyk.c}%, ${cmyk.m}%, ${cmyk.y}%, ${cmyk.k}%)`;\n            \n            if (source !== 'iro' &#038;&#038; colorPicker) colorPicker.color.hsl = baseColor;\n            \n            if (source !== 'sliders') {\n                sliderHue.value = baseColor.h;\n                sliderSaturation.value = baseColor.s;\n                sliderLightness.value = baseColor.l;\n                valHue.textContent = `${Math.round(baseColor.h)}\u00b0`;\n                valSaturation.textContent = `${Math.round(baseColor.s)}%`;\n                valLightness.textContent = `${Math.round(baseColor.l)}%`;\n            }\n\n            const hexBlend = hslToHex(blendColor.h, blendColor.s, blendColor.l);\n            blendPreview1.style.backgroundColor = hex;\n            blendPreview2.style.backgroundColor = hexBlend;\n            const blended = blendHexes(hex, hexBlend);\n            blendResult.style.backgroundColor = blended;\n            \n            const gradString = `linear-gradient(to right, ${hex}, ${hexBlend})`;\n            gradientPreview.style.background = gradString;\n            gradientCss.textContent = gradString;\n\n            generateSchemes();\n        }\n\n        tabBtns.forEach(btn => {\n            btn.addEventListener('click', () => {\n                tabBtns.forEach(b => b.classList.remove('active'));\n                tabPanels.forEach(p => p.classList.remove('active'));\n                btn.classList.add('active');\n                container.querySelector('#' + btn.dataset.target).classList.add('active');\n                if (btn.dataset.target === 'tab-image') globalColorCard.style.display = 'none';\n                else globalColorCard.style.display = 'block';\n            });\n        });\n\n        container.querySelectorAll('input[name=\"global-mode\"]').forEach(radio => {\n            radio.addEventListener('change', (e) => { globalMode = e.target.value; updateAll('mode'); });\n        });\n\n        [sliderHue, sliderSaturation, sliderLightness].forEach(slider => {\n            slider.addEventListener('input', () => {\n                baseColor.h = parseInt(sliderHue.value);\n                baseColor.s = parseInt(sliderSaturation.value);\n                baseColor.l = parseInt(sliderLightness.value);\n                updateAll('sliders');\n            });\n        });\n\n        inputHex.addEventListener('change', (e) => {\n            let val = e.target.value;\n            if (!val.startsWith('#')) val = '#' + val;\n            baseColor = hexToHsl(val);\n            updateAll('hex');\n        });\n\n        btnInvert.addEventListener('click', () => {\n            baseColor = hexToHsl(invertHex(hslToHex(baseColor.h, baseColor.s, baseColor.l)));\n            updateAll('invert');\n        });\n        \n        btnGreyscale.addEventListener('click', () => { baseColor.s = 0; updateAll('greyscale'); });\n        btnRandom.addEventListener('click', () => {\n            baseColor = { h: Math.floor(Math.random() * 360), s: Math.floor(Math.random() * 100), l: Math.floor(Math.random() * 100) };\n            updateAll('random');\n        });\n\n        blendNative.addEventListener('input', (e) => { blendColor = hexToHsl(e.target.value); updateAll('blend'); });\n        gradientCss.addEventListener('click', () => copyTextToClipboard(gradientCss.textContent));\n        blendResult.addEventListener('click', () => {\n            copyTextToClipboard(blendHexes(hslToHex(baseColor.h, baseColor.s, baseColor.l), hslToHex(blendColor.h, blendColor.s, blendColor.l)).toUpperCase());\n        });\n\n        function renderSwatchGrid(containerId, hslColors) {\n            const grid = container.querySelector('#' + containerId);\n            grid.innerHTML = '';\n            hslColors.forEach(c => {\n                const hex = hslToHex((c.h + 360) % 360, Math.max(0, Math.min(100, c.s)), Math.max(0, Math.min(100, c.l)));\n                let displayText = hex.toUpperCase();\n                if (globalMode === 'cmyk') {\n                    const rgb = hslToRgb(c.h, c.s, c.l);\n                    const cmyk = rgbToCmyk(rgb.r, rgb.g, rgb.b);\n                    displayText = `cmyk(${cmyk.c}%, ${cmyk.m}%, ${cmyk.y}%, ${cmyk.k}%)`;\n                }\n                const el = document.createElement('div');\n                el.className = 'bs-swatch';\n                el.innerHTML = `\n                    <div class=\"bs-swatch-color\" style=\"background-color: ${hex}\"><\/div>\n                    <div class=\"bs-swatch-info\" style=\"font-size: 0.75rem;\">${displayText}<\/div>\n                `;\n                el.addEventListener('click', () => copyTextToClipboard(displayText));\n                grid.appendChild(el);\n            });\n        }\n\n        function generateSchemes() {\n            const { h, s, l } = baseColor;\n            renderSwatchGrid('scheme-complementary', [{h, s, l}, {h: h + 180, s, l}]);\n            renderSwatchGrid('scheme-triad', [{h, s, l}, {h: h + 120, s, l}, {h: h + 240, s, l}]);\n            renderSwatchGrid('scheme-tetrad', [{h, s, l}, {h: h + 90, s, l}, {h: h + 180, s, l}, {h: h + 270, s, l}]);\n            renderSwatchGrid('scheme-split', [{h, s, l}, {h: h + 150, s, l}, {h: h + 210, s, l}]);\n            renderSwatchGrid('scheme-analogous', [{h: h - 30, s, l}, {h, s, l}, {h: h + 30, s, l}]);\n            renderSwatchGrid('scheme-monochromatic', [{h, s, l: l + 30}, {h, s, l: l + 15}, {h, s, l}, {h, s, l: l - 15}, {h, s, l: l - 30}]);\n        }\n\n        const dropzone = container.querySelector('#image-dropzone');\n        const imageUpload = container.querySelector('#image-upload');\n        const canvas = container.querySelector('#bs-image-canvas');\n        const ctx = canvas.getContext('2d', { willReadFrequently: true });\n        const imgPaletteContainer = container.querySelector('#image-palette-container');\n        const imgPaletteGrid = container.querySelector('#image-palette-grid');\n\n        dropzone.addEventListener('click', () => imageUpload.click());\n        dropzone.addEventListener('dragover', (e) => { e.preventDefault(); dropzone.classList.add('dragover'); });\n        dropzone.addEventListener('dragleave', () => dropzone.classList.remove('dragover'));\n        dropzone.addEventListener('drop', (e) => {\n            e.preventDefault(); dropzone.classList.remove('dragover');\n            if (e.dataTransfer.files && e.dataTransfer.files[0]) handleImageUpload(e.dataTransfer.files[0]);\n        });\n        imageUpload.addEventListener('change', (e) => { if (e.target.files && e.target.files[0]) handleImageUpload(e.target.files[0]); });\n\n        function handleImageUpload(file) {\n            const reader = new FileReader();\n            reader.onload = (e) => {\n                const img = new Image();\n                img.onload = () => {\n                    const MAX_WIDTH = 800;\n                    let width = img.width, height = img.height;\n                    if (width > MAX_WIDTH) { height = height * (MAX_WIDTH \/ width); width = MAX_WIDTH; }\n                    canvas.width = width; canvas.height = height;\n                    ctx.drawImage(img, 0, 0, width, height);\n                    canvas.style.display = 'block'; dropzone.style.display = 'none';\n                    extractPaletteFromCanvas();\n                };\n                img.src = e.target.result;\n            };\n            reader.readAsDataURL(file);\n        }\n\n        canvas.addEventListener('click', (e) => {\n            const rect = canvas.getBoundingClientRect();\n            const scaleX = canvas.width \/ rect.width, scaleY = canvas.height \/ rect.height;\n            const x = (e.clientX - rect.left) * scaleX, y = (e.clientY - rect.top) * scaleY;\n            const pixel = ctx.getImageData(x, y, 1, 1).data;\n            const hex = \"#\" + (\"000000\" + ((pixel[0] << 16) | (pixel[1] << 8) | pixel[2]).toString(16)).slice(-6);\n            baseColor = hexToHsl(hex);\n            updateAll('picker');\n            tabBtns[0].click();\n            showToast('\u05e6\u05d1\u05e2 \u05e0\u05d1\u05d7\u05e8: ' + hex.toUpperCase());\n        });\n\n        function extractPaletteFromCanvas() {\n            const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height).data;\n            const colorCounts = {};\n            for (let i = 0; i < pixels.length; i += 40) {\n                const r = Math.round(pixels[i] \/ 32) * 32, g = Math.round(pixels[i+1] \/ 32) * 32, b = Math.round(pixels[i+2] \/ 32) * 32;\n                const rgb = `${r},${g},${b}`;\n                colorCounts[rgb] = (colorCounts[rgb] || 0) + 1;\n            }\n            const sortedColors = Object.entries(colorCounts).sort((a, b) => b[1] - a[1]).slice(0, 6).map(c => {\n                const parts = c[0].split(',');\n                return \"#\" + (\"000000\" + ((parseInt(parts[0]) << 16) | (parseInt(parts[1]) << 8) | parseInt(parts[2])).toString(16)).slice(-6);\n            });\n            imgPaletteContainer.style.display = 'block';\n            imgPaletteGrid.innerHTML = '';\n            sortedColors.forEach(hex => {\n                const el = document.createElement('div'); el.className = 'bs-swatch';\n                el.innerHTML = `<div class=\"bs-swatch-color\" style=\"background-color: ${hex}\"><\/div><div class=\"bs-swatch-info\">${hex.toUpperCase()}<\/div>`;\n                el.addEventListener('click', () => { baseColor = hexToHsl(hex); updateAll('picker'); tabBtns[0].click(); showToast('\u05e6\u05d1\u05e2 \u05d4\u05d5\u05d2\u05d3\u05e8 \u05db\u05d1\u05e1\u05d9\u05e1: ' + hex.toUpperCase()); });\n                imgPaletteGrid.appendChild(el);\n            });\n        }\n\n        updateAll('init');\n    });\n    <\/script>\n<\/div>\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"WebApplication\",\n  \"name\": \"\u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05e7\u05d3\u05dd\",\n  \"applicationCategory\": \"DesignApplication\",\n  \"operatingSystem\": \"All\",\n  \"description\": \"19 \u05db\u05dc\u05d9 \u05e6\u05d1\u05e2 \u05e2\u05d5\u05e6\u05de\u05ea\u05d9\u05d9\u05dd \u05d1\u05de\u05de\u05e9\u05e7 \u05d0\u05d7\u05d3 \u05d7\u05db\u05dd \u05dc\u05de\u05e6\u05d9\u05d0\u05ea \u05e1\u05db\u05de\u05d5\u05ea, \u05d2\u05d5\u05d5\u05e0\u05d9\u05dd \u05d5\u05d7\u05d9\u05dc\u05d5\u05e5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05de\u05d5\u05e0\u05d5\u05ea.\",\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"price\": \"0\",\n    \"priceCurrency\": \"ILS\"\n  }\n}\n<\/script>\n<\/div>\n\n\n\n<div class=\"futur-glass-card seo-card\">\n\n\n\n<h2 class=\"wp-block-heading\">\u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05e7\u05d3\u05dd &#8211; \u05d4\u05de\u05d3\u05e8\u05d9\u05da \u05d4\u05de\u05dc\u05d0<\/h2>\n\n\n\n<p>\u05d1\u05e8\u05d5\u05db\u05d9\u05dd \u05d4\u05d1\u05d0\u05d9\u05dd \u05d0\u05dc <strong>\u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05e7\u05d3\u05dd<\/strong>, \u05d4\u05db\u05dc\u05d9 \u05d4\u05de\u05e7\u05d9\u05e3 \u05d1\u05d9\u05d5\u05ea\u05e8 \u05dc\u05de\u05e2\u05e6\u05d1\u05d9\u05dd, \u05de\u05e4\u05ea\u05d7\u05d9 \u05d0\u05ea\u05e8\u05d9\u05dd \u05d5\u05d9\u05d5\u05e6\u05e8\u05d9 \u05ea\u05d5\u05db\u05df. \u05d1\u05e2\u05d6\u05e8\u05ea \u05d4\u05de\u05e2\u05e8\u05db\u05ea \u05e9\u05dc\u05e0\u05d5 \u05ea\u05d5\u05db\u05dc\u05d5 \u05dc\u05e0\u05d4\u05dc, \u05dc\u05d3\u05d9\u05d9\u05e7 \u05d5\u05dc\u05d9\u05d9\u05e6\u05e8 <a href=\"\/he\/image-resize\/\">\u05e1\u05db\u05de\u05d5\u05ea \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05e8\u05d4\u05d9\u05d1\u05d5\u05ea<\/a> \u05d1\u05dc\u05d7\u05d9\u05e6\u05ea \u05db\u05e4\u05ea\u05d5\u05e8 \u05d0\u05d7\u05ea. \u05d4\u05db\u05dc\u05d9 \u05e9\u05dc\u05e0\u05d5 \u05de\u05d0\u05d2\u05d3 19 \u05ea\u05db\u05d5\u05e0\u05d5\u05ea \u05d9\u05d9\u05d7\u05d5\u05d3\u05d9\u05d5\u05ea \u05d4\u05de\u05e7\u05dc\u05d5\u05ea \u05e2\u05dc \u05d4\u05e2\u05d1\u05d5\u05d3\u05d4 \u05d4\u05d9\u05d5\u05dd-\u05d9\u05d5\u05de\u05d9\u05ea \u05e9\u05dc\u05db\u05dd, \u05d4\u05d7\u05dc \u05de\u05d7\u05d9\u05e9\u05d5\u05d1 \u05e6\u05d1\u05e2 \u05de\u05e9\u05dc\u05d9\u05dd \u05d5\u05e2\u05d3 \u05dc\u05d7\u05d9\u05dc\u05d5\u05e5 \u05e4\u05dc\u05d8\u05ea \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05de\u05d5\u05e0\u05d4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u05d0\u05d9\u05da \u05dc\u05d4\u05e9\u05ea\u05de\u05e9 \u05d1\u05e1\u05d8\u05d5\u05d3\u05d9\u05d5?<\/h2>\n\n\n\n<p>\u05d4\u05e9\u05d9\u05de\u05d5\u05e9 \u05d1\u05de\u05e2\u05e8\u05db\u05ea \u05d4\u05d5\u05d0 \u05d7\u05d9\u05e0\u05de\u05d9 \u05d5\u05e4\u05e9\u05d5\u05d8. \u05d1\u05d7\u05dc\u05e7 \u05d4\u05e2\u05dc\u05d9\u05d5\u05df \u05ea\u05de\u05e6\u05d0\u05d5 \u05e9\u05dc\u05d5\u05e9 \u05dc\u05e9\u05d5\u05e0\u05d9\u05d5\u05ea \u05e2\u05d9\u05e7\u05e8\u05d9\u05d5\u05ea:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u05d9\u05e6\u05d9\u05e8\u05d4 \u05d5\u05db\u05d5\u05d5\u05e0\u05d5\u05df:<\/strong> \u05d1\u05d7\u05d9\u05e8\u05ea \u05e6\u05d1\u05e2 \u05d4\u05d1\u05e1\u05d9\u05e1 \u05e9\u05dc\u05db\u05dd \u05d1\u05d0\u05de\u05e6\u05e2\u05d5\u05ea \u05d2\u05dc\u05d2\u05dc \u05e6\u05d1\u05e2\u05d9\u05dd \u05e0\u05d5\u05d7, \u05d5\u05d4\u05d2\u05d3\u05e8\u05ea \u05d4\u05d1\u05d4\u05d9\u05e8\u05d5\u05ea \u05d5\u05d4\u05e8\u05d5\u05d5\u05d9\u05d4 \u05dc\u05e7\u05d1\u05dc\u05ea \u05d4\u05d2\u05d5\u05d5\u05df \u05d4\u05de\u05d3\u05d5\u05d9\u05e7 \u05d1\u05d9\u05d5\u05ea\u05e8. \u05de\u05db\u05d0\u05df \u05ea\u05d5\u05db\u05dc\u05d5 \u05d2\u05dd \u05dc\u05de\u05d6\u05d2 \u05e9\u05e0\u05d9 \u05e6\u05d1\u05e2\u05d9\u05dd \u05dc\u05d9\u05e6\u05d9\u05e8\u05ea \u05d2\u05e8\u05d3\u05d9\u05d0\u05e0\u05d8.<\/li>\n\n<li><strong>\u05e1\u05db\u05de\u05d5\u05ea \u05e6\u05d1\u05e2\u05d9\u05dd:<\/strong> \u05de\u05e2\u05e8\u05db\u05ea \u05d7\u05db\u05de\u05d4 \u05d4\u05de\u05d9\u05d9\u05e6\u05e8\u05ea \u05e2\u05d1\u05d5\u05e8\u05db\u05dd \u05d0\u05d5\u05d8\u05d5\u05de\u05d8\u05d9\u05ea \u05d4\u05ea\u05d0\u05de\u05d5\u05ea \u05e6\u05d1\u05e2\u05d9\u05dd \u05e2\u05dc \u05d1\u05e1\u05d9\u05e1 \u05ea\u05d5\u05e8\u05ea \u05d4\u05e6\u05d1\u05e2\u05d9\u05dd (\u05d8\u05e8\u05d9\u05d0\u05d3\u05d4, \u05e6\u05d1\u05e2 \u05de\u05e9\u05dc\u05d9\u05dd, \u05d0\u05e0\u05dc\u05d5\u05d2\u05d9 \u05d5\u05e2\u05d5\u05d3).<\/li>\n\n<li><strong>\u05d7\u05d9\u05dc\u05d5\u05e5 \u05de\u05ea\u05de\u05d5\u05e0\u05d4:<\/strong> \u05d4\u05e2\u05dc\u05d5 \u05ea\u05de\u05d5\u05e0\u05d4 \u05e9\u05d0\u05d4\u05d1\u05ea\u05dd, \u05d5\u05d4\u05db\u05dc\u05d9 \u05d9\u05e9\u05dc\u05d5\u05e3 \u05de\u05de\u05e0\u05d4 \u05d0\u05ea \u05e9\u05e9\u05ea \u05d4\u05e6\u05d1\u05e2\u05d9\u05dd \u05d4\u05d1\u05d5\u05dc\u05d8\u05d9\u05dd \u05d1\u05d9\u05d5\u05ea\u05e8 \u05d0\u05d5 \u05d9\u05d0\u05e4\u05e9\u05e8 \u05dc\u05db\u05dd \u05dc\u05d3\u05d2\u05d5\u05dd \u05e4\u05d9\u05e7\u05e1\u05dc \u05e1\u05e4\u05e6\u05d9\u05e4\u05d9.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u05dc\u05de\u05d4 \u05d7\u05e9\u05d5\u05d1 \u05dc\u05d1\u05d7\u05d5\u05e8 \u05e1\u05db\u05de\u05ea \u05e6\u05d1\u05e2\u05d9\u05dd \u05e0\u05db\u05d5\u05e0\u05d4?<\/h3>\n\n\n\n<p>\u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05e9\u05e4\u05d9\u05e2\u05d9\u05dd \u05e2\u05dc \u05d4\u05e4\u05e1\u05d9\u05db\u05d5\u05dc\u05d5\u05d2\u05d9\u05d4 \u05e9\u05dc \u05d4\u05d2\u05d5\u05dc\u05e9\u05d9\u05dd. \u05d1\u05d7\u05d9\u05e8\u05ea \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05d0\u05d9\u05de\u05d9\u05dd \u05d9\u05db\u05d5\u05dc\u05d4 \u05dc\u05e9\u05e4\u05e8 \u05de\u05e9\u05de\u05e2\u05d5\u05ea\u05d9\u05ea \u05d0\u05ea \u05d0\u05d7\u05d5\u05d6\u05d9 \u05d4\u05d4\u05de\u05e8\u05d4 \u05d1\u05d0\u05ea\u05e8 \u05e9\u05dc\u05db\u05dd \u05d0\u05d5 \u05dc\u05d9\u05e6\u05d5\u05e8 \u05de\u05d9\u05ea\u05d5\u05d2 \u05d7\u05d6\u05e7 \u05d9\u05d5\u05ea\u05e8. \u05d1\u05e2\u05d6\u05e8\u05ea \u05d4\u05db\u05dc\u05d9\u05dd \u05d4\u05d0\u05d5\u05d8\u05d5\u05de\u05d8\u05d9\u05d9\u05dd \u05e9\u05dc\u05e0\u05d5, \u05d0\u05d9\u05e0\u05db\u05dd \u05e6\u05e8\u05d9\u05db\u05d9\u05dd \u05dc\u05e0\u05d7\u05e9 \u05de\u05d4 \u05e2\u05d5\u05d1\u05d3 \u05d1\u05d9\u05d7\u05d3 &#8211; \u05d4\u05d0\u05dc\u05d2\u05d5\u05e8\u05d9\u05ea\u05dd \u05de\u05d1\u05d5\u05e1\u05e1 \u05e2\u05dc \u05d2\u05dc\u05d2\u05dc \u05d4\u05e6\u05d1\u05e2\u05d9\u05dd \u05d4\u05de\u05e1\u05d5\u05e8\u05ea\u05d9 \u05d5\u05de\u05e4\u05d9\u05e7 \u05e2\u05d1\u05d5\u05e8\u05db\u05dd \u05ea\u05d5\u05e6\u05d0\u05d5\u05ea \u05de\u05d3\u05d5\u05d9\u05e7\u05d5\u05ea \u05e9\u05e0\u05d9\u05ea\u05df \u05dc\u05d4\u05e2\u05ea\u05d9\u05e7 \u05d9\u05e9\u05d9\u05e8\u05d5\u05ea \u05dc-CSS \u05d0\u05d5 \u05dc\u05ea\u05d5\u05db\u05e0\u05d5\u05ea \u05e2\u05d9\u05e6\u05d5\u05d1.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u05d9\u05ea\u05e8\u05d5\u05e0\u05d5\u05ea \u05de\u05e8\u05db\u05d6\u05d9\u05d9\u05dd \u05d1\u05db\u05dc\u05d9 \u05e9\u05dc\u05e0\u05d5<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u05e9\u05dc\u05d9\u05d8\u05d4 \u05de\u05dc\u05d0\u05d4 \u05d1\u05e4\u05d5\u05e8\u05de\u05d8\u05d9\u05dd (HEX, RGB, HSL \u05d5\u05d2\u05dd CMYK \u05d1\u05de\u05d9\u05d5\u05d7\u05d3 \u05e2\u05d1\u05d5\u05e8 \u05d3\u05e4\u05d5\u05e1).<\/li>\n\n<li>\u05de\u05de\u05e9\u05e7 \u05dc\u05d9\u05dc\u05d4 (Dark Mode) \u05d4\u05de\u05d5\u05ea\u05d0\u05dd \u05d0\u05d5\u05d8\u05d5\u05de\u05d8\u05d9\u05ea \u05dc\u05d4\u05d2\u05d3\u05e8\u05d5\u05ea \u05d4\u05d0\u05ea\u05e8.<\/li>\n\n<li>\u05dc\u05dc\u05d0 \u05ea\u05dc\u05d5\u05ea \u05d1\u05ea\u05d5\u05db\u05e0\u05d5\u05ea \u05d9\u05e7\u05e8\u05d5\u05ea &#8211; \u05d4\u05db\u05dc \u05e7\u05d5\u05e8\u05d4 \u05d9\u05e9\u05d9\u05e8\u05d5\u05ea \u05d1\u05d3\u05e4\u05d3\u05e4\u05df \u05d1\u05d0\u05d5\u05e4\u05df \u05de\u05d0\u05d5\u05d1\u05d8\u05d7 \u05d5\u05de\u05d4\u05d9\u05e8.<\/li>\n<\/ul>\n\n\n\n<p><strong>\u05d4\u05d1\u05d4\u05e8\u05d4:<\/strong> \u05d4\u05de\u05d9\u05d3\u05e2 \u05d5\u05d4\u05d7\u05d9\u05e9\u05d5\u05d1\u05d9\u05dd \u05d4\u05de\u05d5\u05e6\u05d2\u05d9\u05dd \u05d1\u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05e7\u05d3\u05dd \u05e0\u05d9\u05ea\u05e0\u05d9\u05dd \u05db\u05db\u05dc\u05d9 \u05e2\u05d6\u05e8 \u05d1\u05dc\u05d1\u05d3. \u05d1\u05de\u05e7\u05e8\u05d9\u05dd \u05e9\u05dc \u05d4\u05d3\u05e4\u05e1\u05d4 \u05de\u05e7\u05e6\u05d5\u05e2\u05d9\u05ea, \u05de\u05d5\u05de\u05dc\u05e5 \u05dc\u05d5\u05d5\u05d3\u05d0 \u05d0\u05ea \u05e4\u05e8\u05d5\u05e4\u05d9\u05dc\u05d9 \u05d4-CMYK \u05de\u05d5\u05dc \u05d1\u05d9\u05ea \u05d4\u05d3\u05e4\u05d5\u05e1 \u05e9\u05dc\u05db\u05dd \u05db\u05d3\u05d9 \u05dc\u05de\u05e0\u05d5\u05e2 \u05e1\u05d8\u05d9\u05d5\u05ea \u05d1\u05d2\u05d5\u05d5\u05df.<\/p>\n\n\n\n<\/div>\n\n\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>19 \u05db\u05dc\u05d9 \u05e6\u05d1\u05e2 \u05e2\u05d5\u05e6\u05de\u05ea\u05d9\u05d9\u05dd \u05d1\u05de\u05de\u05e9\u05e7 \u05d0\u05d7\u05d3 \u05d7\u05db\u05dd \u05dc\u05de\u05e6\u05d9\u05d0\u05ea \u05e1\u05db\u05de\u05d5\u05ea, \u05d2\u05d5\u05d5\u05e0\u05d9\u05dd \u05d5\u05d7\u05d9\u05dc\u05d5\u05e5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05de\u05d5\u05e0\u05d5\u05ea.<\/p>\n","protected":false},"author":1,"featured_media":50681,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_yoast_wpseo_metadesc":"19 \u05db\u05dc\u05d9 \u05e6\u05d1\u05e2 \u05e2\u05d5\u05e6\u05de\u05ea\u05d9\u05d9\u05dd \u05d1\u05de\u05de\u05e9\u05e7 \u05d0\u05d7\u05d3 \u05d7\u05db\u05dd \u05dc\u05de\u05e6\u05d9\u05d0\u05ea \u05e1\u05db\u05de\u05d5\u05ea, \u05d2\u05d5\u05d5\u05e0\u05d9\u05dd \u05d5\u05d7\u05d9\u05dc\u05d5\u05e5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05de\u05d5\u05e0\u05d5\u05ea.","tool_emoji":"\ud83c\udfa8","tool_category":"\u05db\u05dc\u05d9\u05dd \u05dc\u05d1\u05d5\u05e0\u05d9 \u05d0\u05ea\u05e8\u05d9\u05dd","tool_featured":"no","footnotes":""},"class_list":["post-50678","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\ud83c\udfa8 \u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05e7\u05d3\u05dd<\/title>\n<meta name=\"description\" content=\"19 \u05db\u05dc\u05d9 \u05e6\u05d1\u05e2 \u05e2\u05d5\u05e6\u05de\u05ea\u05d9\u05d9\u05dd \u05d1\u05de\u05de\u05e9\u05e7 \u05d0\u05d7\u05d3 \u05d7\u05db\u05dd \u05dc\u05de\u05e6\u05d9\u05d0\u05ea \u05e1\u05db\u05de\u05d5\u05ea, \u05d2\u05d5\u05d5\u05e0\u05d9\u05dd \u05d5\u05d7\u05d9\u05dc\u05d5\u05e5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05de\u05d5\u05e0\u05d5\u05ea.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bsolution.me\/he\/color-studio\/\" \/>\n<meta property=\"og:locale\" content=\"he_IL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\ud83c\udfa8 \u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05e7\u05d3\u05dd\" \/>\n<meta property=\"og:description\" content=\"19 \u05db\u05dc\u05d9 \u05e6\u05d1\u05e2 \u05e2\u05d5\u05e6\u05de\u05ea\u05d9\u05d9\u05dd \u05d1\u05de\u05de\u05e9\u05e7 \u05d0\u05d7\u05d3 \u05d7\u05db\u05dd \u05dc\u05de\u05e6\u05d9\u05d0\u05ea \u05e1\u05db\u05de\u05d5\u05ea, \u05d2\u05d5\u05d5\u05e0\u05d9\u05dd \u05d5\u05d7\u05d9\u05dc\u05d5\u05e5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05de\u05d5\u05e0\u05d5\u05ea.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bsolution.me\/he\/color-studio\/\" \/>\n<meta property=\"og:site_name\" content=\"\u05db\u05dc\u05d9\u05dd \u05d1\u05d7\u05d9\u05e0\u05dd \u05dc\u05e2\u05e1\u05e7\u05d9\u05dd\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-31T19:59:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bsolution.me\/he\/wp-content\/uploads\/sites\/2\/2026\/05\/advanced-color-studio.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u05d6\u05de\u05df \u05e7\u05e8\u05d9\u05d0\u05d4 \u05de\u05d5\u05e2\u05e8\u05da\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 \u05d3\u05e7\u05d5\u05ea\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/he\\\/color-studio\\\/\",\"url\":\"https:\\\/\\\/bsolution.me\\\/he\\\/color-studio\\\/\",\"name\":\"\ud83c\udfa8 \u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05e7\u05d3\u05dd\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bsolution.me\\\/he\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/bsolution.me\\\/he\\\/color-studio\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/bsolution.me\\\/he\\\/color-studio\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/bsolution.me\\\/he\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2026\\\/05\\\/advanced-color-studio.jpg\",\"datePublished\":\"2026-05-07T06:09:49+00:00\",\"dateModified\":\"2026-05-31T19:59:20+00:00\",\"description\":\"19 \u05db\u05dc\u05d9 \u05e6\u05d1\u05e2 \u05e2\u05d5\u05e6\u05de\u05ea\u05d9\u05d9\u05dd \u05d1\u05de\u05de\u05e9\u05e7 \u05d0\u05d7\u05d3 \u05d7\u05db\u05dd \u05dc\u05de\u05e6\u05d9\u05d0\u05ea \u05e1\u05db\u05de\u05d5\u05ea, \u05d2\u05d5\u05d5\u05e0\u05d9\u05dd \u05d5\u05d7\u05d9\u05dc\u05d5\u05e5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05de\u05d5\u05e0\u05d5\u05ea.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bsolution.me\\\/he\\\/color-studio\\\/#breadcrumb\"},\"inLanguage\":\"he-IL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bsolution.me\\\/he\\\/color-studio\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"he-IL\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/he\\\/color-studio\\\/#primaryimage\",\"url\":\"https:\\\/\\\/bsolution.me\\\/he\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2026\\\/05\\\/advanced-color-studio.jpg\",\"contentUrl\":\"https:\\\/\\\/bsolution.me\\\/he\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2026\\\/05\\\/advanced-color-studio.jpg\",\"width\":1024,\"height\":1024,\"caption\":\"\u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05e7\u05d3\u05dd\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/he\\\/color-studio\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bsolution.me\\\/he\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\ud83c\udfa8 \u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05e7\u05d3\u05dd\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/he\\\/#website\",\"url\":\"https:\\\/\\\/bsolution.me\\\/he\\\/\",\"name\":\"\u05db\u05dc\u05d9\u05dd \u05d1\u05d7\u05d9\u05e0\u05dd \u05dc\u05e2\u05e1\u05e7\u05d9\u05dd\",\"description\":\"\u05d0\u05d5\u05d8\u05d5\u05de\u05e6\u05d9\u05d5\u05ea \u05e9\u05d9\u05d5\u05d5\u05e7, \u05de\u05d7\u05e9\u05d1\u05d5\u05e0\u05d9\u05dd, \u05de\u05d7\u05d5\u05dc\u05dc\u05d9 \u05e7\u05d9\u05e9\u05d5\u05e8\u05d9\u05dd\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/bsolution.me\\\/he\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"he-IL\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\ud83c\udfa8 \u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05e7\u05d3\u05dd","description":"19 \u05db\u05dc\u05d9 \u05e6\u05d1\u05e2 \u05e2\u05d5\u05e6\u05de\u05ea\u05d9\u05d9\u05dd \u05d1\u05de\u05de\u05e9\u05e7 \u05d0\u05d7\u05d3 \u05d7\u05db\u05dd \u05dc\u05de\u05e6\u05d9\u05d0\u05ea \u05e1\u05db\u05de\u05d5\u05ea, \u05d2\u05d5\u05d5\u05e0\u05d9\u05dd \u05d5\u05d7\u05d9\u05dc\u05d5\u05e5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05de\u05d5\u05e0\u05d5\u05ea.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bsolution.me\/he\/color-studio\/","og_locale":"he_IL","og_type":"article","og_title":"\ud83c\udfa8 \u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05e7\u05d3\u05dd","og_description":"19 \u05db\u05dc\u05d9 \u05e6\u05d1\u05e2 \u05e2\u05d5\u05e6\u05de\u05ea\u05d9\u05d9\u05dd \u05d1\u05de\u05de\u05e9\u05e7 \u05d0\u05d7\u05d3 \u05d7\u05db\u05dd \u05dc\u05de\u05e6\u05d9\u05d0\u05ea \u05e1\u05db\u05de\u05d5\u05ea, \u05d2\u05d5\u05d5\u05e0\u05d9\u05dd \u05d5\u05d7\u05d9\u05dc\u05d5\u05e5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05de\u05d5\u05e0\u05d5\u05ea.","og_url":"https:\/\/bsolution.me\/he\/color-studio\/","og_site_name":"\u05db\u05dc\u05d9\u05dd \u05d1\u05d7\u05d9\u05e0\u05dd \u05dc\u05e2\u05e1\u05e7\u05d9\u05dd","article_modified_time":"2026-05-31T19:59:20+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/bsolution.me\/he\/wp-content\/uploads\/sites\/2\/2026\/05\/advanced-color-studio.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"\u05d6\u05de\u05df \u05e7\u05e8\u05d9\u05d0\u05d4 \u05de\u05d5\u05e2\u05e8\u05da":"3 \u05d3\u05e7\u05d5\u05ea"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bsolution.me\/he\/color-studio\/","url":"https:\/\/bsolution.me\/he\/color-studio\/","name":"\ud83c\udfa8 \u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05e7\u05d3\u05dd","isPartOf":{"@id":"https:\/\/bsolution.me\/he\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bsolution.me\/he\/color-studio\/#primaryimage"},"image":{"@id":"https:\/\/bsolution.me\/he\/color-studio\/#primaryimage"},"thumbnailUrl":"https:\/\/bsolution.me\/he\/wp-content\/uploads\/sites\/2\/2026\/05\/advanced-color-studio.jpg","datePublished":"2026-05-07T06:09:49+00:00","dateModified":"2026-05-31T19:59:20+00:00","description":"19 \u05db\u05dc\u05d9 \u05e6\u05d1\u05e2 \u05e2\u05d5\u05e6\u05de\u05ea\u05d9\u05d9\u05dd \u05d1\u05de\u05de\u05e9\u05e7 \u05d0\u05d7\u05d3 \u05d7\u05db\u05dd \u05dc\u05de\u05e6\u05d9\u05d0\u05ea \u05e1\u05db\u05de\u05d5\u05ea, \u05d2\u05d5\u05d5\u05e0\u05d9\u05dd \u05d5\u05d7\u05d9\u05dc\u05d5\u05e5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05de\u05d5\u05e0\u05d5\u05ea.","breadcrumb":{"@id":"https:\/\/bsolution.me\/he\/color-studio\/#breadcrumb"},"inLanguage":"he-IL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bsolution.me\/he\/color-studio\/"]}]},{"@type":"ImageObject","inLanguage":"he-IL","@id":"https:\/\/bsolution.me\/he\/color-studio\/#primaryimage","url":"https:\/\/bsolution.me\/he\/wp-content\/uploads\/sites\/2\/2026\/05\/advanced-color-studio.jpg","contentUrl":"https:\/\/bsolution.me\/he\/wp-content\/uploads\/sites\/2\/2026\/05\/advanced-color-studio.jpg","width":1024,"height":1024,"caption":"\u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05e7\u05d3\u05dd"},{"@type":"BreadcrumbList","@id":"https:\/\/bsolution.me\/he\/color-studio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bsolution.me\/he\/"},{"@type":"ListItem","position":2,"name":"\ud83c\udfa8 \u05e1\u05d8\u05d5\u05d3\u05d9\u05d5 \u05e6\u05d1\u05e2\u05d9\u05dd \u05de\u05ea\u05e7\u05d3\u05dd"}]},{"@type":"WebSite","@id":"https:\/\/bsolution.me\/he\/#website","url":"https:\/\/bsolution.me\/he\/","name":"\u05db\u05dc\u05d9\u05dd \u05d1\u05d7\u05d9\u05e0\u05dd \u05dc\u05e2\u05e1\u05e7\u05d9\u05dd","description":"\u05d0\u05d5\u05d8\u05d5\u05de\u05e6\u05d9\u05d5\u05ea \u05e9\u05d9\u05d5\u05d5\u05e7, \u05de\u05d7\u05e9\u05d1\u05d5\u05e0\u05d9\u05dd, \u05de\u05d7\u05d5\u05dc\u05dc\u05d9 \u05e7\u05d9\u05e9\u05d5\u05e8\u05d9\u05dd","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bsolution.me\/he\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"he-IL"}]}},"_links":{"self":[{"href":"https:\/\/bsolution.me\/he\/wp-json\/wp\/v2\/pages\/50678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bsolution.me\/he\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bsolution.me\/he\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bsolution.me\/he\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bsolution.me\/he\/wp-json\/wp\/v2\/comments?post=50678"}],"version-history":[{"count":1,"href":"https:\/\/bsolution.me\/he\/wp-json\/wp\/v2\/pages\/50678\/revisions"}],"predecessor-version":[{"id":50680,"href":"https:\/\/bsolution.me\/he\/wp-json\/wp\/v2\/pages\/50678\/revisions\/50680"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bsolution.me\/he\/wp-json\/wp\/v2\/media\/50681"}],"wp:attachment":[{"href":"https:\/\/bsolution.me\/he\/wp-json\/wp\/v2\/media?parent=50678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}