Chromoforge
Farbwerkzeuge
Beginne mit einer Farbe oder einem Bild. Erzeuge Abstufungen, prüfe ein Kontrastpaar und exportiere Farben für dein Projekt.
Werkzeug verwenden
PaletteBeginne mit einer Farbe oder einem Bild. Erzeuge Abstufungen, prüfe ein Kontrastpaar und exportiere Farben für dein Projekt.Bildfarben-ExtraktorExtrahiere dominante Farben aus PNG-, JPG- oder WebP-Bildern lokal im Browser und erstelle exportierbare Paletten.Farbschattierungen GeneratorGeneriere eine 50-950 Skala aus einer Basisfarbe für UI Flächen, Borders, Hover und Dark Mode.WCAG-KontrastprüferPrüfe Text- und Hintergrundkontraste nach WCAG AA und AAA, teste echte Farbpaare und wähle lesbare Kombinationen.
Praktische Anleitungen
Zugängliche FarbpaletteGeneriere eine Palette im Haupttool und prüfe die vorgesehenen Text-Hintergrund-Paare.Brand Farbpalette GeneratorErstelle eine Markenpalette aus Logo oder Primary Farbe und exportiere CSS Variablen und Design Tokens.Chart Farbpalette GeneratorGeneriere unterscheidbare Chart Farben für Dashboards und Datenvisualisierung mit Kontrastcheck.Farbenblindheit SimulatorPrüfe Paletten für Deuteranopie, Protanopie und Tritanopie, bevor riskante Kombinationen live gehen.Farbkonverter HEX, RGB, HSL und OKLCHGib HEX, RGB oder HSL im Haupttool ein und kopiere HEX-, RGB-, HSL- und OKLCH-Werte aus dem Inspector.Farbharmonie GeneratorGeneriere komplementäre, analoge, triadische, split, tetradische und monochromatische Farbharmonien.Farbpaletten-GeneratorGeneriere harmonische Farbpaletten aus einer Basisfarbe mit komplementären, analogen, triadischen und monochromatischen Regeln.Farblehre-GuideLerne Farbharmonie, WCAG-Kontrast und praktische Palettenentscheidungen für lesbare, konsistente Weboberflächen.CSS-Farbvariablen-GeneratorGeneriere CSS-Variablen und Design Tokens aus einer Farbpalette, kopiere den :root-Block und halte Themes konsistent.Dark Mode Farbpalette GeneratorErstelle Dark Mode Paletten mit lesbarem Text, Muted Flächen, Borders und zugänglichen Akzenten.Design-Token-GeneratorErstelle Farb Design Tokens aus einer Palette und exportiere CSS Variablen, SCSS Maps, JSON und Tailwind Werte.CSS-VerlaufsgeneratorErstelle lineare, radiale und konische CSS-Verläufe aus einer Palette, kopiere den Code und prüfe saubere Farbübergänge.Anleitung zur shadcn-Theme-ZuordnungGeneriere eine Palette im Haupttool und ordne ihre Farben anschließend manuell den semantischen Variablen deines shadcn-Projekts zu.Tailwind-FarbgeneratorGeneriere im Haupttool eine Skala mit 11 Nuancen von 50 bis 950 und exportiere eine Tailwind-v3-Konfiguration..Website Farbschema GeneratorErstelle ein Website Farbschema mit Primary, Neutral und Accent Farben für Hero, Buttons, Cards und Formulare.