Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

CSS Font Color – How to Style Text in HTML

The thoughtful use of color in software development can profoundly influence user experience and behavior. Studies have shown colors affect our emotions, decision-making, attention spans, and more. Leveraging color psychology and theory allows developers to guide users toward desired outcomes.

For example, vibrant accent colors grab user attention to highlight important interface elements like call-to-action buttons. Soothing, natural color schemes maintain engagement as users navigate through complex dashboard views. Color contrast ensures critical text indicators remain readable for users with visual impairments. Representative brand colors generate recognition and influence the feelings users associate with a company.

Evaluating these impacts allows developers to craft intentional, meaningful color schemes. The result is a product that is visually appealing while also communicating ideas effectively, driving user engagement, and ultimately ensuring application success.

In this article, I will walk you through the various to change CSS font color in frontend web development. By the end of the article, you will be well-versed in various methods to change colors using CSS and HTML elements.

Let’s dive in 🚀

Accepted Color Data Types

The color property accepts any of the following data types as valid values:

  • Color Names – Predefined color keywords (e.g. “blue”)

  • Hexadecimal – Six-digit hex color code representing RGB values (e.g. #0000ff)

  • RGB – rgb(red, green, blue) specification with 0-255 integer values

  • HSL – Hue, saturation, lightness specification (e.g. hsl(180, 100%, 50%))

By default, browsers utilize a standard black font color for body text. However, the color property can be used to override this for specific elements to create more visually engaging designs.

The CSS color attribute and background-color properties allow developers to dynamically set these stylistic properties for DOM elements via CSS rules. The color property specifically targets the foreground font color, while the background color sets the background color of the element behind the font.

If you are working on a CSS project, and you want to be 5x more productive, you want to skip the boring part of writing each piece of code yourself, check out our AI-generated custom components for CSS. This allows you to quickly get started on your project.

How to Change CSS Background Color

The CSS background-color property allows developers to set the background color for a given DOM element. This can be achieved by passing one of several accepted color value formats as a parameter to the background-color property. Common options include hexadecimal color codes (e.g. #ffffff for white), RGB values (e.g. rgb(255,255,255)), color keywords (e.g. “white”), etc. The syntax follows the pattern:

body {
  background-color: #ffffff;
  color: black;
}

Setting visual styling of elements such as color and background color is an essential part of front-end development and UI/UX design in web applications. The default text color for a page is defined in the body selector like in the above code example.

Color keywords provide a convenient abstraction for commonly-used colors, but do not encompass all possible values. For precise color control, formats like hexadecimal and RGB specifications allow the developer to define a broader range of colors.

How to Change CSS Font Color

The CSS color property allows developers to set the font color for textual DOM elements. This property only affects the foreground font color rather than the background color. Valid values that can be passed to the color property include hex colors codes (e.g. #ff0000 for red), RGB values (e.g. rgb(255,0,0)), HSL values (e.g. hsl(0, 100%, 50%)), and standard color keywords (e.g. “red”).

The syntax for utilizing the color property follows this pattern in the following code:

h1 {
  color: #ff0000;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Font Color</title>
    </head>
    <body>
        <h1>This is a heading</h1>
    </body>
</html>

This would set the font color to red for all <h1> elements in the DOM tree.

CSS Color Keywords

CSS defines a set of standard color names that can be used to specify colors in CSS rules. These predefined keywords allow developers to set font colors using simple descriptive terms. For example in the following code:

h1 {
  /* Sets heading font color to blue using keyword */
  color: blue;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Color Keywords</title>
    </head>
    <body>
        <h1>CSS Color Keywords</h1>
    </body>
</html>

In the code above, I explicitly set the font color of the h1 element to blue.

CSS RGB Colors

The RGB color format allows developers to represent colors in CSS rules by specifying intensity levels for the three additive primary colors: red, green, and blue. An RGB color value defines the constituent red, green, and blue components as numerical values indicating intensity ranging from 0 to 255.

By mixing different intensities of these three primary hues, a wide spectrum of colors can be produced. For example, an RGB value of rgb(255, 0, 0) yields pure red, as only the red channel is set to maximum intensity while green and blue channels are turned off. An RGB value of rgb(0, 255, 0) similarly gives pure green. Combining more channels yields additional colors – rgb(255, 255, 0) gives yellow by combining full red and green values.

In practice, RGB color values can be defined in CSS rules like:

h1.rgb_red_value {
    /* sets the color of h1 element to red */
    color: rgb(255, 0, 0);
}
h1.rgb_red_percentage {
    /* sets the color of h1 element to red */
    color: rgb(255, 0, 0);
}
h1.rgb_green_value {
    /* sets the color of h1 element to green */
    color: rgb(0, 255, 0);
}
h1.rgb_blue_value {
    /* sets the color of h1 element to blue */
    color: rgb(0, 0, 255);
}
h1.rgb_black_value {
    /* sets the color of h1 element to black */
    color: rgb(0, 0, 0);
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>RGB Color format</title>
    </head>
    <body>
        <h1 class="rgb_red_value">RGB(255, 0, 0) represents red</h1>
        <h1 class="rgb_red_percentage">RGB(100%, 0, 0) represents red</h1>
        <h1 class="rgb_green_value">RGB(0, 255, 0) represents green</h1>
        <h1 class="rgb_blue_value">RGB(0, 0, 255) represents blue</h1>
        <h1 class="rgb_black_value">RGB(0, 0, 0) represents black</h1>
    </body>
</html>

In the RGB color scheme, each of the three numeric parameters passed as rgb(redValue, greenValue, blueValue) specifies intensity levels for the red, green, and blue components respectively on a scale from 0 to 255. For example, rgb(255, 0, 0) indicates full-intensity red without any contribution from the green or blue channels.

These RGB intensity levels can alternatively be expressed as percentage values from 0% meaning no contribution to 100% indicating full intensity for that color channel. As such, rgb(255, 0, 0) has full red maps to rgb(100%, 0%, 0%) in the percentage notation, with 0% green and blue indicating those channels are “turned off”.

📝Note: By combining different levels of the red, green, and blue components using either the 0-255 integer range or the percentage representation, over 16 million unique colors can be specified through RGB values to create a broad, customizable color spectrum for CSS styling.

Total Number of Colors Available

There are around 147 color names recognized by browsers like cyan, orange, red, pink, crimson, and so on. The full list includes common colors like:

  • red – A bright vibrant red

  • green – Green like grass

  • blue – blue color

  • cyan – Bright greenish-blue

  • magenta – Pinkish-reddish tone

As well as less common specific shades such as:

  • crimson – Slightly deeper red

  • aquamarine – Bluish-green tone

  • burlywood – Reddish brown tone

  • skyblue – Sky blue hue

  • goldenrod – Yellow-orange gold hue

The full list of supported color names is quite extensive, ranging from basic hues to oddly named specific shades. While not all may be commonly used, the browser will recognize and render any of the 147 standard color keywords.

For example:

p {
  color: crimson;
}

Would style all <p> HTML tag with a deep red font color.

147 keyword options offer wide utility, but in most cases, developers end up using a smaller subset of common colors like the primary red, green, and blue.

How to Change Font Color with CSS RGBa Colors

The RGBa color format builds upon the standard RGB format for specifying colors in CSS by adding an alpha channel component for controlling opacity.

Similar to the red, green, and blue integer intensity values from 0-255 in RGB, the RGBa scheme appends a fourth alpha value also ranging from 0-255 representing transparency level. An alpha value of 0 corresponds to full transparency while 255 denotes fully opaque.

For example:

h1 {
    /* sets the color of h1 element to red with 50% opacity*/
    color: rgba(7, 20, 7, 0.5);
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>RGBa Color Format</title>
    </head>
    <body>
        <h1>rgba(7, 20, 7, 0.5) represents black with opacity 0.5</h1>
    </body>
</html>

How to Change Font Color with Hexadecimal Colors

Hexadecimal color codes (hex values) allow developers to define color values for CSS rules using six-digit hexadecimal numerals (hex code). For instance:

p {
  color: #9932cc;
}

Hex color codes are represented by a hash/pound symbol (#) followed by six hexadecimal digits ranging from 0-9 and A-F. These six hex digits encode intensity levels for the red, green, and blue color channels by using two digits for each component.

The first two digits after the # represent red intensity levels, the middle two digits encode information about the green value, and the last two digits describe the blue amount. Combinations of these hexadecimal RGB intensity definitions allow selection from a wide color gamut.

h1.red_hex_value {
    /* sets the color of h1 element to red*/
    color: #ff0000;
}
h1.red_short_hex_value {
    /* sets the color of h1 element to red*/
    color: #f00;
}
h1.green_hex_value {
    /* sets the color of h1 element to green*/
    color: #00ff00; /*equivalent to #0f0 */
}
h1.blue_hex_value {
    /* sets the color of h1 element to blue*/
    color: #0000ff; /*equivalent to #00f*/
}
h1.black_hex_value {
    /* sets the color of h1 element to black*/
    color: #000000; /*equivalent to #000*/
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Hexadecimal colors</title>
    </head>
    <body>
        <h1 class="red_hex_value">#ff0000 represents red</h1>
        <h1 class="red_short_hex_value">#f00 represents red</h1>
        <h1 class="green_hex_value">#00ff00 represents green</h1>
        <h1 class="blue_hex_value">#0000ff represents blue</h1>
        <h1 class="black_hex_value">#000000 represents black</h1>
    </body>
</html>

In a hexadecimal color specification like #ff0000, each pair of hexadecimal digits controls the intensity for one component of the RGB color model. The first two digits after the hash symbol denote the red channel level, the middle two digits provide the green value, and the last two specify the blue amount.

So for #ff0000, ff represents the red channel and is set to the maximum 255 intensity, while 00 indicates no intensities for green or blue. This yields a pure red color.

The valid digits for hexadecimal numbers include the standard 0-9 as well as the letters A-F. Together, combinations of these hex digits between 00 and FF for each 2-digit pair create distinct colors by tuning the constituent red, green, and blue channels.

📝Note: When consecutive 2-digit pairs contain the same number, this can be abbreviated to a single digit. For example, #ff0000’s “ff” red value can be shortened to #f00 while preserving the bright red color.

How to Change Font Color with CSS HSL Value

HSL colors are the combination of three components hue, saturation, and lightness. For example,

h1 {
    color: hsl(0, 100%, 50%);
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>HSL color format</title>
    </head>
    <body>
        <h1> hsl(0, 100%, 50%) represents red</h1>
    </body>
</html>

Tips for Changing HTML Font Color

When setting font colors in your HTML documents, keep these tips in mind for best practices:

  • Use color values for accessibility: While color names like “red” are easy to remember, they don’t allow those with color blindness to adapt to the colors. Instead, use hexadecimal, RGB, or HSL values which explicitly define the color.

  • Do not be limited to color names: Using only named colors restricts the extent to which you can apply different shades of colors.

  • Importance of contrast: Pay attention to the contrast between foreground and background colors. Low contrast is difficult for users to read. Aim for an AA rating using web accessibility evaluation tools such as WebAIM.

  • Test, test, and test: Test color schemes on multiple browsers and devices. Colors can be rendered slightly differently across platforms. Checking compatibility helps avoid unexpected results.

  • Consider using a palette generator: Resources like Coolors.co help generate aesthetically pleasing color palette combinations with hex value outputs ready to copy/paste into CSS.

  • Use CSS variables to standardize color choices across code. Defining:

:root {
  --main-text-color: #3f3d3d;
}

Allows applying color changes sitewide by updating a single variable value.

Check out this video on How to Change Text Color in HTML and CSS

Best Practices with Colors on Webpages

Use a Color Picker Module for Precise Hex Value Selection

Most modern web frameworks and code editors have built-in color picker modules or plugins that allow developers to visually select colors and obtain the exact hex codes. Leveraging these tools ensures accurate color values are used in development, avoiding hard-to-spot issues caused by minor discrepancies. Popular picks like Chrome DevTools provide contrast ratio validation as well.

Validate Sufficient Color Contrast Ratios to Meet Accessibility Standards

When selecting foreground/background color combinations, validating that there is adequate contrast between the colors is an imperative accessibility practice. Insufficient contrast ratios degrade UI readability, especially for those with visual impairments. Use WCAG 2.0/2.1 guidelines to validate combinations to achieve at least a 4.5:1 ratio for normal text or 3:1 for larger text.

Suppose you have a darker color as the background of your website. In that case, you’ll want to make the text color a lighter, brighter color to improve your website’s readability and accessibility.

Inspect Element Styles on Reference Sites to Identify Color Schemes

Browser developer tools allow inspecting the computed CSS of any element on a web page. When trying to determine a color scheme that matches a certain style or aesthetic, reviewing the hex codes used on websites that have the desired look provides a quick reference point to inform color selection. Extract out the color values using inspection tools for easy implementation.

Frequently Asked Questions

Below are answers to some of the frequently asked questions on CSS styling:

How do you change font color in CSS?

To change the font color in CSS, use the color property:

p {
  color: blue;
}

How do I change the color of text based on a value in CSS?

You can use classes in HTML which are then targeted with CSS rules. This allows conditionally styling content.

For example:

<p class="success">...</p>
<p class="error">...</p>

.success {
  color: green;
}
.error {
  color: red;
}

How do I add font size and color in CSS?

Use the font-size and color properties:

p {
  font-size: 16px;
  color: purple;
}

How to change the color of text in CSS?

Use the CSS color property:

h1 {
  color: orange;
}

How do I change the color of marked text in CSS?

Use the ::marker pseudo-element:

li::marker {
  color: brown;
}

How do I color a list of text in CSS?

Target the list items with li and set color:

li {
  color: rebeccapurple;
}

What is text fill color CSS?

Fill sets CSS color property inside text content:

p {
  fill: crimson;
}

How do you change text color in CSS?

Use the color property:

span {
  color: teal;
}

What CSS attribute changes font color?

The color property changes the font color.

How to use Inline CSS to Change Exact Color in HTML

<p style="color: yellow"> Welcome to PureCode</p>

In the above code, I use inline CSS to style the font color to “yellow”

How do I change text color dynamically in CSS?

Use CSS variables:

:root {
  --text-color: blue;
}
p {
  color: var(--text-color);
}

What You Have Learned

In this article, you learned the foundations of setting font colors in CSS for web development, utilizing core color schemes like hexadecimal, RGB/RGBa, and color keywords that browsers can interpret to render various hues. You now understand how to tailor foreground and background colors for contrast and accessibility, aided by examples like setting paragraph text red or achieving transparency with RGBa alpha channels. With the ability to implement color properties in your CSS code, choose accessible values for visibility, and understand tradeoffs of different color models from opaque RGB to concise hex codes, you have the building blocks to apply colors in your websites and applications. Whether you choose common names or precise schemes, you gain broader applied knowledge to make informed decisions in utilizing color for future projects.

If you want to learn more about How to Change the HTML Font Color, check out this video below:

Check out Purecode.ai for all you need to quickly create responsive re-usable CSS components for your web projects.

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.