0

(Although 'opinion' certainly may be in play here, there seem to be some consistent best practices about color usage on the web, and this question is about how to handle the scenario where violations of those best practices are inescapable).

The web app im building has to use a corporate color scheme. As for corporate brand guidelines - they are entirely targeted at looking good in powerpoint ie. large text on blocks of color - not a web app. The current scheme seems to put me in a tough spot in terms of best web practices (avoiding neons, reds, having complimentary contrast colors, etc).

The two primary colors expected to be used are:

A somewhat saturated dark purple: #4B0F43 enter image description here

And an extremely bright and saturated neon pink: #FF016F enter image description here

All other colors are simply variations of those two hues. Two being slightly less saturated and two being slightly lighter. There are no complementary colors. Obviously white is considered valid, and there is a light gray as well.

The application is pretty broad UI-wise, involving headers, breadcrumbs, main menu, a "quick" menu, tables, large forms. So it's not as simple as a page with a couple buttons. When I apply those two colors to the app it's just extremely hard on the eyes. The pink is useless for text, and is painful to look at in large blocks, so buttons are pretty much out. The dark purple is fine for a header, but it's a little too dark to use for large blocks of the screen. Pink on purple doesn't look too bad, but using it for anything functional in the UI collides seriously with error/warning indicators e.g. Red-on-Purple next to Pink-on-Purple are confusing to see together. I could abandon the pink altogether and use Gray/White/Purple, but lacking a contrasting/complimentary color just looks so bleh.

Are there any examples out there of a theme that uses two primary colors so close in hue? I need some inspiration as to how to make this work. I've actually already implemented the change within the app, and it's useable, but I'm not satisfied with the result.

Improve this question
1
  • 1
    It's difficult to give any suggestions without seeing the nature of content or the actual branding. Offhand... without really understanding content... I'd focus on grey and white.. use the dark color as accent and the bright color as attention grabbers. But that's just my opinion. The brand itself may strive for a more bold statement - i.e. the bright color as a background and the dark as content coloring.
    – Scott
    Commented Oct 18, 2022 at 17:41

1 Answer 1

Reset to default
2

Think of this as a nearly black and white design that has a colored filter overlaid over the image. That would roughly produce something like what you show.

Now, the human brain will try to correct for this kind of thing. In this case by desaturating the apparent colors. This happens especially pronouncedly if the result encompasses the entire human view and the background around the device or does not normalize the apparent colors.

You can make the brain not to do this kind of correction by adding enough neutral colors. However, if your very careful with your neutals you can trigger the filter correction and have eyes see neutrals and very neural tones as ultra vibrant colors instead.

Improve this answer

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.