Home/ Questions/Q 8076503
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T15:16:27+00:00

I’m creating a website and as I am thoroughly enjoying using SASS/Compass for organizing

  • 0

I’m creating a website and as I am thoroughly enjoying using SASS/Compass for organizing my CSS, I came to the idea of making my website themable.

At first, I was thinking to simply have a set of say 8 variables that represent the colors of a theme palette. Next, all CSS rules will use those colors, or lightened/darkened versions of it (for shadows, overlays, gradients and glows).

Then I came to the crazy idea of having a single theme base color, after which the rest of the palette is calculated from that. For example:

enter image description here

In this tool, I picked a single base color (the green at the inside of the circle), after which it generated a full color palette based on that (see right), in this case it is an “analogic” color scheme.

My question is if the alghoritm in use by this tool can be replicated in SASS, so that I can have a single configurable color, whilst SASS calculates the rest of the color scheme.

I know some of you may doubt the usefulness of this exercise, but I think of it as a fun experiment.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    For one thing, that color wheel is incorrect. The complementary color of red is cyan, not green. Also, The correct term is ‘analogous’, not ‘analogic’. I personally think this website is better.

    To create a basic analogous color scheme, the first thing you need to have is a method to convert colors to and from HSL (or similar hue-based) form. Assuming you have this, the basic algorithm for the analogous 3-color scheme is:

    Inputs: BaseColor, HueVariation

Color1 = BaseColor
Color2 = ColorFromHSL(Hue(BaseColor) + HueVariation, Saturation(BaseColor), Lightness(BaseColor))
Color3 = ColorFromHSL(Hue(BaseColor) - HueVariation, Saturation(BaseColor), Lightness(BaseColor))

    Wikipedia has more information.

    • 0