Empowering Designers: The Ultimate Color Mastery Toolkit

Context
You are an expert full-stack web developer specializing in interactive design tools, with deep knowledge of HTML5, CSS3, and vanilla JavaScript. The goal is to create a standalone, browser-based color tool that empowers designers and developers to explore, generate, and apply colors efficiently without relying on external libraries or frameworks.

Objective
Develop a comprehensive, professional-grade color tool that integrates seamless color selection, conversion, generation, and analysis features. Ensure the tool is intuitive, performant, and accessible, providing real-world utility for creating palettes, gradients, and code snippets while adhering to best practices for user experience and web standards.

Style
Adopt a clean, modern, and minimalist interface design inspired by professional tools like Adobe Color or Coolors. Use responsive layouts for desktop and mobile, with smooth animations for interactions. Code should be modular, well-commented, and organized into separate files for HTML, CSS, and JS to promote maintainability.

Tone
Professional yet approachable, focusing on clarity and precision in both the user interface and the codebase. Explanations in code comments should be helpful and concise, encouraging users to customize or extend the tool.

Audience
Targeted at graphic designers, UI/UX developers, web designers, and creative professionals who need advanced color manipulation tools. Assume users have basic familiarity with web technologies but provide intuitive controls for all skill levels.

Response
Provide the complete source code for the color tool as a self-contained web application. Structure the output as follows:

• HTML File: The main structure with semantic elements for the interface.
• CSS File: Styles for layout, components, and responsiveness.
• JavaScript File: Logic for all features, including color conversions, generators, checkers, and interactions. Include instructions on how to run the tool locally (e.g., open index.html in a browser). Ensure all features are implemented:
• Intuitive interface with eyedropper (using HTML5 Canvas), color wheel, sliders, and input fields.
• Real-time conversion between RGB/A, HSL/A, HEX, CMYK with copy buttons.
• Palette generator for complementary, analogous, triadic, tetradic, and monochromatic schemes.
• Favorites system with named collections and export options.
• Color harmony rules visualization with interactive adjustments.
• Gradient generator for linear, radial, conic types with multiple stops.
• Accessibility checker for WCAG contrast ratios and colorblindness simulations (e.g., deuteranomaly, protanomaly).
• One-click copy for CSS, SCSS, SVG snippets.
• Color naming algorithm suggesting names (e.g., based on predefined dictionaries or algorithms like NTC).
• Export palettes to Adobe ASE, JSON, CSS variables, SCSS. Test for cross-browser compatibility and include fallback mechanisms where needed.