11

Ask DN: How do you choose colour paletes?

almost 8 years ago from , Front-end developer

As someone who doesn’t dabble in design enough times, there’s an issue where I always stumble and causes me some choice paralysis: choosing a colour palette for a new project.

How do you people overcome this? How do you pick a colour palette for a project you’re just starting? Thank you in advance!

18 comments

  • Sean LesterSean Lester, almost 8 years ago

    If you have at least a starting place, this thing is awesome: http://coolors.co/

    6 points
  • Adam MeyerAdam Meyer, almost 8 years ago (edited almost 8 years ago )

    I don't use this enough, but I always thought it was useful: http://www.materialpalette.com/

    4 points
  • Chris NewtonChris Newton, almost 8 years ago (edited almost 8 years ago )

    I think it depends a lot on the project, but usually I try to find a relevant starting point, maybe even just a single colour, and then build on that foundation with tints, shades, adding complementary or analogous accent colours, and so on.

    For a creative/promotional/marketing kind of web site, there are often prominent images, and those can suggest a colour palette. Advertising a get-away-from-it-all-break to a tropical island? You’ve got sky blue, sea green, tree green, sandy yellow, and so on. Sample a few representative colours from the photos and you’ve probably got a good starting point.

    For more business/professional sites, if the brand has a logo that already incorporates colour, again following its lead is often a good beginning. Even if it only uses one colour, chances are that colour or some variation of it can be used as your first accent colour, or part of the background, or even the main colour for body text. If there are multiple colours in a client’s logo, it would take a solid argument for me not to follow the existing colour scheme in other contexts.

    If there are no relevant images or existing branding guidelines to suggest any colours you can start with, you need to be more creative. You can start with what your client does or makes, but personally I prefer to concentrate on the kind of impression they want to make rather than the market or industry they’re in.

    For example, suppose it’s a technology firm. For the trustworthy, businesslike look of a professional consultancy, it’s hard to go wrong with a cool and darkish palette, probably built around blues and perhaps with elements of green or purple. For a firm that makes custom keyboards and controllers for serious gamers? Almost anything but that kind of businesslike look, but probably something dark and edgy, maybe black with silver accents, plus a bright accent colour like a red, purple, or electric blue/turquoise. If the firm makes heat recovery and ventilation systems? That might suggest hot and cold, so maybe a palette with some red/orange/yellow colours plus some light blue/cloudy grey, probably in those combinations, and probably with specific colours that lend themselves to warm and cold gradients or being set as contrasting/complementary pairings in the visuals.

    That’s all thinking about promotional/brochure kinds of material. For some contexts, such as colours for data visualisations or user interfaces, more practical concerns tend to dominate. Good maps are often a source of inspiration for me if I need one of these practical schemes, as they tend to emphasize things like a range of colours that are clearly distinct but not clashing, or twin-hued palettes with a lot of tints and shades to show data that varies on a scale with some significant threshold. I’d probably still start by looking for one or two relevant colours to anchor the scheme, though, say a sea blue vs. a grassy green or mountain red/brown for a map visualisation showing height above or below a waterline or similar threshold. But beyond that, for these practical cases, I tend to be a lot more systematic about generating further colours to fill out the palette, for example interpolating between two colours in some perception-based colour space and choosing as many other colours as I need spaced around evenly along the line.

    3 points
  • Chris Hawkins, almost 8 years ago

    Truthfully, I find one color that I feel is appropriate for use as a "main" color, and go begging to one of my designers friends to build a palette around it.

    It's working out well so far!

    3 points
    • Dirk HCM van BoxtelDirk HCM van Boxtel, almost 8 years ago

      I don't mean to intrude on your obviously working process (I can't blame you! haha) but try the ones I linked below. You might be surprised how easy it is.

      Your designer friends might even ask you how the heck you managed to build 'm yourself ;)

      1 point
    • Gonçalo Morais, almost 8 years ago

      I do something similar! :) I gather around a palette or roughly 3-4 colours, and then I show them to my designer friends, to see what they think.

      0 points
  • Rolando MurilloRolando Murillo, almost 8 years ago

    Using http://coleure.com/

    1 point
  • Luis Martins, almost 8 years ago

    It really depends on the project. Usually I like to start wireframing with the least design possible, then slowly add color and graphics.

    For picking colors, i like this tools: http://colourco.dehttp://coolors.co/

    1 point
  • Jeri Bowers, almost 8 years ago (edited almost 8 years ago )

    When selecting a color palette, it's useful to think about accessibility from the beginning.

    Color Accessibility

    Color Related Links

    1 point
  • Joe AlfonsoJoe Alfonso, almost 8 years ago

    One way is once you find a primary color use the HSB/L system to find other colors. That way you can get new coors that hold the same characteristics as the primary by just changing the hue. Same saturation and brightness. From there you can adjust manually and when you want tap states, adjust the brightness value by 10-20%.

    1 point
  • Jess Chen, almost 8 years ago (edited almost 8 years ago )

    One of my favourite ways of choosing colour palette is to make a mood board for your project. (there's a lot of great sources out there to build your mood board, Pinterest, Niice, etc.)

    Along the way of building it up, you'll find yourself having these images that represent your project the best, or at least what you hope your project could be. From those images you'll notice that they probably shared a range of similar colour scheme, congrats, you just found your primary palette : )

    That's how I define my colour palette most of the time : ) Hope it helps you.

    1 point
  • Chris Aalid, almost 8 years ago

    Sort of related, but Marc Edwards wrote a great little tidbit on refining color palettes with adjustment layers. Super useful.

    http://bjango.com/articles/adjustmentlayers/

    1 point
  • Jay RendonJay Rendon, almost 8 years ago (edited almost 8 years ago )

    The following might help:

    http://www.colourlovers.com/

    https://color.adobe.com/

    1 point
  • Dirk HCM van BoxtelDirk HCM van Boxtel, almost 8 years ago (edited almost 8 years ago )

    For calculated precision:http://paletton.com/

    For quick awesome palettes:http://colourco.de/

    .edit: Both of these require a general idea of what you want before you go in. So use your best knowledge of the target audience and the product you're working on. But I'm assuming we're all at least partly apt at that since we're all designers ;)

    1 point