40

I have case where logo without name have three colors (dark blue, light blue and pink) which can be called as brand colors, but I am struggling to decide on UI surface colors (ex: cards, navbar, etc). My goal is to

  • Give some emphasis to brand colors while not conflicting with the logo.
  • Light theme should give trusting and soothing feeling.
  • Support a dark theme

I know there color pallet generators to generate pallets, but I wondering what kind of preset I use when picking colors ex: monochromatic, analogic, triade, complementary, tetrade, etc. My understanding to go with monochromatic preset of dark blue from the logo for trusting and soothing experience with light blue or white for surface. But how to balance attention grabbing with logo colors and CTA button colors.

Update:

Website is a ecommerce website that sells electronics (ex: laptops, desktops, smartphones and etc.) We will mostly focused on retail customers.

Improve this question
5
  • 11
    – How do you decide UI colors when logo consist of three colors? – A decision of colors is not arbitrary or simply definable by a color pallet generator. The question omits a lot of relevant information to be able to give an answer. Does the company sell fruits or is it an airline company? Is it aimed at children or a hip-hop group fans? Is it a company with the formality of a financial desk or is it a water-park? Among others. By the way, a good graphic designer is able to easily find answers to such questions.
    – Danielillo
    Commented Sep 14, 2021 at 12:45
  • 1
    @Danielillo thanks for comment. answer to your question : ecommerce website for electronics, I am not designer but a dev, any good resource to learn about color combinations?
    – kaushalyap
    Commented Sep 14, 2021 at 12:58
  • You don't. You pick up what the user has specified as their preferred colors. But if you do choose to specify some things, be sure to specify everything. Can't count the times I've visited sites that have specified a light-colored background (somehow managing to override my preferences) but not text color, so my normal white text is basically invisible.
    – jamesqf
    Commented Sep 15, 2021 at 16:41
  • @jamesqf what? So users get to choose text color, card color, button color? Never seen that one before
    – sleighty
    Commented Sep 18, 2021 at 2:54
  • @Bruno Ely: So you've never used for instance X, where you can set default foreground, background, & other colors, which a well-behaved application should pick up and use? (Not that all applications are well-behaved :-() You've never seen any of the browser plugins that let users set light text on a dark background?
    – jamesqf
    Commented Sep 19, 2021 at 16:17

1 Answer 1

Reset to default
92

As written in the comments, it's not easy to define a color palette without all the conceptual and technical information of the project.

This answer is somewhat technical and generic based on three arbitrary colors on how to make a custom color choice.

Taking this example logo from vecteezy.com and separating its three main colors:

enter image description here

Blend them to obtain a starting color palette:

enter image description here

Bring this palette to white and black respectively:

blck/white

The column next to the black color brings the off-black colors and the one next to white, the off-white colors. Obtained this base color palette, use the color contrasts to obtain the essential ones.

Temperature color contrast

Having three colors as a starting point there's enough information to obtain the dark / light palettes and play with the temperature color contrast:

enter image description here

Saturation and brightness contrast

This same color map can be useful as a background to reveal the accent colors (CTA), without leaving the base range, in this case using the contrast of saturation and/or luminosity.

accents

Quantity color contrast

Although in the example image the rectangles occupy a large space, in the real project they should be in proportion to the need and avoid visually collapsing the corporate colors. It's useful to know and understand well the quantity color contrast: the brighter a color, the less surface it should occupy.

Hue color contrast

From all this information a minimum of seven or eight colors can be obtained plus black (text) and white (text / background) and the corporate colors. Personally I would only allow one extra color out of gamut (hue contrast) for special uses such as warnings, up to a maximum of two.

extra

More info about color contrast

More info about off-black colors

More info about off-white colors

Improve this answer
13
  • 15
    Additional note: this is one case in which using HSL instead of Hex is really helpful.
    – Arkan Tanriwa
    Commented Sep 15, 2021 at 4:35
  • 1
    "the brighter a color, the less surface it must occupy" how does the background colour in light mode sit with this? It would obviously be a very bright colour occupying the vast majority of the screen, so I have trouble understanding what you really mean with that, or how I should interpret it.
    – theberzi
    Commented Sep 15, 2021 at 8:24
  • 2
    @Danielillo Do you consider white to be "bright"? (white is a common background color in light mode)
    – Yakk
    Commented Sep 15, 2021 at 14:26
  • 2
    @Danielillo I'm asking for clarification of your answer. You used the word "bright" in a way that, to me, reads as if you are using a technical term that doesn't mean the same thing as the word "bright" does in every day English, and I'm checking if that is the case. Or maybe "it must occupy" is the source of confusion (is "it must occupy less space" or "it can occupy less space", both are possible readings) is the problem.
    – Yakk
    Commented Sep 15, 2021 at 14:45
  • 2
    Brightness = Luminosity = Value, changes its name according to the author, it's the third of the color variables in HSL.
    – Danielillo
    Commented Sep 15, 2021 at 14:58

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.