CSS is basically referred to as a language in accordance with a suite of property-value pairs. You choose a component, outline the homes, and write types for it. There’s not anything improper with this way, however CSS has advanced so much not too long ago, and we’ve extra powerful options, like variables, math formulation, conditional good judgment, and a number of recent pseudo selectors, simply to call a couple of.

What if I inform you we will be able to additionally use CSS to create an array? Extra exactly, we will be able to create an array of colours. Don’t attempt to seek MDN or the specification as a result of this isn’t a brand new CSS function however a mixture of what we have already got. It’s like we’re remixing CSS options into one thing that feels new and other.

As an example, how cool would it not be to outline a variable with a comma-separated array of colour values:

--colors: purple, blue, inexperienced, pink;

Even cooler is with the ability to alternate an index variable to make a choice simplest the colour we’d like from the array. I do know this concept would possibly sound not possible, nevertheless it is imaginable — with some barriers, after all, and we’ll get to these.

Sufficient suspense. Let’s soar directly into the code!

An Array Of Two Colours

We will be able to first get started with a elementary use case with two colours outlined in a variable:

--colors: black, white;

For this one, I can depend at the new color-mix() serve as. MDN has a pleasant method of explaining how the serve as works:

The color-mix() purposeful notation takes two <colour> values and returns the results of blending them in a given colorspace via a given quantity.

The trick isn’t to make use of color-mix() for its designed goal — blending colours — however to make use of it as a substitute to go back some of the two colours in its argument listing.

:root {
  --colors: black, white; /* outline an array of colour values */
  --i: 0; 
  
  --_color: color-mix(in hsl, var(--colors) calc(var(--i) * 100%));
}

frame {
  colour: var(--_color);
}

Thus far, all we’ve performed is assign the array of colours to a --colors variable, then replace the index, --i, to make a choice the colours. The index begins from 0, so it’s both 0 or 1, more or less like a Boolean take a look at. The code would possibly glance a little bit advanced, nevertheless it turns into transparent if we exchange the variables with their values. As an example, when i=0:

--_color: color-mix(in hsl, black, white 0%);

This ends up in black since the quantity of white is 0%. We blended 100% black with 0% white to get forged black. When i=1:

--_color: color-mix(in hsl, black, white 100%);

I wager you recognize what occurs. The result’s forged white since the quantity of white is 100% whilst black is 0%.

Consider it: We simply created a colour transfer between two colours the usage of a easy CSS trick. This kind of method can also be useful if, say, you need so as to add a dismal mode for your web page’s design. You outline each colours within the similar variable.

In that demo, I simplest replace one variable, --i, to change between darkish and light-weight modes.

If you’re questioning what the hsl within the color-mix() serve as is doing, it’s the process used to combine the 2 colours. In our case, it serves no goal since we don’t seem to be in fact blending colours. So, you’ll be able to use any manner right here, whether or not sRGB, HSL, OKLCH, OKLAB, or no matter you desire to. No matter it’s, don’t overlook it as a result of this can be a required price in color-mix().

An Array Of N Colours

Let’s transfer to the thrilling phase. I’ll create a multi-value array of colours and variables for it:

--colors: purple, blue, inexperienced, pink; /* colour array */
--n: 4; /* duration of the array  */
--i: 0; /* index of the colour [0 to N-1] */

Understand the variable, --n, which is new. I’m the usage of it to outline the collection of colours within the array, i.e., its duration. The index variable is in large part the similar as ahead of, however it will possibly move as much as N-1 to make a choice the wanted colour.

I’m going to switch issues up for you and create a linear gradient background as a substitute of the usage of color-mix(). Someone who is aware of me smartly is completely no longer stunned via this as I achieve for gradients at all times.

background-image: linear-gradient(var(--colors));

Right here’s the gradient that renders. Not anything advanced to this point.

The trick is manipulating the gradient to extract the colours in accordance with the index. By means of definition, a gradient transitions between colours, however we’ve a minimum of a couple of pixels of the particular colours outlined within the array whilst we’ve a combination or mix of colours in between them. On the very peak, we will be able to in finding purple. On the very backside, we will be able to in finding pink. And so forth.

What if we building up the dimensions of the gradient to one thing actually large?

Did you notice that? By means of expanding the peak of the gradient, it’s like we’re zooming into the purple colour. We simplest see the purple portion whilst the remainder of the gradient is clipped out.

What if we building up the gradient via an element of infinity? Sure, we will be able to do this in CSS!

background-image: linear-gradient(var(--colors));
background-size: 100% calc(1px * infinity);

Now the field is forged purple! In different phrases, we’ve decided on purple from the gradient of colours which can be outlined within the --colors array. If we need to alternate colour, we regulate the location of the gradient.

By means of default, the gradient is situated on the top-left fringe of the part, 0 0. That’s why we simplest see the highest colour, purple. Now we will be able to use the index variable, --i, to regulate the gradient’s function and get no matter colour we wish from the array.

background-position: 0 calc(var(--i) * 100% / (var(--n) - 1));

Right here’s all the code:

.field {
  --colors: purple, blue, inexperienced, pink; /* colour array */
  --n: 4; /* duration of the array */
  --i: 0; /* index of the colour [0 to N-1] */
  
  background:
    linear-gradient(var(--colors)) no-repeat
     0 calc(var(--i)*100%/(var(--n) - 1)) /* function */
     /100% calc(1px*infinity);  /* length */
}

Observe: I used no-repeat within the background estate. That key phrase will have to be needless, however for some reason why, it’s no longer operating with out it. It could be that browsers can not repeat gradients that experience an unlimited length.

The next demo illustrates the trick:

Cool, proper? We carried out an array of colours in CSS! And the code isn’t that advanced. A easy background trick and a couple of variables are all we had to make it occur.

Let’s Toughen Indexing

Let’s push the restrict a bit of and toughen our paintings. Within the earlier instance, the index, --i, is restricted to the variability [0 N-1], which is sensible. Any price out of doors that vary will lead to no colour. What if we take away this restriction and make allowance the index to take any price?

Take a look at this out:

Move forward and play with the demo. You’ll be able to specify any integer — even a unfavorable one — and the browser will carry out a modulo operation that converts the price within the [0 N-1] vary. As an example, 21 mod 4 = 1, leading to the second one colour price within the array; -5 mod 4 = 3, which produces the fourth colour price within the array.

In truth, the browser isn’t doing any mod operation, however I exploit a special implementation the usage of a conical gradient that simulates a modulo operation:

background:
  conic-gradient(
    from calc((var(--i) + 1) * -1turn / var(--n)), 
    var(--colors) 0,var(--colors))
    peak/calc(1px * infinity) calc(1px * infinity) no-repeat;

First, we outline the conic gradient with the colours from the array:

background: conic-gradient(var(--colors) 0,var(--colors))

Observe that the variable is used two times. I did that to make sure the primary colour is equal to the closing one so there may be continuity within the shade.

That code principally boils right down to this conical gradient background:

background: conic-gradient(purple, blue, inexperienced, pink 0, purple, blue, inexperienced, pink)

By means of including 0 to the closing colour (pink) and leaving the whole thing else as-is, it’s like the ones different colours ahead of pink don’t exist. That suggests the gradient is identical to this:

background: conic-gradient(pink 0, purple, blue, inexperienced, pink)

After that, we will be able to make our gradient very large via, as soon as once more, multiplying it via infinity. This time, infinity calculates the gradient’s width and top.

background-size: calc(1px * infinity) calc(1px * infinity);

We position the gradient on the peak to zoom in at the peak colour:

background-position: peak;

Then we rotate the gradient to make a choice the colour we wish:

from calc((var(--i) + 1) * -1turn / var(--n))

It’s like having a colour wheel the place we simplest show a couple of pixels from the highest.

Since what we’ve is largely a colour wheel, we will be able to flip it as time and again as we wish in any course and at all times get a colour. This trick lets in us to make use of any price we wish for the index! After a complete rotation, we get again to the similar colour.

Observe that CSS does have a mod() serve as. So, as a substitute of the conical gradient implementation, we will be able to additionally replace the primary manner that makes use of the linear gradient like this:

.field {
  --colors: purple, blue, inexperienced, pink; /* colour array */
  --n: 4; /* array duration  */
  --i: 0; /* index  */
   
  --_i: mod(var(--i), var(--n)); /* the used index */
  background:
    linear-gradient(var(--colors)) no-repeat
     0 calc(var(--_i) * 100% / (var(--n) - 1)) /* function */
     / 100% calc(1px * infinity);  /* length */
}

I didn’t take a look at the above code as a result of beef up for mod() continues to be low for this sort of serve as. That mentioned, you’ll be able to stay this concept someplace, because it could be useful one day and is most likely extra intuitive than the conic gradient way.

What Are The restrictions?

First, I believe this way extra of a hack than a CSS function. So, use it cautiously. I’m no longer utterly positive if there are implications to multiplying issues via infinity. Forcing the browser to make use of an enormous gradient can most likely result in a efficiency lag or, worse, accessibility problems. Should you spot one thing, please percentage them within the feedback so I will be able to regulate this accordingly.

Every other limitation is that this will simplest be used with the background estate. Shall we conquer this with different tips, like the usage of background-clip: textual content to govern textual content colour. However since this makes use of gradients, that are simplest supported via particular homes, utilization is restricted.

The 2-color manner is secure because it doesn’t depend on any hack. I don’t see any drawbacks to the usage of it on actual initiatives.

Wrapping Up

I am hoping you loved this little CSS experimentation. We went from a easy two-color transfer to an array of colours with out including a lot code. Now if anyone tells you that CSS isn’t a programming language, you’ll be able to inform them, “Whats up, we’ve arrays!”

Now it’s your flip. Please display me what you’re going to construct the usage of this trick. I can be ready to peer what you’re making, so percentage beneath!

Additional Studying On SmashingMag

(gg, yk)