5

I recently was hired to work on a website, however I am having a very hard time trying to come up with a color scheme because of the companys choice of brand color.

Their color is around #f37321. It is not this specifically but anything in that general area works.

I can not find any colors that look nice with it. I tried a lighter blue/silver but the orange is too harsh.

Does anyone know a way to make the orange seem less harsh or other colors that will look nice alongside it?

enter image description here

migrated from ux.stackexchange.com Jul 8 '15 at 8:04

This question came from our site for user experience researchers and experts.

  • 2
    Try this tool, recently featured on Product Hunt: coolors.co/app . You just replace one of the HEX colors at the bottom with your orange, lock the color (by hovering) and press the spacebar. You can tap it multiple times to change it and I think it's also dependent on where you drag the color in the palette. – Vince Caregnato Jul 7 '15 at 12:15
  • Or, you can also try Material Palette – Razvan Balosin Jul 7 '15 at 12:29
  • Context is important. Are we talking UI colors here, or general page design? If the latter, you may want to ask this on graphicdesign.se instead. – DA01 Jul 7 '15 at 16:14
  • How is this a valid question and icon recommendations are off topic? – Devin Jul 7 '15 at 17:14
11

I use encycolorpedia for this. It recommends:

Inverted: #0c8cde

25% Saturated: #fe7015

Grayscale: #8a8a8a

25% Lighter: #f69c62

25% Darker: #c4530a

chocolate: #d2691e

25% Desaturated: #d8783b

It also supplies closely related colors used by popular sites, which might give you some additional ideas:

Home Depot #ee7125

Etsy #eb6d20

StackOverflow #ef8236

Amazon #e47911

  • 2
    This is a fine technical answer, but it should be pointed out that the entire purpose of declaring brand colors is that you don't mess with them. It's part of the brand identity of the company. – DA01 Jul 7 '15 at 16:13
  • Most colours that Encycolorpedia identified, above, are Analagous, If you also want something contrasting, for example to draw attention to a call-to-action, you can try the Complement (Encycolorpedia calls this Inverted), which is opposite across the colour wheel. You can see a colour wheel in the reply below. Does the Complement seem too garish? If you were mixing paint you could: make a Tint by adding white, make a Shade by adding black, or make a Dull by adding the complement (and then you can also Tint and Shade of the Dull). Knowing the theory, you can try "mixing" electronically in hex. – JeromeR Jul 7 '15 at 20:57
10

You can get some idea by trying out monochrome, analogous, triad or tetrad schemes in the color wheel. Here's one suggested by Paletton. You can also check for color blindness.

enter image description here

I also tried your color to find related images and illustration using the MulticolorEngine tool. This can give you a fair idea on what colors can go with it.

enter image description here

You can also try Adobe color.

  • I use Paletton all the time, and love it! It's been my go-to resource for color scheme building for a few years. – Lindsey D Jul 7 '15 at 16:34
  • Same here. Color blindness support makes it even better. – Adit Gupta Jul 7 '15 at 16:37
6

If their brand color is that orange, that you don't change it. That is the entire point of having a color as part of their brand imagery.

That doesn't mean you need to use that color as part of the UI. Branding is branding, UI is UI. Use the right colors for each.

How to make the branding area of the page fit well with the UI part of the page becomes a visual design task.

  • I actually took the amazon approach. Instead of using the brand color as the central theme I left it just for the logo and created the page using a contrasting color. – Mr.Smithyyy Jul 7 '15 at 16:15
  • 1
    @Mr.Smithyyy yes, that's a very appropriate solution! – DA01 Jul 7 '15 at 16:17
4

I'm just gonna put this in an answer.

Useful links:

Coolors

You just replace one of the HEX colors at the bottom with your orange, lock the color (by hovering) and press the spacebar. You can tap it multiple times to change it and I think it's also dependent on where you drag the color in the palette.

http://coolors.co/app

Color hex

You get all sorts of useful info about the color:

  • darker/lighter shades
  • monochromatic, complementary, analogous, triadic colors
  • different color models
  • ...

http://www.color-hex.com/color/f37321

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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