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 zur Laufzeit.
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 CSS-Variablen-Ansatz in Tailwind v4.
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 Webprojekte implementieren.
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 Paletten ohne JavaScript.
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. Mit praktischen Beispielen.
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(). Lernen Sie, welche Funktion Sie wann einsetzen und wie die Browser-Unterstützung aussieht.
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 und Designarbeit verwenden solltest.
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, Druckkorrekturfabläufe und häufige Fallstricke.
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 für Farbgenauigkeit.
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 unterstützen.
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.js-Farbskalen.
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 und Performance-Best-Practices.
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- und Dunkelmodus-Farben.
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 anzeigen können.
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 Farben vom Bildschirm zum Druck präzise halten.
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 moderne Webentwicklung.
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 und Tipps zum bewussten Regelbrechen.
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 CSS-Farbfunktionen abschneiden.
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. Token-Architektur und Implementierung in CSS und Tailwind.
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 Stylesheets an.
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 vermeiden sollten.
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 Konvertierung zwischen Formaten.
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.js-Farbalgorithen für prozedurale Ästhetik.
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. Nutzerdefinierbare Themes mit Farblaufzeitgenerierung erstellen.
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. Prozessfarben und die Grenzen der Pantone-zu-Hex-Umwandlung.
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 und farbenblindheitsfreundliche Muster.
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, während RGB und HSL versagen.
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 und automatisierte Prüfungen.
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 Dateien korrekt für jede Methode vorbereiten.
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. Vergleichen Sie Ergebnisse und lernen Sie, welchen Standard Sie fur barrierefreies Design verwenden sollten.
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 und barrierefreie Farbmuster.
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 und plattformübergreifende Ausgabe.
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 Farbnamen in Team-Design-Systemen.
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 konsistente Ergebnisse.
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 werden behandelt.
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 GPU-beschleunigst.
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 Bildschirm nutzen.
Aktualisiert Aug 31, 2025
Beschilderungsfarben für maximale Sichtbarkeit
Lerne die sichtbarsten Beschilderungsfarbkombinationen, Lesbarkeitsforschung auf Distanz, ADA-Anforderungen, LED-Besonderheiten und wie Materialien und Beleuchtung die Farbwahrnehmung beeinflussen.
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, Kombinationstests und Markenleitlinien.
Aktualisiert Aug 29, 2025