CSS color Property

You are Here:

Demo

Hello, World

CSS color Property

CSS color property specifies the color of text.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> h1{ color: red; } </style> </head> <body> <h1>CSS color Property</h1> </body> </html>

Syntax

Using CSS

element{ color: black; }

Using Javascript

object.style.color="black";

Animatable

Yes, color property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS color property is black.

Property Value

The following table provides a list of values for CSS color property.

ValueExplanation
textSpecifies the name of the color in text. For example, black.
hexSpecifies the name of the color in Hexadecimal value. For example, #000000
rgbSpecifies the name of the color in rgb(red, green, blue) value. For example, rgb(0, 0, 0)
rgbaSpecifies the name of the color in rgba(red, green, blue, opacity) value. For example, rgb(0, 0, 0, 0.5)
hslSpecifies the name of the color in hsl(hue, saturation, lightness) value. For example, hsl(0, 0%, 0%)
hslaSpecifies the name of the color in hsla(hue, saturation, lightness, opacity) value. For example, hsl(0, 0%, 0%, 0.5)

All in One

In the following example, we will demonstrate all values of CSS color property.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <p style="color:blue;">I'm Blue (using normal)</p> <p style="color:#0000ff;">I'm Blue (using hex value)</p> <p style="color:rgb(0, 0, 255);">I'm Blue (using rgb value)</p> <p style="color:rgba(0, 0, 255, 0.5);">I'm Blue (using rgba value)</p> <p style="color:hsl(240, 100%, 50%);">I'm Blue (using hsl value)</p> <p style="color:hsla(240, 100%, 50%, 0.5);">I'm Blue (using hsla value)</p> </body> </html>

Using JavaScript

In the following example, we will demonstrate how to set the CSS color property of an element using JavaScript.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <p id="point">Hello, CSS</p> <button onclick="myFunction()">Click Me</button> <script> function myFunction(){ var x = document.getElementById("point") x.style.color = "green"; } </script> <p><strong>Note</strong>: Click on the button to apply color</p> </body> </html>

Reminder

Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in CSS.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author