18/10/2025
"Color Theory" කිව්වම සමහරුන්ට තාමත් ටිකක් 'serious' subject එකක් වගේ දැනෙනවා නේද? 😵💫
But honestly, ඒක එහෙම නෑ.
ඔයාගේ design එක "ලස්සන" වෙන එක විතරක් නෙවෙයි, user-ට "feel" වෙන විදිහ, එයාලා ඊළඟට මොකක්ද කරන්න ඕන කියලා guide කරන එකත් decide කරන්නේ Colors වලින්.
නිකම්ම "ලස්සන පාට" තෝරන එක පැත්තකින් තියලා, අපි බලමු කොහොමද පාට "smart" විදිහට use කරන්නේ කියලා.
1. Colors කියන්නේ Feelings (The Psychology 🧠)
User-ලා විදිහට අපි හැමෝම පාට වලට react කරනවා. ඒක අපේ brain එකේම wire වෙලා තියෙන්නේ.
🔵 Blue: මේක තමයි "Trust" (විශ්වාසය). Bank apps, Tech companies (LinkedIn, Facebook, Twitter) වගේ ගොඩක් දේවල් නිල් පාට වෙන්නේ ඒකයි. It feels secure and calm.
🟢 Green: "Success!" හරි "Go" හරි "Passed" කියන feeling එක දෙනවා. ඒ වගේම "Nature" (ස්වභාවධර්මය) සහ 'Health' (සෞඛ්යය) represent කරන්නත් use වෙනවා.
🔴 Red: දැක්ක ගමන් "Error!", "Stop!", "Urgent!" කියලා feel වෙනවා. It creates urgency. ඒ නිසා "Sale" banners වලටත් දානවා. හැබැයි පරිස්සමෙන් use කරන්න.
🟡 Yellow: "Happiness" සහ "Optimism" (සතුට) පෙන්නුවත්, digital design වලදී මේක "Warning" (අවවාදය) දෙන්නත් පාවිච්චි වෙනවා.
🟠 Orange: "Friendly", "Creative", "Enthusiasm". මේකත් user-ව action එකකට motivate කරන්න පුළුවන් නියම color එකක්.
⚫ Black: "Luxury", "Power", "Sophistication". Premium brands (like Apple) ගොඩක් වෙලාවට මේක use කරන්නේ ඒ vibe එක දෙන්න.
2. මගේ Favorite Trick: The 60-30-10 Rule
ඔයාගේ design එක අවුල් ජාලාවක් වගේ (cluttered) පේනවද? Balance නැද්ද? එහෙනම් මේ 60-30-10 rule එක use කරලා බලන්න. මේක game-changer එකක්.
60% (Main Color): මේක තමයි ඔයාගේ 'space' එක. ගොඩක් වෙලාවට White / Light Grey / Dark Grey (Dark Mode) වගේ neutral (උදාසීන) පාටක්. මේක ඔයාගේ canvas එක, design එකට "breathe" කරන්න ඉඩ දෙනවා.
30% (Secondary Color): මේක ඔයාගේ "supporting actor". Cards, info boxes, secondary buttons, navigation bars වගේ දේවල් වලට මේ පාට use කරන්න පුළුවන්.
It creates contrast.
10% (Accent Color): The Star of the Show! 🌟 මේක තමයි ඔයාගේ Call-to-Action (CTA) button ("Buy Now", "Sign Up"), වැදගත්ම link එක වගේ user-ගේ ඇහැ යන්නම ඕන තැන. මේක හොඳට pop-up වෙන, high-contrast color එකක් වෙන්න ඕන (උදා: Spotify වල Green 🟢).
3. The "Must-Do": Accessibility (Contrast)
මේක නම් අනිවාර්යයි! ‼️ ඔයා හිතන "minimal" look එක (උදා: ලා අළු background එකක සුදු පාට text) සමහරවිට ගොඩක් අයට කියවන්නම බෑ. 🥺
Always, always use a "Color Contrast Checker" (Figma plugins/web tools ඕන තරම් තියෙනවා).
WCAG guidelines වලට අනුව:
Text: සාමාන්ය Text එකට 4.5:1 contrast ratio එකක්වත් ඕන.
Icons / Buttons: Icons, button borders වගේ දේවල් වලට 3:1 ratio එකක්වත් ඕන.
Text විතරක් නෙවෙයි, user-ට click කරන්න තියෙන icons, form field borders පේන්නෙ නැත්නම්, ඒ design එක 'broken'. Everyone should be able to use your design, right?
කෙටියෙන්ම කිව්වොත්: ඊළඟ පාර design එකක් කරද්දි, නිකම්ම "ලස්සන පාටක්" දාන්නේ නැතුව, "මේ පාටෙන් user-ට මොකක්ද කියවෙන්නේ?", "මම 60-30-10 follow කරනවද?", "මේක හැමෝටම පේනවද?" කියලා පොඩ්ඩක් හිතලා දාන්න.
ඔයාලා use කරන favorite Accent Color එක (ඔය 10% එක) මොකක්ද? Comment එකක් දාගෙන යමු! 👇
