Colore

About | Details | Instructions

Links

[Repo] | [Live]

About

A training project in which you can

• check the contrast of colours
• choose a palette of colours
• get colours from an image (it might take quite a time)

Stack

• React
• React-router-dom

Some details

Translating of colour system

Here are several algorithms that translate colour from one system to another.
For every algorithm:
For each colour we translate hex value to rgb, where each parameter must be $\ \in[0,1]$.
$\ R’G’B’=[R/255,G/255,B/255]$.

RGB to HSL

Calculate Max and Min value in a R’G’B’: $\ Cmax=Math.max(R’,G’,B’)$.
$\ Cmin=Math.min(R’,G’,B’)$.

Then calculate the delta: $\ \Delta=(Cmax+Cmin)/2$.

To calculate the Hue:

$$Hue= \begin{cases} 60\degree* (\dfrac{G - B}{\Delta} mod 6) & \quad \text{R' is a max}\\\ 60\degree* (\dfrac{B-R}{\Delta} + 2) & \quad \text{G' is a max}\\\ 60\degree* (\dfrac{R-G}{\Delta} + 4) & \quad \text{B' is a max}\\\ 0 & \quad \text{otherwise} \end{cases}$$

To calculate the Saturation:

$$Saturation= \begin{cases} 0 & \quad{\Delta= 0}\\\ \dfrac{\Delta}{1- |2*L-1|} & \quad \text{otherwise}\\\ \end{cases}$$

To calculate the Lightness: $\ L=(Cmax + Cmin) / 2$

RGB to CMYK

Calculate the black colour: $\ K=Math.max(R, G, B) $.
Calculate the cyan colour: $\ C = (1 - R - K) / (1 - K) $.
Calculate the magenda colour: $\ M =(1 - G - K) / (1 - K) $.
Calculate the yellow colour: $\ Y =(1 - B - K) / (1 - K) $.

Work with image

Using FileReader we get information about the image file. To be precise, it is an array of all pixels containing information about the image. So, this is RGBA (rgb + alpha channel).
For example, if we have an image with parameters ${10} \times {15}$, we will get ${10} \times {15}\times {4}= 600$ values.

When we get the RGB array (in this case), we need to process it. So, without a server that could probably check every value, we will check some of them using the median cut algorithm.

Median cut algorithm.

1. Determine the maximum depth, for example 8;
2. Using the biggestColourRange method, we get the largest range of colour channels (red, green or blue);
3. Using recursion we will sort the array by its channel (red, green or blue);
4. Divide the array in half;
5. Repeat this (2-4 steps) until we reach our maximum depth;
6. As a result we will get something like 256 arrays (because of the depth = 8, $\ 2^8=256$);
7. For each array we will calculate the average rgb value for each channel.

Calculating the contrast

It is based on two colours: text colour and background colour.
This is the ratio of the luminosity of one colour to another:

$\dfrac{L1 + 0.05}{L2 + 0.05}$

Where L1 is lightest and L2 is darkest.

For each colour we translate hex value to rgb, where each parameter must be $\ \in[0,1] $:

$$[R', G', B']=[R/255, G/255, B/255]$$

And the luminance for each colour for each channel:

$$[R'', G'', B'']= \begin{cases} \dfrac{channel}{12.92} & \quad {channel <= 0.03928}\\\ \\\ (\dfrac{channel + 0.055}{1.055})^x, x=2.4 & \quad \text{otherwise} \end{cases}$$

Where $\ channel\in [R’,G’,B’] $
Now we can calculate Luminocity:

$$L=R'' * 0.2126 + G'' * 0.7152 + B ''* 0.0722$$

[More info] (Link to w3)

Colour

Each colour consists of three channels: red, green and blue.

• Tints is when we add white colour
• Shades is when we add black colour
• Tones is when we add gray colour

Factor

In case of Tints and Shades we need to calculate factor.
In this case, the factor (in this example I took simpler numbers to simplify the calculation) is:

$$f= \begin{cases} 0\\\ 0.25\\\ 0.5\\\ 0.75\\\ 1 \end{cases}$$

Tints

For each factor we will calculate the new colour:

$$[R',G', B']= \begin{cases} R+(255-R)*f\\\ G+(255-G)*f\\\ B+(255-B)*f \end{cases}$$

Shades

For each factor we will calculate the new colour:

$$[R',G', B']= \begin{cases} R*(1-f)\\\ G*(1-f)\\\ B*(1-f) \end{cases}$$

Tones

The basic idea here is that we have a range for each channel from 0 to 256. To get a range of tones, we need to add a gray colour to it.
So we divide our range in half (256/2=128).

We took each channel from this number ($\ [128-R, 128-G, 128-B]$). And divide by the number of the final colour (so if I need only 8 colours, I'll divide by 7, because we have the first one already).

And I will add this number to the current channel. So every new colour is based on previous one.

For example: For the colour #80E380 RGB will be $\ [128,227,128] $ (<- Our start colour ).
Then we took 128 from each channel and divide into len (7 in our case):

$$[R',G', B']= \begin{cases} \dfrac {128-R}{len}=0\\ \\ \dfrac {128-G}{len}=-14\\ \\ \dfrac {128-B}{len}=0\\ \end{cases}\\$$

And Add it to our current Colour (and change it to new one):

$$[R,G, B]= \begin{cases} R+R'=128\\ G+G'=213\\ B+B'=128\\ \end{cases}\\$$

And the formula is:

$$[R,G,B]= \begin{cases} R+\dfrac{128-R}{len}\\\ \\\ G+\dfrac{128-R}{len}\\\ \\\ B+\dfrac{128-R}{len}\\\ \end{cases}$$

Where $\ len = colours.length-1$

Instructions

Desctiption	Command
Installing all the necessary dependencies	npm install
Running the app in the development mode	npm run dev