ពណ៌ក្នុង Tailwind
Color System - ប្រព័ន្ធពណ៌ Tailwind
Tailwind ផ្តល់នូវ color palette ដ៏សម្បូរបែប ជាមួយ 10 shades (50-900) សម្រាប់ពណ៌នីមួយៗ ដើម្បីបង្កើត design system ដែល consistent និង accessible។
🎨 ហេតុអ្វីត្រូវការ 10 Shades?
| Shade Range | Lightness | Common Use Cases |
|---|---|---|
50-200 |
Very Light | Backgrounds, subtle highlights, hover states |
300-400 |
Light | Borders, disabled states, placeholders |
500-600 |
Medium (Default) | Primary colors, buttons, links |
700-800 |
Dark | Hover states, active states, headings |
900 |
Very Dark | Text on light backgrounds, emphasis |
📊 Tailwind Color Palette
Tailwind v3 មាន 22 color families:
| Color Family | Shades Available | UI/UX Purpose |
|---|---|---|
| Slate/Gray/Zinc/Neutral/Stone | 50-950 (11 shades) | Neutral colors for text, backgrounds, borders |
| Red | 50-950 | Errors, danger, delete actions |
| Orange | 50-950 | Warnings, attention |
| Amber/Yellow | 50-950 | Caution, highlights |
| Lime/Green/Emerald | 50-950 | Success, confirmation, positive actions |
| Teal/Cyan | 50-950 | Information, neutral positive |
| Sky/Blue/Indigo | 50-950 | Primary actions, links, trust |
| Violet/Purple/Fuchsia | 50-950 | Creative, premium, luxury |
| Pink/Rose | 50-950 | Romance, feminine, playful |
🎯 Color Naming Convention
Format: {property}-{color}-{shade}
| Property | Purpose | Example |
|---|---|---|
text- |
Text color | text-blue-500 |
bg- |
Background color | bg-red-100 |
border- |
Border color | border-gray-300 |
ring- |
Ring/outline color | ring-purple-500 |
shadow- |
Shadow color | shadow-blue-500/50 |
divide- |
Divider color | divide-gray-200 |
placeholder- |
Placeholder text | placeholder-gray-400 |
accent- |
Accent color (checkboxes) | accent-blue-600 |
caret- |
Text cursor color | caret-pink-500 |
🧠 Color Psychology in UI Design
| Color | Psychology | Best Use Cases | Avoid For |
|---|---|---|---|
| 🔴 Red | Urgency, passion, danger | Error messages, delete buttons, sales | Success messages, calming elements |
| 🟠 Orange | Energy, warmth, caution | Warnings, CTAs, creative brands | Corporate/professional sites |
| 🟡 Yellow | Optimism, attention, happiness | Highlights, notifications, sunshine themes | Text (poor readability) |
| 🟢 Green | Success, growth, nature | Success states, eco brands, go actions | Error states, warnings |
| 🔵 Blue | Trust, calm, professionalism | Primary buttons, corporate, social media | Food industry (suppresses appetite) |
| 🟣 Purple | Luxury, creativity, spirituality | Premium brands, creative apps | Masculine products, corporate |
| 🩷 Pink | Femininity, romance, playfulness | Beauty, fashion, dating apps | Serious business, masculine brands |
| ⚫ Black | Elegance, power, sophistication | Luxury brands, text, modern designs | Overly serious (can be depressing) |
| ⚪ White | Purity, simplicity, cleanliness | Backgrounds, minimalist designs | Main content (causes eye strain) |
| ⬜ Gray | Neutrality, balance, professionalism | Text, backgrounds, borders | Excitement, energy (too neutral) |
♿ Accessibility - Color Contrast
WCAG (Web Content Accessibility Guidelines) ត្រូវការ contrast ratios:
| WCAG Level | Normal Text | Large Text (18px+) | Use Case |
|---|---|---|---|
| AA (Minimum) | 4.5:1 | 3:1 | Most websites should meet this |
| AAA (Enhanced) | 7:1 | 4.5:1 | Ideal for accessibility |
✅ Good Contrast Combinations:
text-gray-900onbg-white(21:1 - Excellent)text-blue-600onbg-white(4.5:1 - AA)text-whiteonbg-blue-600(4.5:1 - AA)text-whiteonbg-gray-900(21:1 - AAA)
❌ Poor Contrast (Avoid):
text-yellow-400onbg-white(1.9:1 - Fails)text-gray-400onbg-white(2.8:1 - Fails)text-blue-400onbg-blue-600(2.3:1 - Fails)
Text និង Background Colors
🔤 Text Colors
Format: text-{color}-{shade}
| Class | CSS Equivalent | Common Use |
|---|---|---|
text-gray-900 |
color: #111827; |
Primary text (dark mode: use lighter shades) |
text-gray-600 |
color: #4b5563; |
Secondary text, descriptions |
text-gray-400 |
color: #9ca3af; |
Disabled text, placeholders |
text-blue-600 |
color: #2563eb; |
Links, primary actions |
text-red-600 |
color: #dc2626; |
Error messages |
text-green-600 |
color: #16a34a; |
Success messages |
text-white |
color: #ffffff; |
Text on dark backgrounds |
text-black |
color: #000000; |
Maximum contrast (use sparingly) |
🎨 Background Colors
Format: bg-{color}-{shade}
| Class | Best For | Pair With Text |
|---|---|---|
bg-white |
Main backgrounds | text-gray-900 |
bg-gray-50 |
Subtle backgrounds | text-gray-900 |
bg-gray-100 |
Cards, containers | text-gray-900 |
bg-blue-500 |
Primary buttons | text-white |
bg-blue-50 |
Info backgrounds | text-blue-900 |
bg-red-50 |
Error backgrounds | text-red-900 |
bg-green-50 |
Success backgrounds | text-green-900 |
bg-yellow-50 |
Warning backgrounds | text-yellow-900 |
🎯 Common UI Color Patterns
Alert/Notification Colors:
| Type | Background | Border | Text | Icon |
|---|---|---|---|---|
| Info | bg-blue-50 |
border-blue-200 |
text-blue-800 |
text-blue-600 |
| Success | bg-green-50 |
border-green-200 |
text-green-800 |
text-green-600 |
| Warning | bg-yellow-50 |
border-yellow-200 |
text-yellow-800 |
text-yellow-600 |
| Error | bg-red-50 |
border-red-200 |
text-red-800 |
text-red-600 |
Button Color States:
| State | Primary Button | Secondary Button |
|---|---|---|
| Default | bg-blue-600 |
bg-gray-200 |
| Hover | hover:bg-blue-700 |
hover:bg-gray-300 |
| Active | active:bg-blue-800 |
active:bg-gray-400 |
| Disabled | bg-gray-300 |
bg-gray-100 |
Opacity និង Gradients
💧 Color Opacity
Tailwind អនុញ្ញាតឲ្យប្រើ opacity modifiers ជាមួយពណ៌:
Syntax: {property}-{color}-{shade}/{opacity}
| Opacity Value | Percentage | Alpha Value | Use Case |
|---|---|---|---|
/0 |
0% | 0 | Completely transparent |
/5 |
5% | 0.05 | Very subtle overlay |
/10 |
10% | 0.1 | Subtle backgrounds |
/20 |
20% | 0.2 | Hover states |
/50 |
50% | 0.5 | Semi-transparent overlays |
/75 |
75% | 0.75 | Mostly opaque |
/100 |
100% | 1 | Fully opaque (default) |
Examples:
bg-blue-500/50- Blue background at 50% opacitytext-red-600/75- Red text at 75% opacityborder-gray-300/20- Gray border at 20% opacity
🌈 Gradient Backgrounds
Gradient Direction:
| Class | Direction | CSS Equivalent |
|---|---|---|
bg-gradient-to-r |
Left to Right → | to right |
bg-gradient-to-l |
Right to Left ← | to left |
bg-gradient-to-t |
Bottom to Top ↑ | to top |
bg-gradient-to-b |
Top to Bottom ↓ | to bottom |
bg-gradient-to-tr |
To Top Right ↗ | to top right |
bg-gradient-to-tl |
To Top Left ↖ | to top left |
bg-gradient-to-br |
To Bottom Right ↘ | to bottom right |
bg-gradient-to-bl |
To Bottom Left ↙ | to bottom left |
Gradient Color Stops:
| Property | Purpose | Example |
|---|---|---|
from-{color} |
Starting color | from-purple-500 |
via-{color} |
Middle color (optional) | via-pink-500 |
to-{color} |
Ending color | to-red-500 |
Popular Gradient Combinations:
<!-- 2-color gradient -->
<div class="bg-gradient-to-r from-cyan-500 to-blue-500">
Cyan to Blue
</div>
<!-- 3-color gradient -->
<div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500">
Purple → Pink → Red
</div>
<!-- Diagonal gradient -->
<div class="bg-gradient-to-br from-green-400 to-blue-500">
Green to Blue (diagonal)
</div>💡 Color Best Practices
| Do ✅ | Don't ❌ |
|---|---|
| Use gray-900 for primary text | Use pure black (#000) for text |
| Maintain 4.5:1 contrast ratio | Use low contrast (yellow on white) |
| Use 500-600 for primary actions | Use 50-200 for important buttons |
| Test with colorblind simulators | Rely only on color for meaning |
| Use semantic colors (red = error) | Use random colors without meaning |
| Limit to 2-3 primary colors | Use rainbow of colors everywhere |