Rgb color values in css

Rgb color values in css

The CSS data type represents a color. A may also include an alpha-channel transparency value, indicating how the color should composite with its background.

Note: Although values are precisely defined, their actual appearance may vary (sometimes significantly) from device to device. This is because most devices are not calibrated, and some browsers do not support output devices’ color profiles.

Syntax

/* Named colors */ rebeccapurple aliceblue /* RGB Hexadecimal */ #f09 #ff0099 /* RGB (Red, Green, Blue) */ rgb(255 0 153) rgb(255 0 153 / 80%) /* HSL (Hue, Saturation, Lightness) */ hsl(150 30% 60%) hsl(150 30% 60% / 0.8) /* HWB (Hue, Whiteness, Blackness) */ hwb(12 50% 0%) hwb(194 0% 0% / 0.5) /* LAB (Lightness, A-axis, B-axis) */ lab(50% 40 59.5) lab(50% 40 59.5 / 0.5) /* LCH (Lightness, Chroma, Hue) */ lch(52.2% 72.2 50) lch(52.2% 72.2 50 / 0.5) /* Oklab (Lightness, A-axis, B-axis) */ oklab(59% 0.1 0.1) oklab(59% 0.1 0.1 / 0.5) /* Oklch (Lightness, Chroma, Hue) */ oklch(60% 0.15 50) oklch(60% 0.15 50 / 0.5) 

A value can be specified using one of the methods listed below:

• By keywords: (such as blue or pink ), , and currentcolor .
• By hexadecimal notations: (such as #ff0000 ).
• By parameters in a color space using functional notations:
  • sRGB color space: hsl() , hwb() , rgb() ;
  • CIELAB color space: lab() , lch() ;
  • Oklab color space: oklab() , oklch() ;
  • Other color spaces: color() .

  currentcolor keyword

  The currentcolor keyword represents the value of an element’s color property. This lets you use the color value on properties that do not receive it by default.

  If currentcolor is used as the value of the color property, it instead takes its value from the inherited value of the color property.

  div style="color: blue; border: 1px dashed currentcolor;"> The color of this text is blue. div style="background: currentcolor; height:9px;">div> This block is surrounded by a blue border. div> 

  Missing color components

  Each component of any CSS color functions — except for those using the legacy comma-separated syntax — can be specified as the keyword none to be a missing component.

  Explicitly specifying missing components is useful in color interpolation for cases where you would like to interpolate some color components but not others. For all other purposes, a missing component will effectively have a zero value in an appropriate unit: 0 , 0% , or 0deg . For example, the following colors are equivalent when used outside of interpolation:

  /* These are equivalent */ color: oklab(50% none -0.25); color: oklab(50% 0 -0.25); /* These are equivalent */ background-color: hsl(none 100% 50%); background-color: hsl(0deg 100% 50%); 

  Interpolation

  Color interpolation happens with gradients, transitions, and animations.

  When interpolating values, they are first converted to a given color space, and then each component of the computed values are interpolated linearly, with interpolation’s speed being determined by the easing function in transitions and animations. The interpolation color space defaults to Oklab, but can be overridden through in some color-related functional notations.

  Interpolation with missing components

  Interpolating colors in the same space

  When interpolating colors that are exactly in the interpolation color space, missing components from one color are replaced with existing values of the same components from the other color. For example, the following two expressions are equivalent:

  color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30)) color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30)) 

  Note: If a component is missing from both colors, this component will be missing after the interpolation.

  Interpolating colors from different spaces: analogous components

  If any color to be interpolated is not in the interpolation color space, its missing components are transferred into the converted color based on analogous components of the same category as described in the following table:

  Category	Analogous components
  Reds	R , X
  Greens	G , Y
  Blues	B , Z
  Lightness	L
  Colorfulness	C , S
  Hue	H
  a	a
  b	b

  • X ( 0.2 ) in color(xyz 0.2 0.1 0.6) is analogous to R ( 50% ) in rgb(50% 70% 30%) .
  • H ( 0deg ) in hsl(0deg 100% 80%) is analogous to H ( 140 ) in oklch(80% 0.1 140) .

  Using Oklch as the interpolation color space and the two colors below as an example:

  lch(80% 30 none) color(display-p3 0.7 0.5 none) 

  the preprocessing procedure is:

  Replace the missing components in both colors with a zero value:

  lch(80% 30 0) color(display-p3 0.7 0.5 0) 

  oklch(83.915% 0.0902 0.28) oklch(63.612% 0.1522 78.748) 

  oklch(83.915% 0.0902 none) oklch(63.612% 0.1522 78.748) 

  oklch(83.915% 0.0902 78.748) oklch(63.612% 0.1522 78.748) 

  Accessibility considerations

  Some people have difficulty distinguishing colors. The WCAG 2.2 recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. See color and color contrast for more information.

  Formal syntax

  =
  |
  currentcolor |

  =
  |
  |
  |
  transparent

  =
  |
  |
  |
  |
  |
  |
  |
  |
  |
  

  =
  rgb( [ | none ] [ / [ | none ] ]? ) |
  rgb( [ | none ] [ / [ | none ] ]? )

  =
  hsl( [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? )

  =
  hwb( [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? )

  =
  lab( [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? )

  =
  lch( [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? )

  =
  oklab( [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? )

  =
  oklch( [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? )

  =
  color( [ / [ | none ] ]? )

  =
  |

  =
  |

  =
  |
  

  =
  [ | | none ]

  =
  [ | | none ]

  =
  srgb |
  srgb-linear |
  display-p3 |
  a98-rgb |
  prophoto-rgb |
  rec2020

  =
  xyz |
  xyz-d50 |
  xyz-d65

  Examples

  Color value tester

  In this example we provide a and a text input. Entering a valid color into the input causes the to adopt that color, allowing you to test our color values.

  HTML

  div>div> hr /> label for="color">Enter a valid color value:label> input type="text" id="color" /> 

  div  height: 200px; width: 200px; > 

  const inputElem = document.querySelector("input"); const divElem = document.querySelector("div"); function validTextColor(stringToTest)  if (stringToTest === "inherit" || stringToTest === "transparent")  return false; > const div = document.createElement("div"); div.style.color = stringToTest; return !!div.style.color; > inputElem.addEventListener("input", () =>  if (validTextColor(inputElem.value))  divElem.style.backgroundColor = inputElem.value; divElem.textContent = ""; > else  divElem.removeAttribute("style"); divElem.textContent = "Invalid color value"; > >); 

  Result

  Fully saturated sRGB colors

  This example shows fully saturated sRGB colors in the sRGB color space.

  HTML

  div>div> div>div> div>div> div>div> div>div> div>div> div>div> div>div> div>div> div>div> div>div> div>div> 

  CSS

  body  display: flex; flex-wrap: wrap; > div  height: 80px; margin: 10px; width: 80px; > 

  div:nth-child(1)  background-color: hsl(0 100% 50%); > div:nth-child(2)  background-color: hsl(30 100% 50%); > div:nth-child(3)  background-color: hsl(60 100% 50%); > div:nth-child(4)  background-color: hsl(90 100% 50%); > div:nth-child(5)  background-color: hsl(120 100% 50%); > div:nth-child(6)  background-color: hsl(150 100% 50%); > div:nth-child(7)  background-color: hsl(180 100% 50%); > div:nth-child(8)  background-color: hsl(210 100% 50%); > div:nth-child(9)  background-color: hsl(240 100% 50%); > div:nth-child(10)  background-color: hsl(270 100% 50%); > div:nth-child(11)  background-color: hsl(300 100% 50%); > div:nth-child(12)  background-color: hsl(330 100% 50%); > 

  Result

  Reds of different shades

  This example shows reds of different shades in the sRGB color space.

  HTML

  div>div> div>div> div>div> div>div> div>div> div>div> 

  CSS

  body  display: flex; flex-wrap: wrap; > div  box-sizing: border-box; height: 80px; margin: 10px; width: 80px; > 

  div:nth-child(1)  background-color: hsl(0 100% 0%); > div:nth-child(2)  background-color: hsl(0 100% 20%); > div:nth-child(3)  background-color: hsl(0 100% 40%); > div:nth-child(4)  background-color: hsl(0 100% 60%); > div:nth-child(5)  background-color: hsl(0 100% 80%); > div:nth-child(6)  background-color: hsl(0 100% 100%); border: solid; > 

  Result

  Reds of different saturations

  This example shows reds of different saturations in the sRGB color space.

  HTML

  div>div> div>div> div>div> div>div> div>div> div>div> 

  CSS

  body  display: flex; flex-wrap: wrap; > div  height: 80px; margin: 10px; width: 80px; > 

  div:nth-child(1)  background-color: hsl(0 0% 50%); > div:nth-child(2)  background-color: hsl(0 20% 50%); > div:nth-child(3)  background-color: hsl(0 40% 50%); > div:nth-child(4)  background-color: hsl(0 60% 50%); > div:nth-child(5)  background-color: hsl(0 80% 50%); > div:nth-child(6)  background-color: hsl(0 100% 50%); > 

  Result

  Specifications

  Browser compatibility

  BCD tables only load in the browser

  See also

  • opacity : the property defining transparency at the element level
  • : the data type representing the hue angle of a color
  • color , background-color , border-color , box-shadow , outline-color , text-shadow : common properties that use
  • Applying color to HTML elements using CSS
  • New functions, gradients, and hues in CSS colors (Level 4) on MDN blog (2023)

  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.

  MDN

  Support

  Our communities

  Developers

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Источник

  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:

  Источник

  RGB Color Codes Chart

  Hover with cursor on color to get the hex and decimal color codes below:

  RGB color space

  RGB color space or RGB color system, constructs all the colors from the combination of the Red, Green and Blue colors.

  The red, green and blue use 8 bits each, which have integer values from 0 to 255. This makes 256*256*256=16777216 possible colors.

  Each pixel in the LED monitor displays colors this way, by combination of red, green and blue LEDs (light emitting diodes).

  When the red pixel is set to 0, the LED is turned off. When the red pixel is set to 255, the LED is turned fully on.

  Any value between them sets the LED to partial light emission.

  RGB color format & calculation

  RGB code has 24 bits format (bits 0..23):

  RED[7:0]								GREEN[7:0]								BLUE[7:0]
  23	16	15	8	7	0

  RGB = (R*65536)+(G*256)+B , (when R is RED, G is GREEN and B is BLUE)

  Calculation examples

  White RGB Color

  White RGB code = 255*65536+255*256+255 = #FFFFFF

  Blue RGB Color

  Blue RGB code = 0*65536+0*256+255 = #0000FF

  Red RGB Color

  Red RGB code = 255*65536+0*256+0 = #FF0000

  Green RGB Color

  Green RGB code = 0*65536+255*256+0 = #00FF00

  Gray RGB Color

  Gray RGB code = 128*65536+128*256+128 = #808080

  Yellow RGB Color

  Yellow RGB code = 255*65536+255*256+0 = #FFFF00

  RGB color table

  See also

  • RGB to hex converter
  • RGB to HSV converter
  • RGB to HSL converter
  • RGB to CMYK converter
  • Color conversions
  • Color wheel chart
  • Screen color tester
  • HTML color codes
  • HTML character codes
  • ASCII table
  • Unicode characters
  • Web safe colors
  • Yellow color
  • Gold color

  Источник

  Читайте также:  Python pyqt5 примеры программ