CODEWITHSUNDEEP
csscolorssasscompass-sass
fusionstrings
fusionstrings

Reputation: 1065

How to get desired color from base color in SASS

I want to have one base color and want to built dynamic color palate for my website so it becomes as easy to switch themes as changing a color value.

SASS has so many helper function which I believe enough to get me there. The problem I am facing here is in order to get to desired color value from that single base color, what function (or combination of functions) with what value shall I use.

There is this amazing tool http://sassme.arc90.com/ , which lets you play with various combinations but again you don't have full control over output.

For example If I have a base color #ffe202 and I want output of #ffd202 I am not sure how to go about it, I can get somewhat closer by playing with controls but not exactly what I desire.

So bottom line is I was wondering if there is any tool where you input your base color and desired output color and it gives you combination of SASS helper functions to use similar to http://sassme.arc90.com/ .

Upvotes: 2

Views: 280

Answers (2)

Alex Gyoshev
Alex Gyoshev

Reputation: 11977

I've had the same problem, and built a tool that looks up functions that transition from one color to another. It suggests most commonly used ones, but may be applicable in your scenario. You still have to choose which function makes most sense, but at least it does the number crunching for you.

Suggest SASS color function

Upvotes: 1

KatieK
KatieK

Reputation: 13853

There's no strict way to always get a specific result from a given color, but you can just choose which of Sass's color functions you want to get the desired result.

In your case, your desired color just has a different green value from your starting color, so you can adjust the green thusly:

background-color: adjust-color($color, $green: -16);

adjust-color() will change just the green value. You can use positive or negative values to increase or decrease the amount of a hue; I landed on -16 through trial and error.

Upvotes: 0

Related Questions