: 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

@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)

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.

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.

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.

Vote Up Vote Down