UI/UX - lesson 4 | HackIndia Skills

Key point

Remember this

Colour should make your screen clearer, not just prettier. If text, buttons, and status messages are hard to read, your UI fails even if the palette looks good.

Start with roles

Do not pick random colours screen by screen. Give each colour a job.

For a hackathon app, you usually need background, surface, text, muted text, primary action, success, warning, and error. Keep it small so your screens feel connected.

Your to-do

Build a palette

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Choose one main brand colour for primary buttons and links.
Choose neutral colours for background, cards, borders, and text.
Choose status colours for success, warning, and error.
Test colours on real screens, not only in a palette generator.
Remove colours that do not have a clear job.

0 of 5 done

Common mistake

Common colour mistakes

Beginners often use colour as decoration. Then every card, icon, and button fights for attention.

Another mistake is using only colour to show state. A red border alone is not enough for an error. Add an error message like “Enter a valid UPI ID” so the user knows what to fix.

Tip

Check contrast early

Use a contrast checker before you polish the UI. Search for “WebAIM contrast checker” or use the contrast tools inside Figma if you design there.

Aim for readable contrast for body text, labels, inputs, and buttons. Pay extra attention to grey text. Light grey on white often looks clean but becomes unreadable on cheaper phones or in sunlight.

Example

Token example

Store colours as tokens in code. This makes your React, Next.js, or plain CSS project easier to keep consistent across screens.

Here is a simple CSS file for a student event app.

:root {
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-text: #0F172A;
  --color-muted: #475569;
  --color-border: #CBD5E1;

  --color-primary: #2563EB;
  --color-primary-text: #FFFFFF;

  --color-success: #15803D;
  --color-warning: #B45309;
  --color-error: #B91C1C;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.button-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.error-text {
  color: var(--color-error);
}

Use AI carefully

You can ask ChatGPT or Gemini for palette suggestions. Give it your app type, audience, and mood. For example: “Suggest an accessible colour palette for a college hackathon expense-splitting app, with CSS variables.”

Do not trust the colours blindly. Check contrast yourself. Also check if the palette has too many colours or colours with unclear roles.