Mobile app version of vmapp.org
Login or Join
Murphy569

: Choosing colors for website elements based on logo colors I am new to UX design (zero sense on choosing colors) and designing my fist website (social networking) based on the logo I have. My

@Murphy569

Posted in: #Color #WebsiteDesign

I am new to UX design (zero sense on choosing colors) and designing my fist website (social networking) based on the logo I have. My logo colors are teal and orange. Based on these colors how do I determine what colors should go well for different elements?

For example; the background color for website (for example if we look at Facebook, based on their blue color logo they use an AliceBlue EDF0F5 background color), regular text color, heading color, link color, div border color, link hover color, subheading color, subheading background color?

Are there any tools to generate these colors automatically? I am following Google Material Design guidelines but when choosing the colors for the different elements it is all getting messed up (loosing clarity in typography).

10.04% popularity Vote Up Vote Down


Login to follow query

More posts by @Murphy569

4 Comments

Sorted by latest first Latest Oldest Best

 

@Caterina889

For color ideas go here: www.flatuicolorpicker.com/
Then take the hex value and play around in either of these color palette-generating tools:
color.adobe.com/create/color-wheel/ paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
Here is a screenshot of Paletton in action using CINNABAR F03434 from Flat UI Color Picker (you can get the hex values by cliking on any of the colors in the palette on the right)

10% popularity Vote Up Vote Down


 

@BetL875

Well I am not very well-versed here in this case but a basic approach to do this is to use contrasting colors to your logo for your website theme. For example, if your logo is in a dark or shocking color scheme, I'd suggest using a light theme color with white background.

10% popularity Vote Up Vote Down


 

@Eichhorn212

Since you're experienced on back-end technologies, the tool part should be a snap, but color selection is subjective. In my opinion, you need a workflow to step through.

If you don't want to go with neutrals only, and you want other harmonious brights for alerts and other elements that need to win the bid for attention, find something in nature that contains your two colors, teal and orange, and photograph it. I said something in nature because chances are the other colors you find besides teal and orange won't clash with your logo.

Take the nature photo and open it in Photoshop. Pixelate the image into large-ish pixels. Then sample the colors manually, or pick the legacy menu item, "Save for web" and select a small number of colors to downsample that image to. Now you have a color palette that can get you started.

Here's an example using my daughter's cat, Shakira as the thing found in nature:



You could try Themeroller to experiment with different color choices for common UI elements like headers, switches, buttons, and active, disabled and selected states. It will preview common widgets and layout elements for mobile web, and you can quickly spot less than ideal design choices and correct them. Then you can download your theme as a .zip file and use and share it.

10% popularity Vote Up Vote Down


 

@Bryan765

It's best to stick to subdued neutral colors for most of the site, with teal and orange accents to pull the branding through.

Amazon has orange in its logo, and you can see matching orange in little pops throughout the site -- on buttons, titles, etc. Orange and teal are both strong, so a little goes a long way.

If you need other complimentary colors for elements (secondary buttons, call-out boxes), there are a lot of generators like colormind.io/ that will take a starting color and provide some harmonious options.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme