1

I interesting issue over here.

I'm designing a "photo editor" app. I have already choose my primary color.

Issue:

I'm trying to understand what is the best way to choose "smart" background color that answer this two:

1) Color to be used as a 'Contrast' content (Photos) and the primary color. (Would easily emphasize the content to the user)

2) Color to be used as a 'Contrast' for the Primary Color. ( Will create eye-on-the-eye relation between the two).

The current use primary color is : #286A22

Attaching photo with my current design.

What method should i use in order to generate the appropriate background color?

enter image description here

Improve this question

2 Answers 2

Reset to default
2

Generally, choosing the best background colour depends on what kind of photos will be displayed. It is really hard to find the ideal colour as a dark background won't work for dark photos while a white background won't work for light photos. Personally, I would recommend keeping the dark grey colour that is visible in your screenshot as it lets the pictures stand out with their vibrant look.

In the case of this dark background colour, it is also easy to choose the right accent. Just find any vibrant colour and it will fit well.

Please correct me if I understood something wrong and you are looking for a solution to a different problem.

Improve this answer
4
  • Hey Patryk! Thank you for answering. In general, the photos are taken from the user photo library. So i'd say we can expect ANY kind of images. Baseline, the solution should be a generic one for all colors and types. As well i'm trying to find the balance between UI and UX. That's exactly why i've mentioned i already choose the Primary Color :) In case we choose to go to a Background in RGB range of (20,20,20) - (40,40,40). How can we determine which is the best suited with the primary color? Hope i'm being clear. Thank you sir!
    – Roi Mulia
    Jan 28, 2017 at 19:03
  • 1
    Ok, let me just make sure I understand everything. The primary colour is the green, the accent colour is the pink (that I know as it is visible) and we are looking for a background colour which suits both of those?
    – user96349
    Jan 28, 2017 at 19:11
  • Oh no no. I've confused you sir. The primary/action color is the pink. Unfortunately i don't know what accent color means ( I'm not a UI UX designer haha). And yes, we are looking for a background color to suits both in UI and UX terms. Hope i've not confused you. So far, i've used the pink for primary actions and symbols. And White Label and and secondary actions (like SETTINGS and HOW TO?). Make sense? ah
    – Roi Mulia
    Jan 28, 2017 at 19:20
  • 1
    Ok, this means that the pink is actually the accent colour if we want to use the correct terms. For the background, just use #212121. It will let the photos and UI elements stand out without creating unnecessary chaos.
    – user96349
    Jan 28, 2017 at 19:31
2

Adobe got a best free online tool to help select accent color and variation colors based on dominant color https://color.adobe.com/ You can also upload an image color.adobe.com/create/image/

This site got some basic tutorial about colors and how to select variations http://www.websitebuilderexpert.com/how-to-choose-color-for-your-website/

Improve this answer

Your Answer

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

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