UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Follow publication

Member-only story

Create a Color Scheme Around Any Color in 8 Easy Steps

Have you ever found that one color you just had to use in your next project? But, when you try and generate a color palette around it, nothing seems to work.

I’m going to show you how to create a color scheme around any color using one technique you’ve probably never thought of. MATH. Yes, math. How, you say?

Let me show you.

1. Set your color model to HSL

Usually, your color picker is set to Hex values like #DB17DF. We’re going to change it to HSL, which stands for Hues, Saturation, and Lightness.

2. Pick a color, any color

As an example, I’ve picked my latest obsession, #DB17DF.

3. Make variations of the L value

Create a set of L values with differences of 10. Ranging from 0 to 100.

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Published in UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Written by Alexis Wright

UX/UI designer, storyteller, and all-around renaissance woman living in the ATX. www.aswrightdesign.com

Responses (13)

Write a response

Just so you know. I shelled out $5/mo. so I could have access to this. IT WAS WORTH IT.

--

The method for choosing your primary and secondary colors is so useful, thanks! It would be great if you could explain how you chose your accent colors, as I would have no idea which accents would work well with those primarys/secondarys.

--

Thank you!
How did you chose the accent color? Is there a rule for this one as well?

--