Advanced Color Picker Tool

Baut ein Allround-Farbtool mit Konvertierung, Paletten-Generator und WCAG-Accessibility-Check.

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).

So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT“ dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch.“

Im Detail

Prompt für ein umfangreiches Farbwerkzeug in reinem HTML/CSS/JS: Eyedropper, Farbrad, Slider und Direkteingabe als Auswahlmethoden, Echtzeit-Konvertierung zwischen RGB, HSL, HEX und CMYK, Paletten-Generator (komplementär, analog, triadisch, tetradisch, monochrom) samt Favoriten-Sammlungen, Gradient-Generator sowie ein WCAG-Kontrast- und Farbenblindheits-Check. Deckt damit einen Großteil dessen ab, was sonst separate Tools wie Coolors oder ein Eyedropper-Plugin je einzeln leisten. Für Designer und Frontend-Entwickler, die ein Offline-fähiges Allround-Farbtool ohne Cloud-Abo wollen — der Umfang bedeutet aber auch entsprechend viel Generierungs- und Testaufwand.

Praxis-Tipp

Lass dir das Tool in Etappen bauen — erst Farbwahl und Konvertierung, dann Paletten-Generator, zuletzt den Accessibility-Checker — sonst wird die generierte Codebasis auf einen Schlag unübersichtlich.

Siehe auch

• Accessibility Auditor

Lizenz & Quelle

• Lizenz: CC0-1.0 (Public Domain)
• Quelle: awesome-chatgpt-prompts (GitHub)

Lade …