Содержание
- 1 RGB Colors
- 2 Shades of Red
- 3 RGBA Colors
- 4 CSS Reference
- 5 CSS Properties
- 6 CSS Properties
- 7 CSS Properties
- 8 RGB Color Values
- 9 Windows Metro UI
- 10 Windows 8
- 11 Shades of Gray
- 12 CSS Tutorial
- 13 Fashion Colors 2018
- 14 Blue colors
- 15 CSS Properties
- 16 Purple colors
- 17 Images
- 18 HTML Tutorial
- 19 W3.CSS Text Color Classes
- 20 On Black
- 21 On Gray
- 22 On White
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
align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function
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
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
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
Color | 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
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
Purple colors
Color | 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
С этим читают