💻 Programmierung & Entwicklung

Advanced Color Picker Tool

📁 Programmierung & Entwicklung 👤 Beigetragen von @f 🗓️ Aktualisiert
Der 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).

Beispiel-Ausgaben

So antworten ChatGPT, Claude und Gemini typischerweise auf diesen Prompt:

🚀 ChatGPT

I'll create a comprehensive color picker tool for you! The interface will feature a color wheel with RGB/HSL sliders, eyedropper functionality, and real-time format conversion. I'll implement the palette generator with all five harmony schemes, a favorites system with local storage, WCAG contrast checker with AAA/AA ratings, and a gradient builder with visual preview. The export functionality will include ASE, JSON, CSS variables, and code snippets with one-click copying. Would you like me to start with the HTML structure and core color conversion functions?

✨ Claude

I can help you build this color tool, though I should note some limitations: I can't create an actual eyedropper (requires browser APIs you'd need to implement), and ASE export requires binary file handling that's complex in pure JavaScript. That said, I'll create a fully functional tool with the color wheel, sliders, format conversions, harmony generators, gradient builder, and WCAG checker. The accessibility features and code export will be particularly robust. Should I proceed with a modular architecture that separates the color engine from the UI components?

💎 Gemini

I'll generate a complete color picker application with the requested features. The implementation will use the Canvas API for the color wheel, Web Storage API for favorites, and the Clipboard API for copy functionality. For WCAG compliance checking, I'll calculate contrast ratios per WCAG 2.1 guidelines (minimum 4.5:1 for normal text, 3:1 for large text). The color naming will use a nearest-neighbor algorithm against a database of ~1000 named colors. Note that ASE export requires ArrayBuffer manipulation for Adobe's binary format. Here's the implementation starting with the core ColorConverter class.

So nutzt du diesen Prompt

Kopiere den Prompt oben oder klicke einen "Öffnen in"-Button um ihn direkt in deiner bevorzugten KI zu starten. Du kannst den Text dann an deinen Anwendungsfall anpassen — z.B. Platzhalter wie [dein Thema] durch echten Kontext ersetzen.

Welches KI-Modell funktioniert am besten

Claude Opus 4 und Sonnet 4.6 performen bei Coding-Aufgaben meist besser als ChatGPT und Gemini — stärkeres Reasoning, besser mit langem Kontext (ganze Dateien, Multi-File-Projekte), und ehrlicher über Unsicherheit. ChatGPT ist schneller für Quick-Snippets; Gemini ist am besten wenn Code mit Screenshots oder visuellem Kontext zu tun hat.

Diesen Prompt anpassen

Tausche die im Prompt erwähnte Sprache (Python, JavaScript, etc.) gegen deinen Stack. Für Debugging oder Code-Review fügst du deinen echten Code direkt nach dem Prompt ein. Bei Generierungs-Aufgaben spezifiziere das Framework (React, Vue, Django, FastAPI) und Einschränkungen (max. Zeilen, keine externen Libraries, muss async sein).

Typische Anwendungsfälle

  • Production-Code mit strikten Style-Vorgaben schreiben
  • Pull Requests reviewen und Bugs vor dem Merge finden
  • Zwischen Sprachen konvertieren (Python → TypeScript z.B.)
  • Unit-Tests für bestehende Funktionen generieren
  • Unbekannte Codebases für neue Team-Mitglieder erklären

Variationen

Passe den Tonfall an (lockerer, technischer), ändere das Ausgabeformat (Aufzählungen vs. Absätze) oder füge Einschränkungen hinzu (Wortlimits, Zielgruppe).

Verwandte Prompts