<svg width="800" height="600" viewBox="0 0 800 600" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- Background gradient -->
  <defs>
    <linearGradient id="bg-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#f0f9ff;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#e0e7ff;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="palette-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#ef4444;stop-opacity:1" />
      <stop offset="20%" style="stop-color:#f59e0b;stop-opacity:1" />
      <stop offset="40%" style="stop-color:#eab308;stop-opacity:1" />
      <stop offset="60%" style="stop-color:#22c55e;stop-opacity:1" />
      <stop offset="80%" style="stop-color:#3b82f6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#a855f7;stop-opacity:1" />
    </linearGradient>
  </defs>

  <!-- Background -->
  <rect width="800" height="600" fill="url(#bg-gradient)"/>

  <!-- Main color picker interface mockup -->
  <g transform="translate(100, 80)">
    <!-- Color picker window -->
    <rect x="0" y="0" width="600" height="440" rx="16" fill="white" filter="drop-shadow(0 20px 40px rgba(0,0,0,0.1))"/>

    <!-- Window header -->
    <rect x="0" y="0" width="600" height="60" rx="16" fill="#f8fafc"/>
    <rect x="0" y="44" width="600" height="16" fill="#f8fafc"/>

    <!-- Window controls -->
    <circle cx="24" cy="30" r="6" fill="#ef4444"/>
    <circle cx="44" cy="30" r="6" fill="#f59e0b"/>
    <circle cx="64" cy="30" r="6" fill="#22c55e"/>

    <!-- Title -->
    <text x="300" y="38" font-family="Arial, sans-serif" font-size="18" font-weight="600" fill="#1e293b" text-anchor="middle">Color Picker &amp; Converter</text>

    <!-- Main color preview -->
    <rect x="30" y="90" width="250" height="180" rx="12" fill="#3b82f6" stroke="#cbd5e1" stroke-width="2"/>

    <!-- Color preview overlay effects -->
    <circle cx="155" cy="180" r="40" fill="white" opacity="0.2"/>
    <circle cx="155" cy="180" r="60" fill="white" opacity="0.1"/>

    <!-- Color value displays -->
    <g transform="translate(310, 90)">
      <!-- HEX -->
      <rect x="0" y="0" width="260" height="40" rx="8" fill="#f1f5f9"/>
      <text x="12" y="14" font-family="monospace" font-size="11" fill="#64748b">HEX</text>
      <text x="12" y="30" font-family="monospace" font-size="14" font-weight="600" fill="#1e293b">#3B82F6</text>

      <!-- RGB -->
      <rect x="0" y="50" width="260" height="40" rx="8" fill="#f1f5f9"/>
      <text x="12" y="64" font-family="monospace" font-size="11" fill="#64748b">RGB</text>
      <text x="12" y="80" font-family="monospace" font-size="14" font-weight="600" fill="#1e293b">rgb(59, 130, 246)</text>

      <!-- HSL -->
      <rect x="0" y="100" width="260" height="40" rx="8" fill="#f1f5f9"/>
      <text x="12" y="114" font-family="monospace" font-size="11" fill="#64748b">HSL</text>
      <text x="12" y="130" font-family="monospace" font-size="14" font-weight="600" fill="#1e293b">hsl(217, 91%, 60%)</text>

      <!-- CMYK -->
      <rect x="0" y="150" width="260" height="40" rx="8" fill="#f1f5f9"/>
      <text x="12" y="164" font-family="monospace" font-size="11" fill="#64748b">CMYK</text>
      <text x="12" y="180" font-family="monospace" font-size="14" font-weight="600" fill="#1e293b">cmyk(76%, 47%, 0%, 4%)</text>

      <!-- Copy icons -->
      <g transform="translate(235, 15)">
        <rect width="16" height="16" rx="2" fill="none" stroke="#64748b" stroke-width="1.5"/>
        <rect x="3" y="3" width="10" height="10" rx="1" fill="none" stroke="#64748b" stroke-width="1.5"/>
      </g>
      <g transform="translate(235, 65)">
        <rect width="16" height="16" rx="2" fill="none" stroke="#64748b" stroke-width="1.5"/>
        <rect x="3" y="3" width="10" height="10" rx="1" fill="none" stroke="#64748b" stroke-width="1.5"/>
      </g>
      <g transform="translate(235, 115)">
        <rect width="16" height="16" rx="2" fill="none" stroke="#64748b" stroke-width="1.5"/>
        <rect x="3" y="3" width="10" height="10" rx="1" fill="none" stroke="#64748b" stroke-width="1.5"/>
      </g>
      <g transform="translate(235, 165)">
        <rect width="16" height="16" rx="2" fill="none" stroke="#64748b" stroke-width="1.5"/>
        <rect x="3" y="3" width="10" height="10" rx="1" fill="none" stroke="#64748b" stroke-width="1.5"/>
      </g>
    </g>

    <!-- Color palette/harmonies -->
    <g transform="translate(30, 300)">
      <text x="0" y="0" font-family="Arial, sans-serif" font-size="14" font-weight="600" fill="#475569">Color Harmonies</text>

      <!-- Complementary colors -->
      <rect x="0" y="15" width="50" height="50" rx="8" fill="#3b82f6"/>
      <rect x="60" y="15" width="50" height="50" rx="8" fill="#f59e0b"/>

      <!-- Triadic colors -->
      <rect x="120" y="15" width="50" height="50" rx="8" fill="#3b82f6"/>
      <rect x="180" y="15" width="50" height="50" rx="8" fill="#22c55e"/>
      <rect x="240" y="15" width="50" height="50" rx="8" fill="#ef4444"/>

      <!-- Analogous colors -->
      <rect x="300" y="15" width="50" height="50" rx="8" fill="#06b6d4"/>
      <rect x="360" y="15" width="50" height="50" rx="8" fill="#3b82f6"/>
      <rect x="420" y="15" width="50" height="50" rx="8" fill="#8b5cf6"/>
    </g>

    <!-- Gradient example -->
    <g transform="translate(30, 390)">
      <rect x="0" y="0" width="540" height="30" rx="8" fill="url(#palette-gradient)"/>
    </g>
  </g>

  <!-- Floating color swatches decoration -->
  <g opacity="0.7">
    <circle cx="80" cy="100" r="20" fill="#ef4444"/>
    <circle cx="720" cy="120" r="25" fill="#3b82f6"/>
    <circle cx="740" cy="480" r="18" fill="#22c55e"/>
    <circle cx="60" cy="520" r="22" fill="#a855f7"/>
    <circle cx="700" cy="300" r="16" fill="#f59e0b"/>
  </g>

  <!-- Decorative elements -->
  <g opacity="0.3">
    <!-- Pencil/brush icon -->
    <g transform="translate(650, 50)">
      <rect x="0" y="20" width="8" height="40" rx="2" fill="#64748b" transform="rotate(-45 4 40)"/>
      <path d="M 0 0 L 8 0 L 8 20 L 4 25 L 0 20 Z" fill="#94a3b8"/>
      <circle cx="4" cy="60" r="6" fill="#3b82f6" opacity="0.5"/>
    </g>

    <!-- Palette icon -->
    <g transform="translate(50, 450)">
      <ellipse cx="25" cy="25" rx="25" ry="22" fill="#cbd5e1"/>
      <circle cx="15" cy="15" r="4" fill="#ef4444"/>
      <circle cx="35" cy="15" r="4" fill="#3b82f6"/>
      <circle cx="15" cy="35" r="4" fill="#22c55e"/>
      <circle cx="35" cy="35" r="4" fill="#f59e0b"/>
      <ellipse cx="40" cy="20" rx="8" ry="12" fill="#f8fafc"/>
    </g>
  </g>

  <!-- Accessibility icon -->
  <g transform="translate(680, 520)" opacity="0.6">
    <circle cx="15" cy="15" r="15" fill="none" stroke="#64748b" stroke-width="2"/>
    <circle cx="15" cy="8" r="3" fill="#64748b"/>
    <path d="M 15 12 L 15 22 M 10 16 L 20 16" stroke="#64748b" stroke-width="2" stroke-linecap="round"/>
  </g>
</svg>
