Solomon Eseme A software developer who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend. Follow me: Twitter, Facebook, LinkedIn, about.me

CSS Reference Guide: color

1 min read 485

CSS Reference Guide: Color Property

The CSS color property sets the foreground color of a text element or text decorations.

Jump ahead:


Demo

See the Pen
CSS Color Example
by Solomon Eseme (@kaperskyguru)
on CodePen.


Syntax

p.text {
  color: <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor
}

Values

The value of the CSS color property can be specified in many different ways. We review them in detail below.

Keywords

The CSS color property can take a keyword as its value. Its default value is the keyword currentcolor, which takes its value from the inherited value of the color property.

p.text {
  color: currentcolor;
}

We also have transparent, which is a color value that is not opaque but fully transparent and clear.

p.text {
  color: currentcolor | transparent
}

Named values

Named values are sometimes referred to as named colors. These are simply known named colors like red, green, etc. that have their hex values attached to them.

p.text {
  color: red | green | aqua | tan | rebeccapurple | etc
}

Hex values

A color’s hex value is represented as an alphanumeric string of six characters, preceded by the # character.

The first alphanumeric pair of the hex value represents the red value, the second pair of the value represents the green value, and the third pair represents the blue value in the RGB spectrum.

CSS also allows the use of three-character abbreviations to specify hex values. These values must always range from 00 to FF (for strings of six characters) or 0 to F (for strings of three characters).

We made a custom demo for .
No really. Click here to check it out.

p.text {
  color: #00FFFF // 00 => RED, FF => GREEN and FF => BLUE
}

div.text {
  color #eee // hex value can also be 3 values only. E => RED, E => GREEN and E => BLUE
}

RGB and RGBA values

RGB colors are represented by a comma-separated list of three values that denote the red, green, and blue values of the color, in that order. These three values can range from 0 to 2``5``5, or from 0% to 100%. By default, all RGB colors are opaque.

p.text {
 color : rgb(0, 255, 255);
}

p.text {
  color : rgb(0%, 100%, 100%);
}

The RGBA color value allows you to specify the opacity (or alpha) value of the color, where 0.0 represents fully transparent and 1 represents fully opaque. In this way, you can adjust the opacity of RGB colors.

p.text {
 color : rgb(0, 255, 255);
}

p.text {
  color : rgba(0%, 100%, 100%, 0.8);
}

HSL and HSLA values

HSL colors are represented by three values that the denote the hue (ranging from 0 to 360), saturation (ranging from 0% to 100% ), and lightness ( ranging from 0% to 100% ) of a color. By default, all HSL colors are opaque.

p.text {
  color: hsl(180, 100%, 50%);
}

The HSLA value allows you to specify the opacity (or alpha) value of the color, where 0.0 represents fully transparent and 1 represent fully opaque. In this way, you can adjust the opacity of HSL colors.

p.text {
  color: hsla(180, 100%, 50%, 0.5);
}

 

You come here a lot! We hope you enjoy the LogRocket blog. Could you fill out a survey about what you want us to write about?

    Which of these topics are you most interested in?
    ReactVueAngularNew frameworks
    Do you spend a lot of time reproducing errors in your apps?
    YesNo
    Which, if any, do you think would help you reproduce errors more effectively?
    A solution to see exactly what a user did to trigger an errorProactive monitoring which automatically surfaces issuesHaving a support team triage issues more efficiently
    Thanks! Interested to hear how LogRocket can improve your bug fixing processes? Leave your email:

    Is your frontend hogging your users' CPU?

    As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

    LogRocket is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

    Modernize how you debug web apps — .

    Solomon Eseme A software developer who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend. Follow me: Twitter, Facebook, LinkedIn, about.me

    Leave a Reply