CSS color: The Property for Text Color in CSS

The CSS color property specifies the font color of text content in an HTML element.

How to Use CSS color

You can define the color property using color names, hex codes, RGB, RGBA, HSL, and HSLA.

/* Using predefined color names */
.element { color: blue; }

/* Using HEX codes */
.element { color: #0000ff; }

/* Using RGB values */
.element { color: rgb(0, 0, 255); }

/* Using RGBA values for color with transparency */
.element { color: rgba(0, 0, 255, 0.5); }

/* Using HSL values */
.element { color: hsl(240, 100%, 50%); }

/* Using HSLA values for color with transparency */
.element { color: hsla(240, 100%, 50%, 0.5); }

When to Use CSS color

You need the color property in CSS to color the text content of elements, including buttons, links, and paragraphs.

Changing CSS Font Colors

You can use the color property to create colorful text with CSS. For example, you can differentiate headings, links, and warnings by color.

h1 { color: #ff6347; } /* Tomato color for headings */
a { color: blue; } /* Blue color for links */
.warning { color: red; } /* Red color for warnings */

Highlighting Important Text

Highlighting important text through font colors in CSS can help you draw attention to urgent messages or critical instructions.

.important { color: red; font-weight: bold; } /* Highlight important text in red */

Creating Thematic Consistency

You can establish a consistent theme across your web page by using a coherent color scheme for different types of text.

.header { color: navy; }
.subheader { color: teal; }
.paragraph { color: gray; }

Examples of Changing CSS Font Color

Navigation Menus

A website's navigation menu might use CSS text coloring to improve user experience and aesthetics.

.navbar { background-color: #333; }
.navbar a { color: white; padding: 14px 20px; display: inline-block; }
.navbar a:hover { background-color: #ddd; color: black; }

Form Inputs

Survey websites might use form inputs with colors to indicate focus states and improve user interaction.

input[type='text'] { border: 2px solid #ccc; }
input[type='text']:focus { border-color: blue; }

Call to Action Buttons

Advertisements might use vibrant colors for call to action buttons can attract user interactions.

.button { background-color: green; color: white; padding: 10px 15px; }
.button:hover { background-color: lightgreen; }

Learn More About CSS color and Other CSS Properties

Common CSS Color Names

CSS supports a wide range of predefined color names that you can use for convenience. These names include basic colors like black, white, transparent, red, green, and blue. However, color keywords also exist for advanced colors like crimson, lightred, salmon, and about 150 additional shades.

.header { color: navy; }
.warning { color: crimson; }
.success { color: green; }

CSS Background Color

The background-color property sets an element’s background color in CSS. Using background-color, you can define the look and feel of sections or entire web pages.

.header {
  background-color: #f0f0f0; /* Light gray background */
  padding: 20px;
  text-align: center;
}

CSS Border Color

The border-color property defines the color of an element’s border. By setting border-color, you can enhance visual boundaries and improve element distinction.

.box {
  border: 2px solid;
  border-color: #ff6347; /* Tomato color border */
  padding: 20px;
}

Hex Color Codes in CSS

Hex codes are a popular way to specify colors in CSS. A hex color is a six-digit combination of numbers and letters defined by its mix of red, green, and blue (RGB). Each pair of digits represents one color component, ranging from 00 to FF.

For example, the color blue in HEX is #0000FF, where 00 is the amount of red, 00 is the amount of green, and FF is the amount of blue.

.text-blue { color: #0000ff; } /* Blue color */
.background-grey { background-color: #cccccc; } /* Light grey background */

RGB and RGBA Colors

RGB stands for Red, Green, Blue, and is a way to define colors through these three primary colors, ranging from 0 to 255.

.text-blue { color: rgb(0, 0, 255); /* blue */ }

RGBA adds an alpha channel for opacity, where 0 is fully transparent and 1 is fully opaque.

.watermark { color: rgba(0, 0, 255, 0.05); /* 5% transparent blue */ }

HSL and HSLA Colors

HSL stands for Hue, Saturation, and Lightness and provides an alternative way to define colors. Hue represents the color type (0 to 360 degrees on the color wheel). Saturation refers to the intensity of the color (0% to 100%). Finally, lightness represents the lightness or darkness of the color (0% to 100%).

/* HSL color */
.hsl-text { color: hsl(120, 100%, 50%); } /* Bright green text */

Similar to RGBA, HSLA adds an alpha channel for transparency.

/* HSLA color */
.hsla-box { background-color: hsla(120, 100%, 50%, 0.3); } /* Semi-transparent green box */

CSS Color Pickers

Using CSS color code pickers, you can get the color of elements on your screen. Many CSS color pickers also allow you to convert hex colors to RGB and vice versa.