Advanced Color Picker Tool

Baut ein Farbwerkzeug mit Konvertierung, Paletten-Generator und WCAG-Kontrastcheck.

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

Dieser Prompt erzeugt ein vollständiges Farbwerkzeug für Designer und Entwickler: Eyedropper, Farbrad, Slider und Eingabefelder für die Auswahl, Echtzeit-Konvertierung zwischen RGB, HSL, HEX und CMYK sowie einen Paletten-Generator für komplementäre, analoge, triadische und monochrome Schemata. Besonders wertvoll ist der integrierte WCAG-Accessibility-Check mit Kontrastwerten und Farbenblindheits-Simulation, den viele einfachere Farbtools nicht bieten. Dazu kommen ein Gradient-Generator und Ein-Klick-Export als CSS, SCSS oder SVG. Lohnt sich für alle, die ein eigenständiges Farbtool statt einer Browser-Extension bauen wollen und dabei Barrierefreiheit von Anfang an mitdenken.

Praxis-Tipp

Lassen Sie sich zusätzlich eine Export-Funktion als Tailwind-Config oder Design-Token-JSON ergänzen, damit die generierte Palette direkt im Projekt landet.

Siehe auch

• Accessibility Auditor

Lizenz & Quelle

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

Lade …