couleur Theory for web Design: A Practical Guide
couleur Theory for web Design: A Practical Guide en ligne gratuit. Traite les données instantanément dans votre navigateur. Sans téléversement, sans inscription, totalement privé.
Traitement localcouleur 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 |
Comment utiliser
Entrez votre contribution ci-dessus. Le résultat est mis à jour automatiquement. Utilisez le bouton Copier pour copier le résultat.
Confidentialité
Tout le traitement s'effectue dans votre navigateur. Vos données ne sont jamais téléchargées sur aucun serveur.
FAQ
Ce couleur Theory for web Design: A Practical Guide est-il gratuit ?
Oui, complètement gratuit. Aucune inscription requise.
Cet outil téléverse-t-il mes données ?
Non. Tout le traitement se fait localement dans votre navigateur. Vos données ne quittent jamais votre appareil.