0

I am working on theme admin interface and introducing a color palette switcher. For starters admin has 5 colors in the palette.

enter image description here

All color pickers used in the theme have the option to pick from color palette. Nice and sweet.

Questions: Is there a standard use of color palettes? And are you as web designer following specific pattern when using color palettes?

The way I am using it for testing is ,

  • Color 1 = Links and headings
  • Color 2 = link hovers, active links (
    site, accordion, tabs ) , shortcode icons
  • Color 3 = Sub Menu hovered background,forum table headings background, form inputs border
  • Color 4 = Sub menu background, forum table background
  • Color 5 = Not used for now

When the admin than changes the palette colors all the mention items change .

What I am trying to figure out is the "standard" design pattern ( if there is any ) that designers use with color palettes in order to apply this to theme interface.

Improve this question
2
  • No, there's no standard "Apply color one to all backgrounds" or something like that if that's what you're looking for
    – Zach Saucier
    Oct 17, 2016 at 15:10
  • I guess the main thing to think about is a good contrast between the background colour and text. Other than that, there are no standards. There are safe options and Google's Material Design is an excellent starting point to help you understand the use of colour, but you must also take into account accessibility to ensure people with colour perception problems are able to make out the differences.
    – Bagseye
    Oct 17, 2016 at 15:51

2 Answers 2

Reset to default
1

I think you should think of a palette in terms of the function each color serves. For example, a palette could be:

  • Background color
  • Text color (typically black or dark gray if using a light background)
  • Main accent color (used for example in links and buttons)
  • Secondary accent color (maybe used for hover states or titles)

You could use shades of these colors to generate other interface element colors.

A good example you can take a look at is Bootstrap's default color palette, that uses these colors as part of its palette:

$brand-primary:
$brand-success:
$brand-info:
$brand-warning:
$brand-danger:
$brand-inverse:

You can see how each color is defined by the function/meaning it has in the context of the interface.

Improve this answer
0

I am by no means an professional when it comes to design but:

In my opinion its great to define one standard theme. If the user wants he can change it,if not, he just uses this one. The colors match and work nice together.

Now to the color pallete: You could take a look at Material Design by google. Its design basics focuss alot on motion,style and layout and are applied to many android apps but material design is also meant to be universall across multiple platforms and screen sizes. Maybe you can find some inspiration on there and create color schemes which may work great.

Hope i could help a little

Improve this answer
2
  • This doesn't seem to address the question being asked
    – Zach Saucier
    Oct 17, 2016 at 15:09
  • The specific link (material design) does. But David Dvorak, try to include some clues on your answer.
    – Rafael
    Oct 17, 2016 at 17:42

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.