Show Your True Colors

Development is a team effort with a lot of moving parts: UX, front end, back end, wireframes, mockups, testing, etc — you can't control them all. And since according to Murphy's Law, shit is bound to happen, you may want to pack a spare 'chute!

Let's say you're working front end, building a prototype from mockups. Ideally, your design team will specify color codes, compile graphic assets, and spell out all the details in advance. Specs in hand, you have everything you need to write the HTML, CSS, and JS.

But what if your designer only has time to create logos and hand draw mockups? Can you still assemble a color palette and implement the design? Sí se puede!

Option A: Open each image individually. Mouse around with the color picker. Convert RGB to hex. Get carpal tunnel.

Option B: Install Colorific from 99Designs. Automatically retrieve hex code palettes for each image in one step. Take a nap.

Microsoft and Poncho logos

```bash $ find . -name '*.png' | colorific ./msft.png #6eb006, #1291eb, #ec381b, #fdac09 ./poncho.png #76c6fe, #f46b23, #ffef10, #bbe3ff ``` Just like that, you've saved the day. Want a visual palette? Use the -o flag. ```bash $ colorific -o wendy.png ./wendy.png #d0202a, #f4d6d8, #493534, #a4253a, #13a2de ```

wendy.png color palette
Wendy's logo and color palette

Colorific tries to account for antialiasing effects and excludes background & grayscale colors. Read more about the underlying methodology on the 99Designs Tech Blog.

Join the discussion

2017 Neal Shyam