Farbe Theory for Web Design: A Practical Guide
Farbe Theory for Web Design: A Practical Guide online kostenlos. Verarbeitet Daten sofort in Ihrem Browser. Kein Upload, keine Registrierung, vollständig privat.
Lokale VerarbeitungFarbe Theory for Web Design: A Practical Guide
Color Theory for Web Design — A Practical Guide
The Color Wheel
The color wheel arranges hues in a circle (0° red at top, going clockwise). Click anywhere on the wheel below to pick a base hue, then explore the harmony schemes.
Selected hue: 210° · #267fd9
Harmony Schemes
Complementary: Two colors directly opposite on the color wheel (180° apart). High contrast and vibrancy — use sparingly for accents, not for large body areas.
WCAG Contrast (Quick Reference)
Contrast ratio = (L₁ + 0.05) / (L₂ + 0.05), where L is relative luminance (0.2126·R + 0.7152·G + 0.0722·B with gamma correction). Higher is better; 1:1 = no contrast, 21:1 = max (black on white).
| Level | Text size | Min ratio |
|---|---|---|
| AA | Normal | 4.5:1 |
| AA | Large (≥ 18pt or 14pt bold) | 3.0:1 |
| AAA | Normal | 7.0:1 |
| AAA | Large | 4.5:1 |
| UI components | Graphical objects / borders | 3.0:1 |
Color Psychology (Quick Reference)
| Hue | Range | Traits | Common use |
|---|---|---|---|
| Red | 0–15°, 345–360° | Energy, urgency, passion, danger | CTA buttons, sale badges, error states |
| Orange | 15–45° | Warmth, enthusiasm, playfulness | Highlights, food, youth brands |
| Yellow | 45–70° | Optimism, attention, caution | Warnings, highlights, highlights |
| Green | 70–165° | Growth, calm, success, nature | Success states, eco, finance |
| Cyan | 165–195° | Clarity, communication, tech | Info, links, modern UI |
| Blue | 195–255° | Trust, stability, professionalism | Banks, SaaS, primary actions |
| Purple | 255–290° | Luxury, creativity, mystery | Premium, creative, spiritual |
| Magenta | 290–345° | Boldness, femininity, innovation | Fashion, beauty, gradients |
Verwendung
Geben Sie oben Ihre Eingabe ein. Das Ergebnis wird automatisch aktualisiert. Verwenden Sie die Schaltfläche „Kopieren“, um das Ergebnis zu kopieren.
Privatsphäre
Die gesamte Verarbeitung erfolgt in Ihrem Browser. Ihre Daten werden niemals auf einen Server hochgeladen.
FAQ
Ist dieser Farbe Theory for Web Design: A Practical Guide kostenlos?
Ja, vollständig kostenlos. Keine Registrierung erforderlich.
Lädt dieses Tool meine Daten hoch?
Nein. Die gesamte Verarbeitung erfolgt lokal in Ihrem Browser. Ihre Daten verlassen niemals Ihr Gerät.