CSS Colour Capabilities | CSS-Tips

rgb() makes use of three values, r, g, and b which specifies the redness, greenness, and blueness of the colour you need.

All three values are non-negative, and they go from 0 to 255.

.component {
  colour: rgb(245 123 151);
}

It additionally has an non-obligatory worth (the alpha worth) preceded by a ahead slash. It determines the extent of opacity for the colour, which fits from 0 (or 0%) for a very clear colour, to 1 (or 100%) for a completely opaque one.

.component {
  colour: rgb(245 123 151 / 20%);
}

There are two methods you may write inside rgb(). Both utilizing the legacy syntax that separates the three values with commas or the fashionable syntax that separates every with areas.

You wish to mix the 2 syntax codecs, sure? That’s a no-no. It received’t even work.

/* This might not work */
.component {
  colour: rgb(225, 245, 200 / 0.5);
}

/* Neither will this */
.component {
  colour: rgb(225 245 200, 0.5);
}

/* Or this */
.component {
  colour: rgb(225, 245 200 / 0.5);
}

However, following one constant format will do the trick, so try this as an alternative. Both you’re so used to the previous syntax and it’s exhausting so that you can transfer on, proceed to make use of the legacy syntax, otherwise you’re one who’s prepared to try to follow one thing new, use the fashionable syntax.

/* Legitimate (Fashionable syntax)  */
.component {
  colour: rgb(245 245 255 / 0.5);
}

/* Legitimate (Legacy syntax)  */
.component {
  colour: rgb(245, 245, 255, 0.5);
}

rgba() is basically the identical as rgb() with an additional alpha worth used for transparency.

By way of syntax, the rgba() operate might be written in two methods:

• Comma-separated and with out percentages
• Area-separated, with the alpha worth written after a ahead slash (/)

.component {
  colour: rgba(100, 50, 0, 0.5);
}

.component {
  colour: rgba(100 50 0 / 0.5);
}

So, what’s the distinction between rgba() and rgb()?

Breaking information! There isn’t a distinction. Initially, solely rgba() may set the alpha worth for opacity, however in recent times, rgb() now helps transparency utilizing the ahead slash (/) earlier than the alpha worth.

rgb() additionally helps legacy syntax (commas) and fashionable syntax (areas), so there’s virtually no motive to make use of rgba() anymore; it’s even famous as a CSS mistake by people at W3C.

In a nutshell, rgb() and rgba() are the identical, so simply use rgb().

/* This works */
.element-1 {
    colour: rgba(250 30 45 / 0.8);
}

/* And this works too, so why not simply use this? */
.element-2 {
    colour: rgb(250 30 45 / 0.8);
}

The hexadecimal CSS colour code is a 3, 4, 6, or 8 (being the utmost) digit code for colours in sRGB. It’s principally a shorter method of writing rgb(). The hexadecimal colour (or hex colour) begins with a hash token (#) after which a hexadecimal quantity, which suggests it goes from 0 to 9 after which skips to letters a to f (a being 10, b being 11, and so forth, as much as f for 15).

Within the hexadecimal colour system, the 6-digit fashion is completed in pairs. Every pair represents purple (RR), blue (BB), and inexperienced (GG).

Every worth within the pair can go from 00 to FF, which it’s equal to 255 in rgb().

Discover how I used caps for the letters (F) and never lowercase letters like I did beforehand? Properly, that’s as a result of hexadecimals should not case-sensitive in CSS, so that you don’t have to fret about uppercase or lowercase letters when coping with hexadecimal colours.

• 3-digit hexadecimal. The three-digit hexadecimal system is a shorter method of writing the 6-digit hexadecimal system, the place every worth represents the colour’s redness, greenness, and blueness, respectively

.component {
  colour: #abc;
}

In actuality, every worth within the 3-digit system is duplicated after which translated to a visual colour

.component {
  colour: #abc; /* Equals #AABBCC  */
}

BUT, this severely limits the colours you may set. What if I wish to goal the colour 213 within the purple area, or how would I get a blue of worth 103? It’s unimaginable. That’s why you may solely get a complete variety of 4,096 colours right here versus the 17 million within the 6-digit notation. Nonetheless, if you need a quick method of getting a sure colour in hexadecimal with out having to fret in regards to the thousands and thousands of different colours, use the 3-digit notation.

• 4-digit hexadecimal. That is much like the 3-digit hexadecimal notation besides it contains the non-obligatory alpha worth for opacity. It’s a shorter method of writing the 8-digit hexadecimal which additionally implies that all values listed here are repeated as soon as throughout colour translation.

.component {
  colour: #ABCD2;
}

For the alpha worth, 0 represents 00 (a completely clear colour) and F represents FF (a completely opaque colour).

.component {
  colour: #abcd; /* Identical as #AABBCCDD */
}

• 6-digit hexadecimal. The 6-digit hexadecimal system simply specifies a hexadecimal colour’s redness, blueness, and greenness with out its alpha worth for colour opacity.

.component {
  colour: #abcdef;
}

• 8-digit hexadecimal. This 8-digit hexadecimal system specifies hexadecimal colour’s redness, blueness, greenness, and its alpha worth for colour opacity. Principally, it’s full for colour management in sRGB.

.component {
  colour: #faded101;
}

Each hsl() and rgb() reside within the sRGB area, however they entry colours otherwise. And whereas the consensus is that hsl() is much extra intuitive than rgb(), all of it boils all the way down to your choice.

hsl() takes three values: h, s, and l, which set its hue, saturation, and lightness, respectively.

• The hue units the bottom colour and represents a course within the colour wheel, so it’s written in angles from 0deg to 360deg.
• The saturation units how a lot of the bottom colour is current and goes from 0 (or 0%) to 100 (or 100%).
• The lightness represents how near white or black the colour will get.

One cool factor: the hue angle goes from (0deg–360deg), however we’d as effectively use destructive angles or angles above 360deg, and they’re going to circle again to the appropriate hue. Particularly helpful for infinite colour animation. Fairly neat, proper?

Plus, you may simply get a complementary colour from the other angle (i.e., including 180deg to the present hue) on the colour wheel.

/* Present colour */
.component {
  colour: hsl(120deg 40 60 / 0.8);
}

/* Complementary colour */
.component {
  colour: hsl(300deg 40 60 / 0.8);
}

You wish to mix the 2 syntax codecs like in rgb(), sure? That’s additionally a no-no. It received’t work.

/* This might not work */
.component {
  colour: hsl(130deg, 50, 20 / 0.5);
}

/* Neither will this */
.component {
  colour: hsl(130deg 50 20, 0.5);
}

/* Or this */
.component {
  colour: hsl(130deg 50, 20 / 0.5);
}

As a substitute, follow one of many syntaxes, like in rgb():

/* Legitimate (Fashionable syntax)  */ 
.component {
  colour: hsl(130deg 50 20 / 0.5);
}

/* Legitimate (Fashionable syntax)  */ 
.component {
  colour: hsl(130deg, 50, 20, 0.5);
}

hsla() is basically the identical with hsl(). It makes use of three values to symbolize its colour’s hue (h), saturation (s), and lightness (l), and sure (once more), an alpha worth for transparency (a). We are able to write hsla() in two other ways:

• Comma separated
• Area separated, with the alpha worth written after a ahead slash (/)

.component {
  colour: hsla(120deg, 100%, 50%, 0.5);
}

.component {
  colour: hsla(120deg 100% 50% / 0.5);
}

So, what’s the distinction between hsla() and hsl()?

Breaking information (once more)! They’re the identical. hsl() and hsla() each:

• Assist legacy and fashionable syntax
• Have the facility to extend or cut back colour opacity

So, why does hsla() nonetheless exist? Properly, other than being one of many errors of CSS, many purposes on the internet nonetheless use hsla() since there wasn’t a solution to set opacity with hsl() when it was first conceived.

My recommendation: simply use hsl(). It’s the identical as hsla() however much less to write down.

/* This works */
.element-1 {
    colour: hsla(120deg 80 90 / 0.8);
}

/* And this works too, so why not simply use this? */
.element-2 {
    colour: hsl(120deg 80 90 / 0.8);
}

hwb() additionally makes use of hue for its first worth, however as an alternative takes two values for whiteness and blackness to find out how your colours will come out (and sure, it additionally does have an non-obligatory transparency worth, a, similar to rgb() and hsl()).

.component {
  colour: hwb(80deg 20 50 / 0.5);
}

• The primary worth h is similar because the hue angle in hsl(), which represents the colour place within the colour wheel from 0 (or 0deg) to 360 (or 360deg).
• The second worth, w, represents the whiteness within the colour. It ranges from 0/0% (no white) to 100/100% (full white if b is 0).
• The third worth, b, represents the blackness within the colour. It ranges from 0/0% (no black) to 100/100% (totally black if w is 0).
• The ultimate (non-obligatory) worth is the alpha worth, a, for the colour’s opacity, preceded by a ahead slash The worth’s vary is from 0.0 (or 0%) to 1.0 (or 100%).

Though this colour operate is barely used, it’s fully legitimate to make use of, so it’s as much as private choice.

Named colours

CSS named colours are hardcoded key phrases representing predefined colours in sRGB. You’re most likely used to the essential: white, blue, black, purple, however there are much more, totaling 147 in all, which are outlined within the Colour Modules Degree 4 specification.

Named colours are sometimes discouraged as a result of their names don’t at all times match what colour you’d count on.

For this colour operate, we have now three axes in a space-separated listing to find out how the colour is ready.

.component {
    colour: lab(50 20 20 / 0.9);
}

• The primary worth l represents the diploma of whiteness to blackness of the colour. Its vary being 0/(or 0%) (black) to 100 (or 100%) (white).
• The second worth a represents the diploma of greenness to redness of the colour. Its vary being from -125/0% (inexperienced) to125 (or 100%) (purple).
• The third worth b represents the diploma of blueness to yellowness of the colour. Its vary can be from -125 (or 0%) (blue) to 125 (or 100%) (purple).
• The fourth and remaining worth is its alpha worth for colour’s opacity. The worth’s vary is from 0.0 (or 0%) to 1.0 (or 100%).

That is helpful once you’re making an attempt to acquire new colours and supply help for screens that do help them. Truly, most screens and all main browsers now help lab(), so you ought to be good.

The CSS lab() colour operate’s a and b values are literally unbounded. That means they don’t technically have an higher or decrease restrict. However, at follow, these are their limits in line with the spec.

The CSS lch() colour operate is alleged to be higher and extra intuitive than lab().

.component {
    colour: lch(10 30 300deg);
}

They each use the identical colour area, however as an alternative of getting l, a, and b, lch makes use of lightness, chroma, and hue.

• The primary worth l represents the diploma of whiteness to blackness of the colour. Its vary being 0 (or 0%) (black) to 100 (or 100%) (white).
• The second worth c represents the colour’s chroma (which is like saturation). Its vary being from 0 (or 100%) to 150 or (or 100%).
• The third worth h represents the colour hue. The worth’s vary can be from 0 (or 0deg) to 360 (or 360deg).
• The fourth and remaining worth is its alpha worth for colour’s opacity. The worth’s vary is from 0.0 (or 0%) to 1.0 (or 100%).

The CSS lch() colour operate’s chroma (c) worth is definitely unbounded. That means it doesn’t technically have an higher or decrease restrict. However, in follow, the chroma values above are the bounds in line with the spec.

The oklab() colour operate, similar to lab(), generates colours in line with their lightness, purple/inexperienced axis, blue/yellow axis, and an alpha worth for colour opacity. Additionally, the values for oklab() are completely different from that of lab() so please be careful for that.

.component {
  colour: oklab(30% 20% 10% / 0.9);
}

• The primary worth l represents the diploma of whiteness to blackness of the colour. Its vary being 0 (or 0%) (black) to 0.1 (or 100%) (white).
• The second worth a represents the diploma of greenness to redness of the colour. Its vary being from -0.4 (or -100%) (inexperienced) to 0.4 (or 100%) (purple).
• The third worth b represents the diploma of blueness to yellowness of the colour. The worth’s vary can be from -0.4 (or 0%) (blue) to 0.4 (or -100%) (purple).
• The fourth and remaining worth is its alpha worth for colour’s opacity. The worth’s vary is from 0.0 (or 0%) to 1.0 (or 100%).

Once more, this solves one of many points in lab which is perceptual uniformity so should you’re trying to make use of a greater different to lab, use oklab().

The CSS oklab() colour operate’s a and b values are literally unbounded. That means they don’t technically have an higher or decrease restrict. However, theoretically, these are the bounds for the values in line with the spec.

The oklch() colour operate, similar to lch(), generates colours in line with their lightness, chroma, hue, and an alpha worth for colour opacity. The primary distinction right here is that it solves the points current in lab() and lch().

.component {
  colour: oklch(40% 20% 100deg / 0.7);
}

• The primary worth l represents the diploma of whiteness to blackness of the colour. Its vary being 0.0 (or 0%) (black) to 1.0 (or 100%) (white).
• The second worth c represents the colour’s chroma. Its vary being from 0 (or 0%) to 0.4 (or 100%) (it theoretically doesn’t exceed 0.5).
• The third worth h represents the colour hue. The worth’s vary can be from 0 (or 0deg) to 360 (or 360deg).
• The fourth and remaining worth is its alpha worth for colour’s opacity. The worth’s vary is from 0.0 (or 0%) to 1.0 (or 100%).

The CSS oklch() colour operate’s chroma (c) worth is definitely unbounded. That means it doesn’t technically have an higher or decrease restrict. However, theoretically, the chroma values above are the bounds in line with the spec.