UTILSBOX⚡ALLE WERKZEUGE54+
JSON.FORMATKomplette Suite zum Formatieren, Validieren, Minifizieren, Vergleichen und Konvertieren von JSON.//REGEX.TESTEREchtzeit-Regex-Tester, Spickzettel, Debugger und Ersetzungswerkzeug.//PDF.SUITEPDFs zusammenfügen, teilen, Text extrahieren, drehen und in Bilder umwandeln.//IMAGE.STUDIOBrowser-Bildeditor: Zuschneiden, Filter, Skalieren, WebP/PNG und Base64.//HTML.BEAUTIFYHTML-Code-Formatierer, Produktions-Minifier und Entity-Encoder.//CSS.MINIFYCSS-Code-Formatierer, Produktions-Minifier und CSS-zu-SCSS-Konverter.//SQL.FORMATTERSQL-Query-Formatierer, Dialekt-Übersetzer (Postgres/MySQL) und Minifier.//SVG.EXCALIDRAWInteraktiver Vektor-Editor mit Excalidraw und SVG-Formatierer.//TEXT.DIFFWortzähler, Lesezeitschätzung und visueller Text-Diff-Vergleich.//YAML.CONVERTBidirektionaler YAML- und JSON-Validator und Formatierer mit Syntaxprüfung.//XML.PARSERXML-Dokumentformatierer, Strukturinspektor und XML-zu-JSON-Konverter.//GRAPHQL.STUDIOGraphQL Query- & SDL-Formatierer, Minifier, AST-Feldsortierung und Validator.//BASE64.CODECBase64- und URL-Safe-Encoder/-Decoder mit vollständiger UTF-8-Unterstützung.//LOREM.IPSUMBlindtext-Generator für Mockups, Prototypen und UI-Tests.//PASSWORD.GENKryptografisch sicherer Passwort-Generator mit Entropie-Messung.//URL.STUDIO8-in-1 URL-Suite: Encoden, Decoden, Validieren, Parsen und Erstellen.//QR.STUDIOIndividueller QR-Code-Generator mit Logos, Farben, Verläufen und Formen.//ASCII.EXPLORERInteraktive ASCII 0-255 Tabelle, Alt-Tastencodes und CP437-Symbole.//KEYCODES.LIVELive-KeyboardEvent-Detektor und JavaScript-Tastencode-Spickzettel.//JWT.DEBUGGERJWT-Token-Decoder, Claims-Inspektor und Web-Crypto-Signaturprüfung.//BINARY.CODECBidirektionaler Text-zu-Binär-Konverter mit Matrix-Effekt und ASCII-Tabelle.//CHARTS.STUDIOInteraktiver Diagramm-Generator (Balken, Linien, Kuchen, Punkte) aus CSV.//UUID.V7Massen-Generator für UUID v4, zeitlich sortiertes v7, v1 und Validator.//CSV.JSONBidirektionaler CSV-zu-JSON-Konverter mit Trennzeichen und Tabellenansicht.//COLORS.STUDIOHEX/RGB/HSL/CMYK-Konverter, Farbharmonien und WCAG 2.1 Kontrastprüfer.//SEO.METASEO Meta-Tags, Open-Graph-Karten und Live-Vorschau für Google SERP.//SCHEMA.JSONLDSchema.org JSON-LD strukturierter Datengenerator für Google Rich Snippets.//SITEMAP.XMLStandard-XML-Sitemap-Generator (Protokoll 0.9) für Suchmaschinen.//ROBOTS.TXTRobots.txt-Generator, KI-Scraper-Blockierung und Live-URL-Regeltester.//FAKE.DATAGenerator für synthetische Testdaten: Export nach JSON, CSV, SQL und TypeScript.//CLOCK.WORLDEchtzeit-Weltzeituhr mit holografischem 3D-Globus und 174 Länderzeitzonen.//DATE.CALCTage zwischen Daten, genaues Alter, Arbeitstage, Unix-Timestamp und Cron-Parser.//CALC.SUITESuite von 56+ Online-Rechnern: Prozent, Hypothek, Kredit, MwSt, BMI und Gehalt.//JSON.FORMATKomplette Suite zum Formatieren, Validieren, Minifizieren, Vergleichen und Konvertieren von JSON.//REGEX.TESTEREchtzeit-Regex-Tester, Spickzettel, Debugger und Ersetzungswerkzeug.//PDF.SUITEPDFs zusammenfügen, teilen, Text extrahieren, drehen und in Bilder umwandeln.//IMAGE.STUDIOBrowser-Bildeditor: Zuschneiden, Filter, Skalieren, WebP/PNG und Base64.//HTML.BEAUTIFYHTML-Code-Formatierer, Produktions-Minifier und Entity-Encoder.//CSS.MINIFYCSS-Code-Formatierer, Produktions-Minifier und CSS-zu-SCSS-Konverter.//SQL.FORMATTERSQL-Query-Formatierer, Dialekt-Übersetzer (Postgres/MySQL) und Minifier.//SVG.EXCALIDRAWInteraktiver Vektor-Editor mit Excalidraw und SVG-Formatierer.//TEXT.DIFFWortzähler, Lesezeitschätzung und visueller Text-Diff-Vergleich.//YAML.CONVERTBidirektionaler YAML- und JSON-Validator und Formatierer mit Syntaxprüfung.//XML.PARSERXML-Dokumentformatierer, Strukturinspektor und XML-zu-JSON-Konverter.//GRAPHQL.STUDIOGraphQL Query- & SDL-Formatierer, Minifier, AST-Feldsortierung und Validator.//BASE64.CODECBase64- und URL-Safe-Encoder/-Decoder mit vollständiger UTF-8-Unterstützung.//LOREM.IPSUMBlindtext-Generator für Mockups, Prototypen und UI-Tests.//PASSWORD.GENKryptografisch sicherer Passwort-Generator mit Entropie-Messung.//URL.STUDIO8-in-1 URL-Suite: Encoden, Decoden, Validieren, Parsen und Erstellen.//QR.STUDIOIndividueller QR-Code-Generator mit Logos, Farben, Verläufen und Formen.//ASCII.EXPLORERInteraktive ASCII 0-255 Tabelle, Alt-Tastencodes und CP437-Symbole.//KEYCODES.LIVELive-KeyboardEvent-Detektor und JavaScript-Tastencode-Spickzettel.//JWT.DEBUGGERJWT-Token-Decoder, Claims-Inspektor und Web-Crypto-Signaturprüfung.//BINARY.CODECBidirektionaler Text-zu-Binär-Konverter mit Matrix-Effekt und ASCII-Tabelle.//CHARTS.STUDIOInteraktiver Diagramm-Generator (Balken, Linien, Kuchen, Punkte) aus CSV.//UUID.V7Massen-Generator für UUID v4, zeitlich sortiertes v7, v1 und Validator.//CSV.JSONBidirektionaler CSV-zu-JSON-Konverter mit Trennzeichen und Tabellenansicht.//COLORS.STUDIOHEX/RGB/HSL/CMYK-Konverter, Farbharmonien und WCAG 2.1 Kontrastprüfer.//SEO.METASEO Meta-Tags, Open-Graph-Karten und Live-Vorschau für Google SERP.//SCHEMA.JSONLDSchema.org JSON-LD strukturierter Datengenerator für Google Rich Snippets.//SITEMAP.XMLStandard-XML-Sitemap-Generator (Protokoll 0.9) für Suchmaschinen.//ROBOTS.TXTRobots.txt-Generator, KI-Scraper-Blockierung und Live-URL-Regeltester.//FAKE.DATAGenerator für synthetische Testdaten: Export nach JSON, CSV, SQL und TypeScript.//CLOCK.WORLDEchtzeit-Weltzeituhr mit holografischem 3D-Globus und 174 Länderzeitzonen.//DATE.CALCTage zwischen Daten, genaues Alter, Arbeitstage, Unix-Timestamp und Cron-Parser.//CALC.SUITESuite von 56+ Online-Rechnern: Prozent, Hypothek, Kredit, MwSt, BMI und Gehalt.//
MODUL 05 · DESIGN & PALETTEN

Color Studio & Harmonien

Farbstudio mit Echtzeit-Konvertierung von HEX, RGB, HSL, CMYK, WCAG 2.1 Kontrastprüfer und Farbharmonien.

Alpha: 100%
CYBERPUNK VORLAGEN:
HEX#00F6FF
RGBrgb(0, 246, 255)
RGBArgba(0, 246, 255, 1)
HSLhsl(182, 100%, 50%)
HSLAhsla(182, 100%, 50%, 1)
CMYKcmyk(100%, 4%, 0%, 0%)

FARBHARMONIEN

KOMPLEMENTÄR (180°)
ANALOG (±30°)
TRIADISCH (120°)
TETRADISCH (90°)
HELLIGKEITSSKALA (15% - 90%)

WCAG 2.1 KONTRAST-VALIDATOR

AUF WEISSEM HINTERGRUND (#FFFFFF)
1.34:1
Aa Text Preview Sample
AA Normal FAILAAA Normal FAIL
AUF DUNKLEM HINTERGRUND (#0E0C1A)
14.39:1
Aa Text Preview Sample
AA Normal PASSAAA Normal PASS

Vollständiger Leitfaden: Farbräume und Web-Barrierefreiheit

1. Was sind Farbräume (HEX, RGB, HSL, CMYK)?

RGB/HEX für Bildschirme, HSL für intuitive Wahrnehmung und CMYK für den Druck.

2. WCAG 2.1 Barrierefreiheit und Kontrastverhältnisse

WCAG fordert mindestens 4.5:1 für normalen Text (AA) und 7:1 für AAA.

3. Farbharmonien

Geometrische Beziehungen im 360°-Farbkreis für harmonische Farbpaletten.

4. Modernes CSS: OKLCH und color-mix()

OKLCH bietet wahrnehmungsgetreue Helligkeit für gleichmäßige Farbverläufe.

Häufig gestellte Fragen (FAQs)

Warum HSL in CSS verwenden?

Erleichtert Themes durch einfache Anpassung der Helligkeit bei gleichem Farbton.

Wie wird das Kontrastverhältnis berechnet?

Durch Division der relativen Helligkeiten (L1 + 0.05) / (L2 + 0.05) laut W3C.

VERWANDTE DESIGN-WERKZEUGE:

CSS Formatter & Minifier →SVG Studio & Excalidraw →Image Editor & Converter →