වෙබ් ඩිසයින් කරන කොට ඔබට HEX, RGB, සහ HSL කියන color formats ගැන අහලා තියෙනවා. ඒත් මොකද මේවා අතර වෙනස? සහ කවදාද මොකද use කරන්නේ?

මේ guide එකේ අපි බලමු ඒ ගැන.

The Three Main Color Formats

🎨 HEX (Hexadecimal)

HEX කියන්නේ 6-digit hexadecimal code එකක්. ඒක # එකෙන් පටන් ගන්නවා.

උදාහරණ:

• #EA580C — Orange
• #2563EB — Blue
• #059669 — Green
• #000000 — Black
• #FFFFFF — White

Structure: #RRGGBB

• පළමු 2 digits = Red (00-FF)
• දෙවෙනි 2 digits = Green (00-FF)
• තුන්වෙනි 2 digits = Blue (00-FF)

🎨 RGB (Red, Green, Blue)

RGB කියන්නේ 3 values — 0 සිට 255 දක්වා.

උදාහරණ:

• rgb(234, 88, 12) — Orange
• rgb(37, 99, 235) — Blue
• rgb(5, 150, 105) — Green

Structure: rgb(R, G, B)

🎨 HSL (Hue, Saturation, Lightness)

HSL කියන්නේ human-friendly format එකක්.

• Hue (H) — 0-360 degrees (color wheel එකේ තැන)
• Saturation (S) — 0-100% (color intensity)
• Lightness (L) — 0-100% (dark/light)

උදාහරණ:

• hsl(21, 90%, 48%) — Orange
• hsl(217, 91%, 60%) — Blue
• hsl(160, 84%, 39%) — Green

Side-by-Side Comparison

Feature	HEX	RGB	HSL
Format	#EA580C	rgb(234,88,12)	hsl(21,90%,48%)
Readability	⚠️ මධ්‍යම	⚠️ මධ්‍යම	✅ ඉහළ
Browser Support	✅ 100%	✅ 100%	✅ 100%
Adjust Color	❌ අමාරු	❌ අමාරු	✅ ලේසි
Opacity Support	⚠️ 8-digit වලින්	✅ rgba()	✅ hsla()
File Size	✅ කුඩාම	❌ ලොකු	❌ ලොකු

When to Use Each Format

✅ Use HEX When:

• Simple colors define කරන්න ඕන නම්
• CSS file size එක අඩු කරන්න ඕන නම්
• Design tools (Figma, Photoshop) වලින් copy කරන්න ඕන නම්
• Email templates වලට (best support)

Example:

color: #EA580C;

✅ Use RGB When:

• Opacity (transparency) ඕන නම්
• JavaScript එකෙන් color values change කරන්න ඕන නම්
• Dynamic colors generate කරන්න ඕන නම්

Example:

background: rgba(234, 88, 12, 0.5); — 50% transparent orange

✅ Use HSL When:

• Programmatically color variations හදන්න ඕන නම්
• Hover states, dark mode, themes හදන්න ඕන නම්
• Color palettes generate කරන්න ඕන නම්
• Human-readable colors ඕන නම්

Example:

background: hsl(21, 90%, 48%);

background: hsl(21, 90%, 58%); — Lighter (same hue)

Practical Examples

Example 1: Button with Hover Effect (HSL)

HSL එකෙන්:

• Button: background: hsl(21, 90%, 48%)
• Hover: background: hsl(21, 90%, 58%)

HEX එකෙන් කරන්න ඕන නම්:

• Button: #EA580C
• Hover: #F97316 (manually හොයාගන්න ඕන)

HSL එකේදී lightness එක විතරක් වෙනස් කරාම automatic හරි shade එක ලැබෙනවා.

Example 2: Transparent Overlay (RGB)

background: rgba(0, 0, 0, 0.5);

මේකෙන් 50% transparent කළු overlay එකක් ලැබෙනවා — modal backgrounds, image overlays වලට හොඳයි.

Example 3: Simple Solid Color (HEX)

color: #EA580C;

Simple නම් HEX තමයි ලේසිම සහ කුඩාම.

Color Conversion

ඔබට HEX → RGB → HSL convert කරන්න ඕන නම්, අපේ free Color Picker එක use කරන්න. එතන ඔබට:

• ✅ ඕනෑම color එකක් select කරන්න පුළුවන්
• ✅ HEX, RGB, HSL, HSV — සියලුම formats ලැබෙනවා
• ✅ Color harmonies (complementary, triadic, etc.)
• ✅ One-click copy

Browser Support

අද කාලේ සියලුම modern browsers:

• ✅ HEX — Full support (හැම browser එකේම)
• ✅ RGB / RGBA — Full support
• ✅ HSL / HSLA — Full support (IE 9+)

ඔබට IE 8 support කරන්න ඕන නම් විතරයි HEX use කරන්න ඕන. අද ඒ ඕන නෑ.

Best Practices

• ✅ Design System එකේ HSL use කරන්න — color variations ලේසියෙන් හදන්න පුළුවන්
• ✅ Transparency සඳහා RGBA use කරන්න — rgba(0,0,0,0.5) වගේ
• ✅ Simple colors වලට HEX use කරන්න — කුඩා, ඉක්මන්
• ✅ Consistent වෙන්න — එකම project එකේ එකම format එකක් use කරන්න
• ✅ CSS Variables use කරන්න — --primary: #EA580C;

Conclusion

HEX, RGB, සහ HSL — තුනම වැදගත්. ඒත්:

• 🎨 HEX — Simple colors සඳහා
• 🎨 RGB — Transparency සඳහා
• 🎨 HSL — Programmatic color manipulation සඳහා

හොඳ web designer කෙනෙක් තුනම දන්නවා, සහ අවශ්‍යතාවයට ගැලපෙන එක use කරනවා.

Bookmark our Color Picker for quick color conversions!