Färguider
Ingen teoriläxa – varje guide är en följbar väg: välj, balansera, verifiera. Alla steg länkar direkt till verktygen och verkliga paletter på denna webbplats.
15 guides · 75 sections · ~52 min readBilingual (English/中文)
Color Theory
Color wheel, harmony rules and temperature — the foundation of every palette decision
Color Theory Basics: The Wheel, HSL and How Your Eyes See Color
From Newton's 1666 prism experiments to every hex value on your screen — a complete walkthrough of hue, saturation and lightness, plus why additive and subtractive mixing determine what you actually see. After this guide, every parameter on a color picker makes sense.
Läs guiden6 sections · 4 minSix Color Harmony Rules: Complementary, Analogous, Triadic and Real-World Trade-offs
Monochromatic, analogous, complementary, split-complementary, triadic, tetradic — six harmony rules are six trade-offs between visual tension and safety, not six dead formulas. This guide breaks down each rule's sweet spot with real UI scenarios and introduces OKLCH perceptual harmonization as the modern method.
Läs guiden6 sections · 4 minColor Temperature: How Warm and Cool Shape Mood and Behavior
Why do 6500K daylight white and 3000K warm amber feel completely different? Temperature isn't physical — it's psychological. This guide covers the Kelvin scale, the psychology of warm and cool families, and the "warm on cool" balancing formula as applied in UI and branding.
Läs guiden6 sections · 4 minPractice
Ready-to-apply recipes: ratio rules, brand color, UI semantics and dark mode
The 60-30-10 Color Rule: The Universal Balance Formula and Its Variants
Imported from interior design, 60-30-10 is the most cited color formula — and more people crash applying it blindly than succeed. This guide unpacks the visual-weight principle behind the ratios, maps the roles onto UI, and covers the 70-20-10 and monochrome variants that actually ship.
Läs guiden5 sections · 3 minHow to Choose a Brand Primary: From Strategy to Scale
A brand color isn't "a color we like" — it's an asset decision that must answer positioning, differentiation, consistency and accessibility. This guide gives a repeatable process: industry color mapping, HSL-parameterized selection, 50-900 scale construction, competitor avoidance and accessibility pre-checks.
Läs guiden5 sections · 4 minUI Semantic Colors: Engineering success / warning / danger as a System
Green means success, amber means warning, red means danger — but why does your success green glare in dark mode, and why does warning yellow vanish in tables? This guide treats the four semantic roles as engineered systems: role contracts, contrast floors, dark-mode variants and token-based delivery.
Läs guiden5 sections · 3 minGradient Design: CSS Syntax to Killing the Gray Band
Gradients are the cheapest source of sophistication and the easiest place to crash — muddy midpoints, fluorescent transitions, fighting stops. This guide covers linear/radial/conic syntax, stop strategy, OKLCH no-band interpolation, and 47 curated gradients as working references.
Läs guiden5 sections · 3 minDark Mode Palettes: Pure-Black Traps, Surface Elevation and Safer Accents
Dark mode is not an inverted light theme — pure-black bases, fluorescent primaries and dead shadows are the three classic crashes. This guide gives the surface elevation model (0B1220 → 334155), the desaturation recipe for accents, shadow replacements, and a verifiable end-to-end workflow.
Läs guiden5 sections · 3 minAccessibility
WCAG / APCA contrast and color-blind-safe palettes
Accessible Palettes 101: WCAG, APCA and Color-Blind Safety as Three Lines of Defense
Roughly 8% of men have color-vision deficiency and low-vision users are more common than you think — accessibility is coverage, not compliance overhead. This guide builds three lines of defense: WCAG contrast (the legal floor), APCA perceptual contrast (the experience upgrade) and color-blind safety (covering 8% of users).
Läs guiden5 sections · 4 minContrast in Practice: AA/AAA Thresholds and Text Hierarchy Design
Contrast is accessibility's core metric, yet the 4.5:1 vs 3:1 boundaries, the exact large-text definition and the scope of non-text components are widely misread. This handbook unpacks real combinations tier by tier and gives a strategy for the three text tiers (heading/body/muted).
Läs guiden5 sections · 3 minIndustry
Dataviz, marketing psychology and print discipline
Data Visualization Colors: Qualitative, Sequential and Diverging Discipline
Wrong chart colors silently distort information — qualitative palettes on ordered data, red-green pairs that fail for 8% of readers, more than eight series and the legend becomes guesswork. This guide maps palette type to data type and recommends validated academic color-blind-safe sets you can adopt directly.
Läs guiden5 sections · 3 minColor Psychology in Marketing: Industry Codes, Cultural Gaps and Conversion Practice
"Blue buttons convert better" is the most circulated and most misread color finding — color shapes mood baselines and brand memory, not click-through. This guide separates replicated evidence from marketing myth, maps industry color codes, and lists cross-cultural pitfalls.
Läs guiden4 sections · 3 minPrint vs Digital: CMYK Gamut, Spot Colors and Proofing Workflow
The design looks great and the print looks gray — that's not the printer's fault, it's the physical gap between additive RGB and subtractive CMYK. This guide unpacks gamut math, the correct use of Pantone spot colors, and the proofing chain from design to delivery.
Läs guiden4 sections · 3 minCraft
Naming systems, color of the year and trend literacy
Color Naming Systems: From CSS Names to Chinese Traditional Colors
Why is tomato red and sienna brown? Why does "moon white" point at a specific color? Naming colors is humanity's historical project of carving semantic grids onto a continuous space — this guide unpacks the CSS 148, the xkcd survey, ISCC-NBS and Chinese traditional color systems.
Läs guiden5 sections · 4 minColor of the Year: The Pantone Mechanism and the Right Way to Use Trends
From 2000's Cerulean Blue to 2025's Mocha Mousse — Pantone's Color of the Year has run for 25+ years. Does it predict trends or manufacture them? This guide unpacks the mechanism, the last decade's list, and three disciplines for using trend colors without wrecking your brand system.
Läs guiden4 sections · 4 minSkriven utifrån offentlig färgvetsenskaplig konsensus; alla verktygslänkar fungerar direkt.