首页 > 其他分享 >css11 CSS RGB Colors

css11 CSS RGB Colors

时间:2024-05-29 22:21:42浏览次数:24  
标签:color rgb RGB values rgba Colors CSS 255

css11 CSS RGB Colors

https://www.w3schools.com/css/css_colors_rgb.asp

An RGB color value represents RED, GREEN, and BLUE light sources.


RGB Value

In CSS, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

 

<!DOCTYPE html>
<html>
<body>

<h1>Specify colors using RGB values</h1>

<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>

</body>
</html>

 

Example

Shades of gray are often defined using equal values for all the 3 light sources:

Example

 

<!DOCTYPE html>
<html>
<body>

<h1>Shades of gray</h1>

<p>By using equal values for red, green, and blue, you will get different shades of gray:</p>

<h2 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h2>
<h2 style="background-color:rgb(90, 90, 90);">rgb(90, 90, 90)</h2>
<h2 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h2>
<h2 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h2>
<h2 style="background-color:rgb(210, 210, 210);">rgb(210, 210, 210)</h2>
<h2 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h2>

</body>
</html>


 

RGBA Value

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 (not transparent at all):

Experiment by mixing the RGBA values below:

 

Example

 

<!DOCTYPE html>
<html>
<body>

<h1>Make transparent colors with RGBA</h1>

<h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
<h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2>

</body>
</html>

 


 

标签:color,rgb,RGB,values,rgba,Colors,CSS,255
From: https://www.cnblogs.com/emanlee/p/18221250

相关文章

  • css09 CSS Comments
    https://www.w3schools.com/css/css_comments.aspCSScommentsarenotdisplayedinthebrowser,buttheycanhelpdocumentyoursourcecode.CSSCommentsCommentsareusedtoexplainthecode,andmayhelpwhenyoueditthesourcecodeatalaterdate.Com......
  • css10 CSS Colors
    https://www.w3schools.com/css/css_colors.asp Colorsarespecifiedusingpredefinedcolornames,orRGB,HEX,HSL,RGBA,HSLAvalues.CSSColorNamesInCSS,acolorcanbespecifiedbyusingapredefinedcolorname: <!DOCTYPEhtml><html&g......
  • css07 CSS Attribute Selectors
    https://www.w3schools.com/css/css_attribute_selectors.aspStyleHTMLElementsWithSpecificAttributesItispossibletostyleHTMLelementsthathavespecificattributesorattributevalues.CSS[attribute]SelectorThe[attribute]selectorisusedtos......
  • css08 How To Add CSS
    https://www.w3schools.com/css/css_howto.aspWhenabrowserreadsastylesheet,itwillformattheHTMLdocumentaccordingtotheinformationinthestylesheet.ThreeWaystoInsertCSSTherearethreewaysofinsertingastylesheet:ExternalCSSInte......
  • at-rule or selector expectedcss(css-ruleorselectorexpected)
    问题如图所示,在使用scss和less是使用//注释就会出现红色报错,这个不影响运行,但是看着很不舒服。解决没有找到什么好的解决办法,一般的解决方法是,把验证关闭,然后重启。但是后面我开启这个设置,再进行注释,没有报错,感觉还是重启的作用。先放着不管吧。......
  • 7. CSS 网格布局
    CSS3引入了强大的网格布局(GridLayout),它提供了一种二维的布局方式,使得创建复杂的网页布局变得更加简单和直观。通过定义行和列,我们可以精确控制网页元素的排列和对齐。本章将详细介绍网格布局的基本概念和属性,并通过具体示例帮助读者掌握如何使用网格布局。7.1网格布局简......
  • css06 CSS Pseudo-elements
    https://www.w3schools.com/css/css_pseudo_elements.aspWhatarePseudo-Elements?ACSSpseudo-elementisusedtostylespecifiedpartsofanelement.Forexample,itcanbeusedto:Stylethefirstletter,orline,ofanelementInsertcontentbefore,or......
  • 8. CSS弹性布局基础
    第8章弹性布局基础CSS3引入了一个强大的布局模块——弹性布局(Flexbox),它提供了一种更加高效、直观的方式来排列和对齐元素,使复杂布局的实现变得更加简单。本章将详细介绍弹性布局的基本概念和属性,并通过具体示例帮助读者掌握如何使用弹性布局。8.1弹性布局简介弹性布局(F......
  • 第三方css动画库
    https://animate.style///安装npminstallanimate.css--save//引入import'animate.css';//使用<h1class="animate__animatedanimate__bounce">Ananimatedelement</h1>//样式名称必须加animate__animated之后    ......
  • vite配置自动引入全局scss变量文件
    全局自动引入scss变量文件当定义了全局的scss变量文件并且而其他很多页面都需要使用的时候,都需要显式的使用@import或者@use引用一遍全局scss文件,很是麻烦。使用以下配置这样能有效避免造成大量重复工作,可以在任何scss文件中任意使用全局变量。定义全局scss变量文件配置vi......