Tutorials
Step-by-step tutorials applying color science concepts to real-world design and development tasks.
Farbige OG-Images mit Next.js und Satori generieren
Generiere dynamische Open-Graph-Images mit Next.js und Satori. Erstelle farbbewusste OG-Templates mit Farbverläufen, Markenfarben und responsiven Designs.
Aktualisiert Feb 24, 2026
CSS Custom Properties für dynamische Farbsysteme
Lernen Sie, wie Sie wartbare, anpassbare Farbsysteme mit CSS Custom Properties erstellen. Behandelt Variablen, Hell-/Dunkel-Modi und JavaScript-Farbänderungen
Aktualisiert Feb 18, 2026
Tailwind-CSS-Farben: Vollständiger Leitfaden zum Schattierungssystem
Meistere das Farbsystem von Tailwind CSS: die Standardpalette, die 50-950-Schattierungskonvention, benutzerdefinierte Farben in der Konfiguration und der neue
Aktualisiert Feb 11, 2026
Dark Mode implementieren: Ein vollständiger Entwicklerleitfaden
Erfahren Sie, wie Sie Dark Mode mit CSS Custom Properties, prefers-color-scheme, JavaScript-Umschaltern und geeigneten Farbadaptionsstrategien für beliebige
Aktualisiert Feb 04, 2026
Einen Farbwähler als Web Component von Grund auf bauen
Baue einen barrierefreien Farbwähler als Web Component. Implementiere Canvas-Rendering, Farbton-Schieberegler, Alpha-Kanäle und Custom Events mit Shadow DOM.
Aktualisiert Feb 02, 2026
CSS color-mix(): Farben nativ im Browser mischen
Lernen Sie CSS color-mix() zum nativen Mischen von Farben im Browser. Meistern Sie Syntax, Farbräume, praktische Anwendungsfälle und erstellen Sie dynamische
Aktualisiert Jan 31, 2026
Farbgamut erklärt: sRGB, P3 und Rec. 2020
Farbgamuts verstehen — sRGB, Display P3 und Rec. 2020 — und CSS-Weitgamut-Farben mit @media (color-gamut) für moderne Displays einsetzen.
Aktualisiert Jan 28, 2026
CSS-Farbfunktionen: rgb(), hsl(), oklch() im Vergleich
Vergleich aller CSS-Farbfunktionen: rgb(), rgba(), hsl(), hsla(), lab(), lch(), oklch() und color-mix().
Aktualisiert Jan 22, 2026
Perzeptuelle Farbräume: Lab, LCH, Oklab, OKLCH
Erkunde perzeptuell gleichmäßige Farbräume – CIE Lab, LCH, Oklab und OKLCH. Lerne, wie jeder konzipiert wurde, wo er glänzt und welchen du für CSS
Aktualisiert Jan 22, 2026
Figma Auto-Layout-Komponenten mit Farb-Tokens
Baue Figma-Auto-Layout-Komponenten mit Farb-Token-Architektur. Lerne Variable Binding, responsive Tokens, Theme-Varianten und Developer Handoff.
Aktualisiert Jan 15, 2026
Farbproofing: Druckfarben präzise sicherstellen
Lernen Sie Softproofing, Hardproofing und Pressenzugproof-Techniken, um eine genaue Farbwiedergabe vom Bildschirm bis zur endgültigen Ausgabe zu gewährleisten.
Aktualisiert Jan 13, 2026
CMYK für Webdesigner: Wenn Druck auf Bildschirm trifft
Webdesigner, die an Druckprojekten arbeiten, müssen CMYK verstehen. Lerne Gamut-Unterschiede, sichere RGB-zu-CMYK-Konvertierungsstrategien
Aktualisiert Jan 12, 2026
Wie Papier Farbe beeinflusst: Substrat und Druckqualität
Verstehe, wie Papiertyp, Beschichtung und Gewicht gedruckte Farbe beeinflussen. Lerne die Unterschiede zwischen gestrichenem, ungestrichenem und Spezialpapier
Aktualisiert Jan 09, 2026
Folienprägung und metallische Farben im Printdesign
Lernen Sie mehr über Folienprägungstechniken, Metalltintenoptionen, Gold- und Silberfolienauswahl sowie Designüberlegungen für hochwertiges Druckmaterial.
Aktualisiert Jan 08, 2026
Multi-Brand-Farbarchitektur: Eine Codebasis, viele Themes
Multi-Brand-Farbarchitektur mit CSS Custom Properties und Design Tokens aufbauen. White-Label-Theming aus einer einzigen Codebasis mit Tailwind-Integration
Aktualisiert Jan 06, 2026
Farbe in 3D und WebGL: Linearer Farbraum und PBR
Farbe in 3D-Rendering verstehen — sRGB vs. lineares RGB, Gammakorrektur, PBR-Farben, Three.js-Farbmanagement und HDR im Web-3D.
Aktualisiert Jan 02, 2026
Farbe für Data Storytelling: Über Standard-Diagrammfarben hinaus
Data Storytelling jenseits der Standard-Diagrammfarben. Sequenzielle, divergierende und kategoriale Paletten, Barrierefreiheit in der Datenviz und D3/Chart.
Aktualisiert Dez 29, 2025
Farbanimationen in CSS: Übergänge und Keyframes
CSS-Farbanimationen meistern mit Übergängen, Keyframe-Animationen, HSL-Farbtonrotation, OKLCH-Interpolation für wahrnehmungsnahe Glattheit
Aktualisiert Dez 26, 2025
CSS light-dark()-Funktion: Natives Theme-Switching
Nutzen Sie CSS light-dark() für natives Theme-Switching. Ersetzen Sie JavaScript-Toggles und Media Queries durch eine einzige CSS-Funktion für Hell
Aktualisiert Dez 24, 2025
Das RGB-Farbmodell: Wie Bildschirme Farbe anzeigen
Wie das RGB-Farbmodell funktioniert – Rot-, Grün- und Blaulichtmischung, der 0-255-Bereich, die CSS-rgb()-Funktion und warum Bildschirme 16,7 Millionen Farben
Aktualisiert Dez 20, 2025
Farbmanagement-Workflow: Vom Bildschirm zum Druck
Meistern Sie Farbmanagement von der Monitorkalibrierung bis zum Druckproofing. Erfahren Sie, wie ICC-Profile, Softproof und ein konsistenter Workflow die
Aktualisiert Dez 14, 2025
Ein Farbsystem für Ihr Design-System aufbauen
Bauen Sie eine systematische Farbarchitektur für Ihr Design-System auf – mit Namenskonventionen, Farbtonskalen, semantischen Tokens und Implementierungsmustern.
Aktualisiert Dez 09, 2025
Entwurf einer Farb-API: REST-Endpunkte für Farbdaten
RESTful Farb-API mit Endpunkten für Farbkonvertierung, Suche, Kontrastprüfung und Palettengenerierung entwerfen. Schema-Design und Best Practices lernen.
Aktualisiert Dez 06, 2025
SVG-Farbtechniken: Fill, Stroke und Gradienten
Meistere SVG-Farbtechniken: Fill- und Stroke-Attribute, lineare und radiale Gradienten, das currentColor-Schlüsselwort und CSS-basiertes SVG-Styling für
Aktualisiert Nov 29, 2025
Die 60-30-10-Regel: Farbproportionen im Design
Meistern Sie die 60-30-10-Farbregel im Design. Erfahren Sie, wie Dominant-, Sekundär- und Akzentfarben zusammenwirken – mit konkreten Beispielen, Hex-Codes
Aktualisiert Nov 24, 2025
Farbtrennung erklärt: Dateien für den Druck vorbereiten
Verstehen Sie CMYK-Farbtrennung, Sonderfarbplatten, Trapping und Passermarken. Bereiten Sie druckfertige Dateien mit korrekten Farbtrennungen vor.
Aktualisiert Nov 21, 2025
HSL vs. HSV: Welches Farbmodell sollten Sie verwenden?
Verstehen Sie den Unterschied zwischen HSL und HSV, wann jedes Modell für Webentwicklung oder Farbwähler geeignet ist und wie beide im Vergleich zu
Aktualisiert Nov 19, 2025
Semantische Farbsysteme: Farben nach Zweck, nicht nach Farbton benennen
Baue semantische Farbsysteme auf, die Farben nach Zweck (Erfolg, Warnung, Fehler) statt nach Farbton benennen.
Aktualisiert Nov 14, 2025
CSS Relative Color Syntax: Farben dynamisch transformieren
Meistern Sie die CSS Relative Color Syntax, um Farben dynamisch zu transformieren. Passen Sie Farbton, Sättigung, Helligkeit und Alphakanäle direkt in Ihren
Aktualisiert Nov 10, 2025
Design für den Hochkontrastmodus: Windows, macOS und Web
Gestalten Sie für den Hochkontrastmodus auf Windows, macOS und im Web. CSS forced-colors, Systemfarb-Keywords, Teststrategien und häufige Fehler, die Sie
Aktualisiert Nov 06, 2025
Hex-Farbcodes verstehen: Der vollständige Leitfaden
Verstehen Sie Hex-Farbcodes von Grund auf. Lernen Sie, was #RRGGBB bedeutet, wie Sie jeden Hex-Wert lesen, Kurzschreibweise, Alpha-Transparenz und die
Aktualisiert Okt 29, 2025
Farbe in der generativen Kunst: Algorithmen für schöne Paletten
Erstellen Sie schöne Farbe in generativer Kunst mit HSL-Spiralen, rauschbasierten Paletten, Goldener-Schnitt-Sampling und p5.
Aktualisiert Okt 26, 2025
Dynamisches Farb-Theming in React: Jenseits von CSS-Variablen
Dynamisches Farb-Theming in React mit CSS-Variablen, Context-Providern und Tailwind CSS implementieren.
Aktualisiert Okt 23, 2025
Das Pantone Matching System erklärt: Ein Leitfaden für Designer
Lerne, wie das Pantone Matching System funktioniert, den Unterschied zwischen beschichteten und unbeschichteten Büchern, Sonder- vs.
Aktualisiert Okt 19, 2025
Barrierefreiheit jenseits des Kontrasts: Farbe im inklusiven Design
Barrierefreiheit bei Farben geht über Kontrastverhältnisse hinaus. Lernen Sie WCAGs Prinzip 'nicht nur durch Farbe', Fokus-Indikatoren, Fehlerzustände
Aktualisiert Okt 17, 2025
Siebdruckfarben: Ein Leitfaden für Designer
Meistere Siebdruckfarbtechniken einschließlich Farbtrennung, Rastertechniken, Volltonfarbtinten und Designvorbereitung für siebgedruckte Materialien.
Aktualisiert Okt 14, 2025
Farbinterpolation in CSS: Warum OKLCH gewinnt
CSS-Farbinterpolation bestimmt, wie Verläufe und color-mix() Farben mischen. Erfahren Sie, warum OKLCH lebhafte, perceptuell gleichmäßige Ergebnisse liefert
Aktualisiert Okt 12, 2025
Checkliste zur Farbbarrierefreiheit für Webentwickler
Eine vollständige Checkliste zur Farbbarrierefreiheit für Webentwickler: WCAG-Kontrastverhältnisse, farballeinige Darstellung, Fokus-Indikatoren, Testtools
Aktualisiert Okt 07, 2025
JavaScript-Farbmanipulation: Bibliotheken und Techniken
JavaScript-Farbmanipulation meistern mit chroma.js, culori und tinycolor2. Farben programmatisch parsen, transformieren und generieren für Web-Anwendungen.
Aktualisiert Okt 02, 2025
Farbe in Web-Animationen: GSAP, Framer Motion und CSS
Meistern Sie Farbanimationen mit CSS-Übergängen, GSAP und Framer Motion. Lernen Sie OKLCH-Interpolation, Keyframe-Techniken und Performance-Optimierung.
Aktualisiert Sep 29, 2025
Sonderfarben vs. Prozessfarben: Druckfarben-Leitfaden
Verstehen Sie den Unterschied zwischen Sonderfarben und CMYK-Prozessfarben, wann Sie welche einsetzen, wie sie sich auf Druckkosten auswirken und wie Sie
Aktualisiert Sep 27, 2025
Farbkontrast-Algorithmen: WCAG 2 vs. APCA
Verstehen Sie, wie WCAG 2 relative Luminanz und APCA (Advanced Perceptual Contrast Algorithm) Kontrast berechnen.
Aktualisiert Sep 25, 2025
SwiftUI-Farbsystem: Adaptive Farbpaletten erstellen
Erstelle adaptive Farbpaletten in SwiftUI. Lerne den Unterschied zwischen Color und UIColor, Asset-Catalog-Farben, dynamische Dunkelmodus-Farben
Aktualisiert Sep 19, 2025
Design Tokens für Farbe: Von Figma zum Code
Implementieren Sie Farb-Design-Tokens von Figma bis in den Produktionscode mit Style Dictionary. Lernen Sie Token-Benennung, Transformation
Aktualisiert Sep 12, 2025
Farb-Namenskonventionen in CSS und Design-Systemen
Erkunden Sie CSS-Farbnamen, semantische Benennung mit benutzerdefinierten Eigenschaften, Tailwind-Skalennamen und Best Practices für die Verwaltung von
Aktualisiert Sep 06, 2025
Farbe im E-Mail-Design: Was über alle Clients hinweg funktioniert
Meistern Sie E-Mail-Farbdesign für Outlook, Gmail und Apple Mail. Lernen Sie sichere Strategien, Dark-Mode-Korrekturen und Inline-Style-Anforderungen für
Aktualisiert Sep 05, 2025
Farb-Theming in React: CSS-Variablen und Context
Skalierbares Farb-Theming in React mit CSS-Custom-Properties und der Context-API aufbauen. Themenarchitektur, Tailwind-CSS-Themes und Multi-Brand-Strategien
Aktualisiert Sep 03, 2025
Web-Farb-Performance: Verläufe, Schatten und Filter
Optimiere die Web-Farb-Performance. Lerne, wie Verläufe, Box-Schatten, CSS-Filter und Backdrop-Filter die Renderingleistung beeinflussen und wie du sie
Aktualisiert Sep 01, 2025
Responsives Farbdesign: Farben für verschiedene Bildschirme anpassen
Wie Farben auf verschiedenen Displays, Farbräumen und im Dark Mode variieren. CSS-Media-Queries und Custom Properties für responsive Farbsysteme auf jedem
Aktualisiert Aug 31, 2025
Beschilderungsfarben für maximale Sichtbarkeit
Lerne die sichtbarsten Beschilderungsfarbkombinationen, Lesbarkeitsforschung auf Distanz, ADA-Anforderungen, LED-Besonderheiten und wie Materialien
Aktualisiert Aug 30, 2025
Markenfarben wählen: Eine Schritt-für-Schritt-Anleitung
Eine Schritt-für-Schritt-Anleitung zur Wahl von Markenfarben, die bei deiner Zielgruppe ankommen. Behandelt Recherche, Branchenanalyse, Farbpsychologie
Aktualisiert Aug 29, 2025