Currently I'm designing a web where there is a progress bar. It have 3 stage. When stage 1 is completed, the icon will change to green, the remaining icon for stage 2 and 3 will remain grey-ish color.

The company's color code is dark blue. And the website color scheme does not have green.
So should I remain the completed icon in green color or dark blue same as the company's color code?

  • 3
    Can you provide a graphic sample of the page and progress bar? Without seeing that, my first thought is use green to make the completion status stand out. Commented Dec 16, 2022 at 9:42
  • As long as it doesn't make it unclear for users that a stage is completed, I don't see why you can't use dark blue (with light gray as incomplete).
    – Mahm00d
    Commented Dec 20, 2022 at 8:36

1 Answer 1


If this were my project, I would push to make the status green, even if it is not in the existing palette. You could point to the usability heuristic of matching between the system and the real world; users who can perceive the color green will likely intuit that it means "success" or "completion" or "move ahead" based on other systems they've used.

If your stakeholders push back, then falling back to the blue of your palette would be the next best option. Please make sure either way that you're using a secondary indicator for status and not just relying on color.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.