Colour styles for css

color

The color CSS property sets the foreground color value of an element’s text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color .

Try it

For an overview of using color in HTML, see Applying color to HTML elements using CSS.

Syntax

/* Keyword values */ color: currentcolor; /* values */ color: red; color: orange; color: tan; color: rebeccapurple; /* values */ color: #090; color: #009900; color: #090a; color: #009900aa; /* values */ color: rgb(34, 12, 64, 0.6); color: rgba(34, 12, 64, 0.6); color: rgb(34 12 64 / 0.6); color: rgba(34 12 64 / 0.3); color: rgb(34 12 64 / 60%); color: rgba(34.6 12 64 / 30%); /* values */ color: hsl(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 0.6); color: hsl(30 100% 50% / 0.6); color: hsla(30 100% 50% / 0.6); color: hsl(30 100% 50% / 60%); color: hsla(30.2 100% 50% / 60%); /* values */ color: hwb(90 10% 10%); color: hwb(90 10% 10% / 0.5); color: hwb(90deg 10% 10%); color: hwb(1.5708rad 60% 0%); color: hwb(0.25turn 0% 40% / 50%); /* Global values */ color: inherit; color: initial; color: revert; color: revert-layer; color: unset; 

The color property is specified as a single value.

Note that the value must be a uniform color . It can’t be a , which is actually a type of .

Values

Sets the color of the textual and decorative parts of the element.

Sets the color to the element’s color property value. However, if set as the value of color , currentcolor is treated as inherit .

Accessibility concerns

It is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.

Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

Formal definition

Initial value	canvastext
Applies to	all elements and text. It also applies to ::first-letter and ::first-line .
Inherited	yes
Computed value	computed color
Animation type	by computed value type

Formal syntax

Examples

Making text red

The following are all ways to make a paragraph’s text red:

p  color: red; > p  color: #f00; > p  color: #ff0000; > p  color: rgb(255, 0, 0); > p  color: rgb(100%, 0%, 0%); > p  color: hsl(0, 100%, 50%); > /* 50% translucent */ p  color: #ff000080; > p  color: rgba(255, 0, 0, 0.5); > p  color: hsla(0, 100%, 50%, 0.5); > 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

CSS colors

The CSS colors module defines colors, color types, color blending, opacity, and how you can apply these colors and effects to HTML content.

While this module has only two CSS properties, color and opacity , over 20 CSS and SVG properties, CSS images, at-rules, and @media rules depend on these two properties.

Colors in action

The color syntax converter below shows the values of the currently selected color in red-green-blue (RGB), hexadecimal (HEX), hue, saturation, and lightness (HSL), and hue, whiteness, and blackness (HWB) CSS color formats. All the RGB, HEX, HSL, and HWB color values here, while written differently, represent the same color value.

Selecting a color via the color picker and an opacity via the slider updates the RGB, HEX, HSL, and HWB values. When you choose a new color or opacity value, the color of the background and the slider update via the CSS properties background-color and accent-color , respectively.

To see the code for this color syntax converter, view the source on GitHub.

Reference

Properties

At-rules and descriptors

Functions

• Absolute color functions, including:
  • rgb() and its rgba() alias
  • hsl() and its hsla() alias
  • hwb()
  • lab()
  • lch()
  • oklab()
  • oklch()
  • color()

  Data types

  Keywords

  Interfaces

  Guides

  A guide to using CSS to apply color to a variety of types of content. All color-related CSS properties are touched upon.

  Color perception and using colors with color insensitive (color blind) users, reduced vision users and users with vestibular disorders or other neurological disorders in mind.

  Explanation of contrast requirements between background and foreground content to ensure legibility.

  This tool makes it easy to create, adjust, and experiment with custom colors.

  Related concepts

  • CSS properties that are part of other specifications:
    • accent-color
    • background-color
    • background-image
    • border-color
    • box-shadow
    • caret-color
    • color
    • color-scheme
    • column-rule-color
    • outline-color
    • scrollbar-color
    • text-decoration-color
    • text-emphasis-color
    • text-shadow
    • -webkit-tap-highlight-color
    • fill
    • flood-color
    • lighting-color
    • stop-color
    • stroke

    Specifications

    See also

    Found a content problem with this page?

    This page was last modified on Jul 17, 2023 by MDN contributors.

    Your blueprint for a better internet.

    Источник

    CSS Colors

    CSS supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity.

    RGBA Colors

    RGBA color values are an extension of RGB color values with an alpha channel — which specifies the opacity for a color.

    An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

    The following example defines different RGBA colors:

    Example

    HSL Colors

    HSL stands for Hue, Saturation and Lightness.

    An HSL color value is specified with: hsl(hue, saturation, lightness).

    1. Hue is a degree on the color wheel (from 0 to 360):
       • 0 (or 360) is red
       • 120 is green
       • 240 is blue
    2. Saturation is a percentage value: 100% is the full color.
    3. Lightness is also a percentage; 0% is dark (black) and 100% is white.

    The following example defines different HSL colors:

    Example

    HSLA Colors

    HSLA color values are an extension of HSL color values with an alpha channel — which specifies the opacity for a color.

    An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha), where the alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

    The following example defines different HSLA colors:

    Example

    Opacity

    The CSS opacity property sets the opacity for the whole element (both background color and text will be opaque/transparent).

    The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

    Notice that the text above will also be transparent/opaque!

    The following example shows different elements with opacity:

    Источник