Цвет

RGB Colors

An RGB color value is specified with the rgb() function, which has the following syntax:

Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).

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

Also, the following values define equal color: rgb(0,0,255) and rgb(0%,0%,100%).

Example

Define different RGB colors:

#p1 {background-color: rgb(255, 0, 0);} /* red */#p2 {background-color: rgb(0, 255, 0);} /* green */#p3 {background-color: rgb(0, 0, 255);} /* blue */

Shades of Red

If you look at the color table below, you will see the result of varying the red light from 0 to 255, while keeping the green and blue light at zero.

Click on the hexadecimal values, if you want to analyze the color in our color picker.

Red Light	HEX	RGB
	#000000	rgb(0,0,0)
	#080000	rgb(8,0,0)
	#100000	rgb(16,0,0)
	#180000	rgb(24,0,0)
	#200000	rgb(32,0,0)
	#280000	rgb(40,0,0)
	#300000	rgb(48,0,0)
	#380000	rgb(56,0,0)
	#400000	rgb(64,0,0)
	#480000	rgb(72,0,0)
	#500000	rgb(80,0,0)
	#580000	rgb(88,0,0)
	#600000	rgb(96,0,0)
	#680000	rgb(104,0,0)
	#700000	rgb(112,0,0)
	#780000	rgb(120,0,0)
	#800000	rgb(128,0,0)
	#880000	rgb(136,0,0)
	#900000	rgb(144,0,0)
	#980000	rgb(152,0,0)
	#A00000	rgb(160,0,0)
	#A80000	rgb(168,0,0)
	#B00000	rgb(176,0,0)
	#B80000	rgb(184,0,0)
	#C00000	rgb(192,0,0)
	#C80000	rgb(200,0,0)
	#D00000	rgb(208,0,0)
	#D80000	rgb(216,0,0)
	#E00000	rgb(224,0,0)
	#E80000	rgb(232,0,0)
	#F00000	rgb(240,0,0)
	#F80000	rgb(248,0,0)
	#FF0000	rgb(255,0,0)

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).

rgba(255, 0, 0, 0.2); rgba(255, 0, 0, 0.4); rgba(255, 0, 0, 0.6); rgba(255, 0, 0, 0.8);

The following example defines different RGBA colors:

Example

#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS Properties

RGB Color Values

In HTML, 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 with a value between 0 and 255.

This means that there are 256 x 256 x 256 = 16777216 possible colors!

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

Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and the other two (red and blue) 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:

RED

255

GREEN

BLUE

Windows Metro UI

Metro is the nickname of Microsoft Design Language (MDL).

Metro is focused on typography, simplified icons, and modern colors.

This example shows how to use Windows Metro colors in W3.CSS:

Example

<div class=»w3-metro-light-green»> <p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p> </div>

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Windows 8

Windows 8 was the first major operating system focused on flat design and modern colors.

This example shows how to use Windows 8 colors in W3.CSS:

Example

<div class=»w3-win8-lime»> <p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p> </div>

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Shades of Gray

Gray colors are displayed using an equal amount of power to all of the light sources.

To make it easy for you to select a gray color we have compiled a table of gray shades for you:

Gray Shades	HEX	RGB
HTML Black	#000000	rgb(0,0,0)
	#080808	rgb(8,8,8)
	#101010	rgb(16,16,16)
	#181818	rgb(24,24,24)
	#202020	rgb(32,32,32)
	#282828	rgb(40,40,40)
	#303030	rgb(48,48,48)
	#383838	rgb(56,56,56)
	#404040	rgb(64,64,64)
	#484848	rgb(72,72,72)
	#505050	rgb(80,80,80)
	#585858	rgb(88,88,88)
	#606060	rgb(96,96,96)
	#686868	rgb(104,104,104)
	#696969	rgb(105,105,105)
	#707070	rgb(112,112,112)
	#787878	rgb(120,120,120)
HTML Gray	#808080	rgb(128,128,128)
	#888888	rgb(136,136,136)
	#909090	rgb(144,144,144)
	#989898	rgb(152,152,152)
	#A0A0A0	rgb(160,160,160)
	#A8A8A8	rgb(168,168,168)
HTML DarkGray !!!	#A9A9A9	rgb(169,169,169)
	#B0B0B0	rgb(176,176,176)
	#B8B8B8	rgb(184,184,184)
X11 Gray	#BEBEBE	rgb(190,190,190)
HTML Silver	#C0C0C0	rgb(192,192,192)
	#C8C8C8	rgb(200,200,200)
	#D0D0D0	rgb(208,208,208)
HTML LightGray	#D3D3D3	rgb(211,211,211)
	#D8D8D8	rgb(216,216,216)
HTML Gainsboro	#DCDCDC	rgb(220,220,220)
	#E0E0E0	rgb(224,224,224)
	#E8E8E8	rgb(232,232,232)
	#F0F0F0	rgb(240,240,240)
HTML WhiteSmoke	#F5F5F5	rgb(245,245,245)
	#F8F8F8	rgb(248,248,248)
HTML White	#FFFFFF	rgb(255,255,255)

An anomaly in the table above is that HTML Gray is darker than DarkGray.

The color names of HTML / CSS was inherited from the X11 standard.

HTML / CSS defined gray at the midpoint of the 8-bit gray scale (128,128,128).

X11 defined gray to be (190,190,190); which is closer to HTML silver.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Fashion Colors 2018

w3-2018-red-pear

w3-2018-valiant-poppy

w3-2018-nebulas-blue

w3-2018-ceylon-yellow

w3-2018-martini-olive

w3-2018-russet-orange

w3-2018-ultra-violet

w3-2018-crocus-petal

w3-2018-limelight

w3-2018-quetzal-green

w3-2018-sargasso-sea

w3-2018-tofu

w3-2018-almond-buff

w3-2018-quiet-gray

w3-2018-meerkat

w3-2018-meadowlark

w3-2018-cherry-tomato

w3-2018-little-boy-blue

w3-2018-chili-oil

w3-2018-blooming-dahlia

w3-2018-arcadia

w3-2018-pink-emperador

w3-2018-almost-mauve

w3-2018-spring-crocus

w3-2018-lime-punch

w3-2018-sailor-blue

w3-2018-harbor-mist

w3-2018-warm-sand

w3-2018-coconut-milk

Example

<div class=»w3-2018-ultra-violet»>Ultra Violet</div> <div class=»w3-2018-cherry-tomato»>Cherry Tomato</div>

Try It Yourself »

Try All »

Download the CSS »

The fashion colors are selected from Colors Trends.

Blue colors

HTML / CSSColor Name	Hex Code#RRGGBB	Decimal Code(R,G,B)
powderblue	#B0E0E6	rgb(176,224,230)
lightblue	#ADD8E6	rgb(173,216,230)
lightskyblue	#87CEFA	rgb(135,206,250)
skyblue	#87CEEB	rgb(135,206,235)
deepskyblue	#00BFFF	rgb(0,191,255)
lightsteelblue	#B0C4DE	rgb(176,196,222)
dodgerblue	#1E90FF	rgb(30,144,255)
cornflowerblue	#6495ED	rgb(100,149,237)
steelblue	#4682B4	rgb(70,130,180)
royalblue	#4169E1	rgb(65,105,225)
blue	#0000FF	rgb(0,0,255)
mediumblue	#0000CD	rgb(0,0,205)
darkblue	#00008B	rgb(0,0,139)
navy	#000080	rgb(0,0,128)
midnightblue	#191970	rgb(25,25,112)
mediumslateblue	#7B68EE	rgb(123,104,238)
slateblue	#6A5ACD	rgb(106,90,205)
darkslateblue	#483D8B	rgb(72,61,139)

CSS Properties

Purple colors

HTML / CSS Color Name	Hex Code #RRGGBB	Decimal Code(R,G,B)
lavender	#E6E6FA	rgb(230,230,250)
thistle	#D8BFD8	rgb(216,191,216)
plum	#DDA0DD	rgb(221,160,221)
violet	#EE82EE	rgb(238,130,238)
orchid	#DA70D6	rgb(218,112,214)
fuchsia	#FF00FF	rgb(255,0,255)
magenta	#FF00FF	rgb(255,0,255)
mediumorchid	#BA55D3	rgb(186,85,211)
mediumpurple	#9370DB	rgb(147,112,219)
blueviolet	#8A2BE2	rgb(138,43,226)
darkviolet	#9400D3	rgb(148,0,211)
darkorchid	#9932CC	rgb(153,50,204)
darkmagenta	#8B008B	rgb(139,0,139)
purple	#800080	rgb(128,0,128)
indigo	#4B0082	rgb(75,0,130)

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors Colors RGB HEX HSL

HTML CSSHTML Links Links Link Colors Link Bookmarks

HTML Images Images Image Map Background Images The Picture Element

HTML TablesHTML Lists Lists Unordered Lists Ordered Lists Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML

W3.CSS Text Color Classes

The following W3.CSS text color classes can be used on any HTML element:

On Black

w3-text-red

w3-text-pink

w3-text-purple

w3-text-deep-purple

w3-text-indigo

w3-text-blue

w3-text-light-blue

w3-text-cyan

w3-text-aqua

w3-text-teal

w3-text-green

w3-text-light-green

w3-text-lime

w3-text-sand

w3-text-khaki

w3-text-yellow

w3-text-amber

w3-text-orange

w3-text-deep-orange

w3-text-blue-gray

w3-text-brown

w3-text-light-gray

w3-text-gray

w3-text-dark-gray

w3-text-black

w3-text-white

On Gray

w3-text-red

w3-text-pink

w3-text-purple

w3-text-deep-purple

w3-text-indigo

w3-text-blue

w3-text-light-blue

w3-text-cyan

w3-text-aqua

w3-text-teal

w3-text-green

w3-text-light-green

w3-text-lime

w3-text-sand

w3-text-khaki

w3-text-yellow

w3-text-amber

w3-text-orange

w3-text-deep-orange

w3-text-blue-gray

w3-text-brown

w3-text-light-gray

w3-text-gray

w3-text-dark-gray

w3-text-black

w3-text-white

On White

w3-text-red

w3-text-pink

w3-text-purple

w3-text-deep-purple

w3-text-indigo

w3-text-blue

w3-text-light-blue

w3-text-cyan

w3-text-aqua

w3-text-teal

w3-text-green

w3-text-light-green

w3-text-lime

w3-text-sand

w3-text-khaki

w3-text-yellow

w3-text-amber

w3-text-orange

w3-text-deep-orange

w3-text-blue-gray

w3-text-brown

w3-text-light-gray

w3-text-gray

w3-text-dark-gray

w3-text-black

w3-text-white

С этим читают