Color types in css

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 class border box