2

I want to make a theme where a user can input one hexadecimal color for a theme. but a theme has made by various pre-defined color. So my question is that how to know offset between two colors code and using that offset generate a new color,

So for example:

If a user selects color code #110360 then theme header color should be #1c3ea4. so now how to know offset between it, so if user change color then calculates a header color using that offset.

I am using sass to design theme

Thank you

jay padaliya
  • 624
  • 6
  • 12
  • 1
    Please show what you have tried to do it so far. I'm thinking that a simple JavaScript calculation to determine the difference in every color (R, G, and B) should do it. – Jonathan Lam May 01 '18 at 13:22
  • 1
    For example, the offset for red would be `parseInt(colorCode.slice(1, 3), 16) - parseInt(headerColor.slice(1, 3), 16))`, and the same for green and blue – Jonathan Lam May 01 '18 at 13:23
  • 1
    Colours are tridimentional, so a offset doesn't get a unique colour. I think you should convert to HSL space, and from calculate offset from there. [There are already useful function in sass: darken, lighten, desaturate, ..., I do not know for hue, you may use hue and hsl function. 'mix' could also help] – Giacomo Catenazzi May 01 '18 at 15:48

1 Answers1

1

You will have to use Javascript for something like this unless you are able to compile your Sass on the fly when a user chooses their base color.

The SO answer here seems to have what you're looking for: https://stackoverflow.com/a/9821101/5463842

Kodie Grantham
  • 1,963
  • 2
  • 17
  • 27