https://github.com/gusbemacbe/color-mixer-telinkrin
Mix three colours of Telinkrin to get Telinkrin-coloured hex
https://github.com/gusbemacbe/color-mixer-telinkrin
Last synced: 29 days ago
JSON representation
Mix three colours of Telinkrin to get Telinkrin-coloured hex
- Host: GitHub
- URL: https://github.com/gusbemacbe/color-mixer-telinkrin
- Owner: gusbemacbe
- License: agpl-3.0
- Created: 2019-02-10T19:17:00.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-24T14:32:37.000Z (about 6 years ago)
- Last Synced: 2025-02-06T01:41:48.033Z (3 months ago)
- Language: HTML
- Homepage: https://gusbemacbe.github.io/color-mixer-telinkrin/
- Size: 926 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
This plugin allows to convert and overwrite the original colours of [Suru++ 25](https://github.com/gusbemacbe/suru-plus) to Telinkrin colours of [Suru++ Telinkrin](https://github.com/gusbemacbe/suru-plus-telinkrin).
## **How does it work?**
The SVG Filter will show you how to use `feComponentTransfer` to create a colour filter effect, i.e., Telinkrin colour filter effect.
According to Soueidan (2019), ‘the `feComponentTransfer` primitive allows you to modify each of the R, G, B and A components present in a pixel. In other words, feComponentTransfer allows the independent manipulation of each color channel, as well as the alpha channel, in the input element.’
To recreate the colour effect in SVG, you need to desaturate firstly, using the `` filter primitive. The `feColorMatrix` provides a colour matrix that specifies the amount of red, green, and blue. By providing equal amounts of these three components, the matrix is created to convert into a grayscale version of itself:
```xml
```
In the following result, the original colours of Suru++ were converted into grayscale colours by the middle of the `feColorMatrix` filter:
In the `feColorMatrix`, understand what these three 0.33s with three 0 alphas and last two 0s, with one 1 and another 0 alphas:
```
R = 0.33 0.33 0.33 0 0
G = 0.33 0.33 0.33 0 0
B = 0.33 0.33 0.33 0 0
A = 0 0 0 1 0"
```
But still, what are 0.33s and 0s? 0.33s are grey and 0s are black. But I checked that in colour picker and it does not exist. Well, it is a discrete mathematics matrix classified as `tableValues`. I explain the matrix:
Then it is `rgba(84, 84, 84)`, you can check this real RGBA in the colour picker, you will see that it is exactly grey (`#545454`), that is a grayscale colour which gives the filter effect.
As for 0s, as you know very well that it is easy,  gives `rgba(0, 0, 0, 1)` which totally black and non-transparent (alpha) and  gives `rgba(0, 0, 0, 0)` which is totally black, but totally transparent (alpha).
Now that the original colours of Suru++ are essentially made of a gray gradient, we want to create a Telinkrin gradient map to map the gray gradient to.
As Soueidan said, suppose we want to use the following three colours for our Telinkrin effect:
These three colours will be used to create a gradient map:
...that we are going to map our grayscale map to.
Soueidan says that, in order to use these colours in `feComponentTransfer`, we need to get the values of the R, G, and B channels of each colour. Since `tableValues are provided` in fractions, we will need to convert the RGB values to fractions. Colour values are usually in the range [0, 255]. To convert these values to fractions, we need to divide them by 255.
For example, 1st colour (`#356170`) has the following RGB values:
Converted to fractions, these values are now equal to:
Similarly, the 2nd colour (`#6da5b7`) values resolve to:
And 3rd colour (`#b2ced6`):
As we already have these three colour values, let us create our gradient map, applying to `tableValues`, to create a range:
```xml
```
Understand now how the SVG filter works and is applied:
1. Although 0.33s and 0s are grey and black, they are considered grayscale colours, but they also mean brightness, hue and saturation to distinguish the original colours.
2. As we want to ‘telinkrise’ the original colour `#00ff00` to #5a8d9e, we mix these `feColorMatrix` and `feComponentTransfer` colours to convert.
Here is the result:
Here is the full SVG filter codes:
```xml
```
## Demo 1
You can check the HTML file containing the SVG codes: [Demo 1](https://gusbemacbe.github.io/color-mixer-telinkrin/demo1.html)
### Advantages
This SVG filter distinguishes two different black shapes, as `#000000` and `#000009` and converts to different Telinkrin colours.
As you want to create your icons theme according to three shapes of blue, you can use this SVG filter to overlay quickly all icons without having to replace more than 850 colours for others colours.
### Disadvantages
As SVG filter does not convert the original colours to real hexadecimal codes of Telinkrin colours, then you have to pick colour by colour to copy the hexadecimal code to the list of colours for overwriting the original colours of Suru++.
KDE does not support SVG filter feature, so you have to convert SVG of all icons to PNG for KDE.
## Demo 2
As we want to get rid of colour-picking colour by colour and know KDE does not support it, we have to overwrite or replace all colours of all Suru++ icons, using `sed --in-place --follow-symlinks -e 's/original_colour/telinkrin_colour/g`, we created JavaScript codes that will use HSL of Telinkrin colour to convert the original colours to real hexadecimal codes once in a while, so we can copy all hexadecimal codes once in a while, without having to colour-pick colour by colour. The original colours are converted according to the **light** of Telinkrin HSL. Here is the [demo 2](https://gusbemacbe.github.io/color-mixer-telinkrin/demo2.html)
### Disadvantages
Unfortunately JavaScript codes allow only **one** of three Telinkrin colours, so we have to pick one, and as according to the **light** of Telinkrin HSL, it does not distinguish two different black shapes `#000000` and `#000009` and converts to the **same** Telinkrin colour. It will prejudice the icons.
## Demo 3
There are CSS filters as `mix-blend-mode: color` and `filter: grayscale(100%);`.
It is important that `background: #6DA5B7; mix-blend-mode: color` works only with images, and not with `div` with the tag `background-color: #00f00`.
As we want to use `filter` to give Telinkrin effect, we need to convert the colour to CSS filter, then we refer to [How to transform black into any given color using only CSS filters](https://stackoverflow.com/a/43960991) whose example of codes provided by MultiplyByZer0. Apply the Telinkrin color RGB (`rgb(109, 165, 183)`) in the [demo 3](https://gusbemacbe.github.io/color-mixer-telinkrin/demo3.html).
Click to compute filters, we get `filter: invert(69%) sepia(19%) saturate(676%) hue-rotate(148deg) brightness(86%) contrast(90%);`, then like:
```css
.telinkrin
{
-webkit-filter: invert(69%) sepia(19%) saturate(676%) hue-rotate(148deg) brightness(86%) contrast(90%);
-moz-filter: invert(69%) sepia(19%) saturate(676%) hue-rotate(148deg) brightness(86%) contrast(90%);
-o-filter: invert(69%) sepia(19%) saturate(676%) hue-rotate(148deg) brightness(86%) contrast(90%);
-ms-filter: invert(69%) sepia(19%) saturate(676%) hue-rotate(148deg) brightness(86%) contrast(90%);
filter: invert(69%) sepia(19%) saturate(676%) hue-rotate(148deg) brightness(86%) contrast(90%);
}
```
Converting the original colours to produce Telinkrin colours, and we also must add `grayscale(100%)` to it. Here is the [demo 4](https://gusbemacbe.github.io/color-mixer-telinkrin/demo4.html).
### Disadvantages
You can see that the Telinkrin colours of demo 1 and the 1st colour of demo 4 are similar, but some colours are different. It is impossible apply three colours in the same filter. Them demo 1 is very accurate.
Like demo 1, it does not convert to real hexadecimal colours, so you have to colour-pick colour by colour. The demo 2 must be useful so you can copy quickly all hexadecimal codes, but due to HSL of Telinkrin colour, two or three black shapes are converted to the same hexadecimal code, what is bad for the icons.
## References
SOUEIDAN Sarah, ‘SVG Filter Effects: Duotone Images with <feComponentTransfer>’, https://tympanus.net/codrops/2019/02/05/svg-filter-effects-duotone-images-with-fecomponenttransfer/, February 2019, (accessed February 11, 2019).
### Questions
* [How to transform black into any given colour using only CSS filters](https://stackoverflow.com/questions/42966641/how-to-transform-black-into-any-given-color-using-only-css-filters/43960991)
* [Mixing two RGB color vectors to get resultant](https://stackoverflow.com/questions/1892020/mixing-two-rgb-color-vectors-to-get-resultant)
* [Mixing two colors “naturally” in Javascript](https://stackoverflow.com/questions/14819058/mixing-two-colors-naturally-in-javascript)
### Plugins
* [PineTools – Original to grayscale converter](https://pinetools.com/greyscale-desaturate-color)
* [SVG Gradient Map](https://yoksel.github.io/svg-gradient-map/)
## Credits
- [Sakal](https://hashnode.com/Sakal)
- [Hipkiss](https://hashnode.com/hipkiss)
- [Daniel Ruiz de Alegría](https://github.com/daniruiz)
## Licence
© 2019 GPL3 Colour Telinkriser by [Daniel Ruiz de Alegría](https://drasite.com) \.