Violet
#7C6FF7
Active Color
0
🏆 Score
0/8
📚 Lessons
0
🎨 Palette Colors
0/12
🏅 Achievements
🎨 Color of the Day
⚡ Quick Contrast
#FFFFFF
#7C6FF7
Sample Text
—
🎲 Random Palette
💡 Color Theory Tip
📚 Your Learning Path
🎨 Curated Inspiration Palettes
Hand-crafted palettes — click any color to set it active, or load the whole palette
🖌️ Your Current Palette
Colors saved in this session
🏅 Achievements
Extra Tools:
🎯 Interactive Color Wheel
Click to pick · Scroll to zoom brightness
⚗️ Color Values
All representations of the selected color
🎛️ HSL Sliders
🧪 Color Mixer
Mix two colors and see the result
#FF6B6B
#4ECDC4
💾 Palette
Your saved colors — click to select, right-click to remove
🎨 Base Color
Choose a color to generate harmonies
Comp.
Analog.
Triadic
Tetrad.
Split
Square
Mono.
🌐 Harmony Wheel
Visual relationship on the color wheel
📖 Harmony Theory
🎭 Famous Designs & Their Harmony
Real-world color harmony examples from iconic brands and art
📐 The 60-30-10 Rule — Interactive Demo
See how the proportion rule changes a design's feel
👁️ Color Blindness Simulator
See how your colors appear to people with different types of color vision deficiency
📊 Vision Types Explained
🔬 Simulation Canvas
See a gradient affected by each type
🎨 Design Guide
📊 Statistics
✅ Checklist
🛡️ Safe Palettes
♿ WCAG Contrast Checker
Check color combination compliance with accessibility standards
Sample Text
—
Contrast Ratio
🔄 Swap & Quick Pick
📋 WCAG Guidelines
🎨 Text Samples
📚 Complete WCAG 2.1 Color Reference
Criteria
How To Fix
Tools & Tips
Real Examples
⚠️ Common Combinations That Fail WCAG
These combinations appear frequently in the wild but fail accessibility standards
⚡ APCA vs WCAG — Why the New Standard Matters
WCAG 2.1 uses a simple ratio. APCA (the WCAG 3.0 draft) is perceptual, directional, and font-aware.
WCAG 2.1 (current law)
✓ Simple ratio: brighter÷darker
✓ Legal standard today (ADA, EN 301 549)
✗ Treats dark-on-light = light-on-dark
✗ Ignores font size & weight
✗ Fails for mid-tone colors (gray on gray)
✗ White on yellow can "pass" even though it looks terrible
✓ Legal standard today (ADA, EN 301 549)
✗ Treats dark-on-light = light-on-dark
✗ Ignores font size & weight
✗ Fails for mid-tone colors (gray on gray)
✗ White on yellow can "pass" even though it looks terrible
APCA / WCAG 3.0 (future standard)
✓ Perceptual — matches how eyes actually work
✓ Directional: light-on-dark ≠ dark-on-light
✓ Font size & weight aware
✓ Fixes the mid-tone gray problem
✗ Not yet a legal requirement
✗ More complex to explain to clients
✓ Directional: light-on-dark ≠ dark-on-light
✓ Font size & weight aware
✓ Fixes the mid-tone gray problem
✗ Not yet a legal requirement
✗ More complex to explain to clients
Lc Scale — What the Numbers Mean
FailDecorativeDisplay (36px+)Large textBody textAny size
💡 Use both: APCA for real-world design decisions. WCAG 2.1 for legal compliance. When they disagree, APCA is usually more accurate to actual readability.
🔤 Typography Color Lab
Test text legibility with color combinations
8px16px72px
👁️ Live Preview
The quick brown fox
Color Theory Matters
Typography and color work together to create readable, beautiful design. The contrast between text and background is critical for accessibility and user experience.
Small text at 12px · A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
📚 Recommended Font Pairings
Fonts that work well together — click to apply
🎨 Color + Typography Psychology
📐 Readability Science
Research-backed rules for legible typography
🧠 Color + Emotion + Font Psychology
How combining color and type shapes reader perception
🌐 Web Font Loading Guide
Beginner to advanced — how to use fonts correctly on the web
🌐 Web Design
🖨️ Print
🏠 Interior
👗 Fashion
💼 Branding
🖥️ Web Color Tools
🖨️ Print Color Tools
📚 Color Theory Curriculum
Complete all 8 lessons to master color theory — each includes a quiz
📜 Timeline of Color
Key moments in color history and science
🌍 Cultural Color Meanings
The same color means different things across cultures
🎨 Famous Color Theories
🏆 Your Score: 0 pts
Play games to earn points and unlock achievements
🎓 Advanced Color Strategy
How professional designers approach color decisions
🌍 Cross-Cultural Color Intelligence
What your color communicates in different markets
🌈 Visible Spectrum
The electromagnetic spectrum of visible light
380nm (Violet)440nm (Blue)490nm (Cyan)530nm (Green)580nm (Yellow)625nm (Orange)700nm (Red)
📊 Palette Analysis
Breakdown of your current palette
🌡️ Color Temperature Scale
From warm (incandescent) to cool (daylight)
1,800K Candlelight3,200K Tungsten5,500K Daylight9,000K Blue Sky
⚖️ Color Balance Wheel
Warm vs. cool distribution in your palette
🔬 Color Space Deep Dive
How different color models map to human perception
📈 Color Trend Reference
Recurring color trends in design — Pantone Color of the Year and industry patterns
💻 Complete Code Export Hub
Export your palette to any platform or framework — web, mobile, or design tools.
Color Source
Variable / Class Prefix
🌐 Web
📱 Mobile
🎨 Design Tools
⚡ Quick Copy
🤖 AI Color Assistant
Rule-based color intelligence powered by color theory
🎨 Generated Palette
Select a mood to generate a palette
📖 Color Psychology Reference
Loading palettes...
⚙️ Setup Guide — Enable Live Community (5 min, free)
1️⃣
Create a free account at jsonbin.io — no credit card required.
2️⃣
Create a new bin with this initial content:
{"palettes":[]} — set it to Public.
3️⃣
Copy your 6641abc123def456789 and $2a$10$yourfullkeyhere from the jsonbin.io dashboard.
4️⃣
In the ChromaLab HTML file, find
COMMUNITY_CONFIG and fill in your BIN_ID and API_KEY. Save and redeploy.📬
Share Your Ideas
Got a feature idea or improvement in mind?
Every suggestion is read and considered for future ChromaLab Pro updates.