Skip to main content
Prompts Professional HTML5 Color Tool Builder

developer coding user risk: low

Professional HTML5 Color Tool Builder

Build a professional-grade color tool using HTML5, CSS3, and JavaScript for designers and developers, with an intuitive interface featuring eyedropper, color wheel, sliders, input…

PROMPT 

Build a professional-grade color tool with HTML5, CSS3 and JavaScript for designers and developers. Create an intuitive interface with multiple selection methods including eyedropper, color wheel, sliders, and input fields. Implement real-time conversion between color formats (RGB, RGBA, HSL, HSLA, HEX, CMYK) with copy functionality. Add a color palette generator with options for complementary, analogous, triadic, tetradic, and monochromatic schemes. Include a favorites system with named collections and export options. Implement color harmony rules visualization with interactive adjustment. Create a gradient generator supporting linear, radial, and conic gradients with multiple color stops. Add an accessibility checker for WCAG compliance with contrast ratios and colorblindness simulation. Implement one-click copy for CSS, SCSS, and SVG code snippets. Include a color naming algorithm to suggest names for selected colors. Support exporting palettes to various formats (Adobe ASE, JSON, CSS variables, SCSS).

EXPECTED OUTPUT

Format
code

SUCCESS CRITERIA

  • Build intuitive interface with color selection methods
  • Implement real-time color format conversions with copy
  • Add palette generator with color schemes
  • Include favorites system with export
  • Implement color harmony visualization
  • Create gradient generator with types
  • Add accessibility checker for WCAG
  • Implement one-click copy for code snippets
  • Include color naming algorithm
  • Support palette exports to formats

FAILURE MODES

  • Extensive feature list may lead to incomplete implementation
  • No UI layout or responsiveness specs may result in poor intuitiveness
  • No testing or error handling instructions may cause bugs

CAVEATS

Missing context
  • UI framework or vanilla JS confirmation.
  • Responsiveness and browser compatibility requirements.
  • Output format (e.g., single HTML file, separate files, deployed app).
  • Performance or size constraints.
  • Exact WCAG levels for accessibility checker.
Ambiguities
  • 'Intuitive interface' is subjective and undefined.
  • Eyedropper implementation details unclear (e.g., browser permissions, canvas usage).
  • 'Color harmony rules visualization' lacks specifics on what to visualize.
  • Favorites system storage mechanism not specified (e.g., localStorage).

QUALITY

OVERALL
0.72
CLARITY
0.92
SPECIFICITY
0.88
REUSABILITY
0.25
COMPLETENESS
0.72

IMPROVEMENT SUGGESTIONS

  • Specify vanilla JS or a framework like React/Vue to guide implementation.
  • Add requirements for responsiveness (e.g., mobile-first design).
  • Define output structure (e.g., 'Provide a single, self-contained HTML file with embedded CSS/JS').
  • Include example UI layout or wireframe description.
  • Clarify storage and persistence (e.g., 'Use localStorage for favorites').

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER