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, {{cssxref("color")}} and {{cssxref("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.
{{EmbedGHLiveSample("css-examples/modules/colors.html", '100%', 450)}}
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 {{cssxref("background-color")}} and , respectively.
To see the code for this color syntax converter, view the source on GitHub.
Reference
Properties
- {{cssxref("color")}}
- {{cssxref("opacity")}}
At-rules and descriptors
- {{cssxref("@color-profile")}}
components
descriptorrendering-intent
descriptorsrc
descriptor
Functions
- Color functions:
color-contrast()
color-mix()
device-cmyk()
- {{CSSXref("color_value/light-dark", "light-dark()")}}
Data types
<color-function>
- {{cssxref("hex-color")}}
- {{cssxref("named-color")}}
- {{cssxref("alpha-value")}}
- {{cssxref("hue")}}
- {{cssxref("system-color")}}
<colorspace-params>
Glossary terms and keywords
- {{glossary("color space")}}
currentcolor
- {{glossary("interpolation")}}
- {{glossary("RGB")}}
transparent
Interfaces
CSSColorProfileRule
Guides
- Applying color to HTML elements using CSS
- : A guide to using CSS to apply color to a variety of types of content, including all CSS properties that accept
<color>
as a value.
- : A guide to using CSS to apply color to a variety of types of content, including all CSS properties that accept
- CSS color values
- : An overview of color spaces and the different
<color>
functional notations available in CSS.
- : An overview of color spaces and the different
- Using color wisely
- : Color theory and resources, including finding the right colors to create an accessible color palette, contrast, and printing in color.
- Using relative colors
- : This article explains relative CSS color syntax, shows what the different options are, and looks at some illustrative examples.
- Understanding color and luminance
- : 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.
- WCAG 1.4.1: Color contrast
- : Explanation of contrast requirements between background and foreground content to ensure legibility.
Related concepts
-
CSS properties that are part of other specifications:
- {{cssxref("background-color")}}
- {{cssxref("background-image")}}
- {{cssxref("border-color")}}
- {{cssxref("box-shadow")}}
- {{cssxref("caret-color")}}
- {{cssxref("color")}}
- {{cssxref("color-scheme")}}
- {{cssxref("column-rule-color")}}
- {{cssxref("outline-color")}}
- {{cssxref("scrollbar-color")}}
- {{cssxref("text-decoration-color")}}
- {{cssxref("text-emphasis-color")}}
- {{cssxref("text-shadow")}}
- {{cssxref("-webkit-tap-highlight-color")}}
- SVG color properties that are part of other specifications:
- SVG
color
attribute - {{glossary("Color wheel")}} glossary term
- {{glossary("Interpolation")}} glossary term
- The
@font-palette-values
at-ruleoverride-colors
descriptor - The
@color-profile
at-rule - The
color-gamut
@media feature - The
forced-colors
@media feature
Specifications
See also
- CSS color adjustment module and the {{cssxref("print-color-adjust")}} property.
- CSS images module, which is where CSS
<gradient>
images are defined. - The
VideoColorSpace
interface - The SVG
<feColorMatrix>
element - Canvas API: applying styles and colors