Academy
Thumbnail

Named Colors

July 30, 2024, 8:15 a.m.

the following class-names are available named colors, can be used in Drag&Drop 2D page editor (Use the theme's dark/light contrast mode switcher to get more clearer visual of a color)

Text colorsBackground colors
red
redbg
brownbrownbg
maroonmaroonbg
whitewhitebg
lightgraylightgraybg
silversilverbg
darkgraydarkgraybg
graygraybg
blackblackbg
bluebluebg
tealtealbg
cyancyanbg
greengreenbg
limelimebg
yellowyellowbg
orangeorangebg
oliveolivebg
pinkpinkbg
magentamagentabg
purplepurplebg

Sure thing! Here's a concise list of 21 commonly used named colors in CSS, widely favored for design and readability across modern web projects:

These color names are part of the 147 named colors standardized in CSS, and these 21 pop up frequently in real-world stylesheets due to their familiarity and visual clarity.

If you may need more named colors, kindly use (#style-manager) color picker, or tell the side admin to add the named colors as classnames directly as how shown bellow (but remember, the more named colors added to the site Settings, the more monthly bandwidth will applied to your site instance, due to the fact that at every request the amount of characters will loaded from the server to the user's device, hence the impact on climate is greater, so please use it only if needed and responsibly):

Text colorsBackground colors
.aliceblue{color:#f0f8ff}
.antiquewhite{color:#faebd7}
.aqua{color:#0ff}
.aquamarine{color:#7fffd4}
.azure{color:#f0ffff}
.beige{color:#f5f5dc}
.bisque{color:#ffe4c4}
.black{color:#000}
.blanchedalmond{color:#ffebcd}
.blue{color:#00f}
.blueviolet{color:#8a2be2}
.brown{color:#a52a2a}
.burlywood{color:#deb887}
.burntsienna{color:#ea7e5d}
.cadetblue{color:#5f9ea0}
.chartreuse{color:#7fff00}
.chocolate{color:#d2691e}
.coral{color:#ff7f50}
.cornflowerblue{color:#6495ed}
.cornsilk{color:#fff8dc}
.crimson{color:#dc143c}
.cyan{color:#0ff}
.darkblue{color:#00008b}
.darkcyan{color:#008b8b}
.darkgoldenrod{color:#b8860b}
.darkgray{color:#a9a9a9}
.darkgreen{color:#006400}
.darkgrey{color:#a9a9a9}
.darkkhaki{color:#bdb76b}
.darkmagenta{color:#8b008b}
.darkolivegreen{color:#556b2f}
.darkorange{color:#ff8c00}
.darkorchid{color:#9932cc}
.darkred{color:#8b0000}
.darksalmon{color:#e9967a}
.darkseagreen{color:#8fbc8f}
.darkslateblue{color:#483d8b}
.darkslategray{color:#2f4f4f}
.darkslategrey{color:#2f4f4f}
.darkturquoise{color:#00ced1}
.darkviolet{color:#9400d3}
.deeppink{color:#ff1493}
.deepskyblue{color:#00bfff}
.dimgray{color:#696969}
.dimgrey{color:#696969}
.dodgerblue{color:#1e90ff}
.firebrick{color:#b22222}
.floralwhite{color:#fffaf0}
.forestgreen{color:#228b22}
.fuchsia{color:#f0f}
.gainsboro{color:#dcdcdc}
.ghostwhite{color:#f8f8ff}
.gold{color:#ffd700}
.goldenrod{color:#daa520}
.gray{color:#808080}
.green{color:#008000}
.greenyellow{color:#adff2f}
.grey{color:#808080}
.honeydew{color:#f0fff0}
.hotpink{color:#ff69b4}
.indianred{color:#cd5c5c}
.indigo{color:#4b0082}
.ivory{color:#fffff0}
.khaki{color:#f0e68c}
.lavender{color:#e6e6fa}
.lavenderblush{color:#fff0f5}
.lawngreen{color:#7cfc00}
.lemonchiffon{color:#fffacd}
.lightblue{color:#add8e6}
.lightcoral{color:#f08080}
.lightcyan{color:#e0ffff}
.lightgoldenrodyellow{color:#fafad2}
.lightgray{color:#d3d3d3}
.lightgreen{color:#90ee90}
.lightgrey{color:#d3d3d3}
.lightpink{color:#ffb6c1}
.lightsalmon{color:#ffa07a}
.lightseagreen{color:#20b2aa}
.lightskyblue{color:#87cefa}
.lightslategray{color:#789}
.lightslategrey{color:#789}
.lightsteelblue{color:#b0c4de}
.lightyellow{color:#ffffe0}
.lime{color:#0f0}
.limegreen{color:#32cd32}
.linen{color:#faf0e6}
.magenta{color:#f0f}
.maroon{color:#800000}
.mediumaquamarine{color:#66cdaa}
.mediumblue{color:#0000cd}
.mediumorchid{color:#ba55d3}
.mediumpurple{color:#9370db}
.mediumseagreen{color:#3cb371}
.mediumslateblue{color:#7b68ee}
.mediumspringgreen{color:#00fa9a}
.mediumturquoise{color:#48d1cc}
.mediumvioletred{color:#c71585}
.midnightblue{color:#191970}
.mintcream{color:#f5fffa}
.mistyrose{color:#ffe4e1}
.moccasin{color:#ffe4b5}
.navajowhite{color:#ffdead}
.navy{color:#000080}
.oldlace{color:#fdf5e6}
.olive{color:#808000}
.olivedrab{color:#6b8e23}
.orange{color:#ffa500}
.orangered{color:#ff4500}
.orchid{color:#da70d6}
.palegoldenrod{color:#eee8aa}
.palegreen{color:#98fb98}
.paleturquoise{color:#afeeee}
.palevioletred{color:#db7093}
.papayawhip{color:#ffefd5}
.peachpuff{color:#ffdab9}
.peru{color:#cd853f}
.pink{color:#ffc0cb}
.plum{color:#dda0dd}
.powderblue{color:#b0e0e6}
.purple{color:#800080}
.rebeccapurple{color:#663399}
.red{color:#f00}
.rosybrown{color:#bc8f8f}
.royalblue{color:#4169e1}
.saddlebrown{color:#8b4513}
.salmon{color:#fa8072}
.sandybrown{color:#f4a460}
.seagreen{color:#2e8b57}
.seashell{color:#fff5ee}
.sienna{color:#a0522d}
.silver{color:#c0c0c0}
.skyblue{color:#87ceeb}
.slateblue{color:#6a5acd}
.slategray{color:#708090}
.slategrey{color:#708090}
.snow{color:#fffafa}
.springgreen{color:#00ff7f}
.steelblue{color:#4682b4}
.tan{color:#d2b48c}
.teal{color:#008080}
.thistle{color:#d8bfd8}
.tomato{color:#ff6347}
.turquoise{color:#40e0d0}
.violet{color:#ee82ee}
.wheat{color:#f5deb3}
.white{color:#fff}
.whitesmoke{color:#f5f5f5}
.yellow{color:#ff0}
.yellowgreen{color:#9acd32}
.alicebluebg{background-color:#f0f8ff}
.antiquewhitebg{background-color:#faebd7}
.aquabg{background-color:#0ff}
.aquamarinebg{background-color:#7fffd4}
.azurebg{background-color:#f0ffff}
.beigebg{background-color:#f5f5dc}
.bisquebg{background-color:#ffe4c4}
.blackbg{background-color:#000}
.blanchedalmondbg{background-color:#ffebcd}
.bluebg{background-color:#00f}
.bluevioletbg{background-color:#8a2be2}
.brownbg{background-color:#a52a2a}
.burlywoodbg{background-color:#deb887}
.burntsiennabg{background-color:#ea7e5d}
.cadetbluebg{background-color:#5f9ea0}
.chartreusebg{background-color:#7fff00}
.chocolatebg{background-color:#d2691e}
.coralbg{background-color:#ff7f50}
.cornflowerbluebg{background-color:#6495ed}
.cornsilkbg{background-color:#fff8dc}
.crimsonbg{background-color:#dc143c}
.cyanbg{background-color:#0ff}
.darkbluebg{background-color:#00008b}
.darkcyanbg{background-color:#008b8b}
.darkgoldenrodbg{background-color:#b8860b}
.darkgraybg{background-color:#a9a9a9}
.darkgreenbg{background-color:#006400}
.darkgreybg{background-color:#a9a9a9}
.darkkhakibg{background-color:#bdb76b}
.darkmagentabg{background-color:#8b008b}
.darkolivegreenbg{background-color:#556b2f}
.darkorangebg{background-color:#ff8c00}
.darkorchidbg{background-color:#9932cc}
.darkredbg{background-color:#8b0000}
.darksalmonbg{background-color:#e9967a}
.darkseagreenbg{background-color:#8fbc8f}
.darkslatebluebg{background-color:#483d8b}
.darkslategraybg{background-color:#2f4f4f}
.darkslategreybg{background-color:#2f4f4f}
.darkturquoisebg{background-color:#00ced1}
.darkvioletbg{background-color:#9400d3}
.deeppinkbg{background-color:#ff1493}
.deepskybluebg{background-color:#00bfff}
.dimgraybg{background-color:#696969}
.dimgreybg{background-color:#696969}
.dodgerbluebg{background-color:#1e90ff}
.firebrickbg{background-color:#b22222}
.floralwhitebg{background-color:#fffaf0}
.forestgreenbg{background-color:#228b22}
.fuchsiabg{background-color:#f0f}
.gainsborobg{background-color:#dcdcdc}
.ghostwhitebg{background-color:#f8f8ff}
.goldbg{background-color:#ffd700}
.goldenrodbg{background-color:#daa520}
.graybg{background-color:#808080}
.greenbg{background-color:#008000}
.greenyellowbg{background-color:#adff2f}
.greybg{background-color:#808080}
.honeydewbg{background-color:#f0fff0}
.hotpinkbg{background-color:#ff69b4}
.indianredbg{background-color:#cd5c5c}
.indigobg{background-color:#4b0082}
.ivorybg{background-color:#fffff0}
.khakibg{background-color:#f0e68c}
.lavenderbg{background-color:#e6e6fa}
.lavenderblushbg{background-color:#fff0f5}
.lawngreenbg{background-color:#7cfc00}
.lemonchiffonbg{background-color:#fffacd}
.lightbluebg{background-color:#add8e6}
.lightcoralbg{background-color:#f08080}
.lightcyanbg{background-color:#e0ffff}
.lightgoldenrodyellowbg{background-color:#fafad2}
.lightgraybg{background-color:#d3d3d3}
.lightgreenbg{background-color:#90ee90}
.lightgreybg{background-color:#d3d3d3}
.lightpinkbg{background-color:#ffb6c1}
.lightsalmonbg{background-color:#ffa07a}
.lightseagreenbg{background-color:#20b2aa}
.lightskybluebg{background-color:#87cefa}
.lightslategraybg{background-color:#789}
.lightslategreybg{background-color:#789}
.lightsteelbluebg{background-color:#b0c4de}
.lightyellowbg{background-color:#ffffe0}
.limebg{background-color:#0f0}
.limegreenbg{background-color:#32cd32}
.linenbg{background-color:#faf0e6}
.magentabg{background-color:#f0f}
.maroonbg{background-color:#800000}
.mediumaquamarinebg{background-color:#66cdaa}
.mediumbluebg{background-color:#0000cd}
.mediumorchidbg{background-color:#ba55d3}
.mediumpurplebg{background-color:#9370db}
.mediumseagreenbg{background-color:#3cb371}
.mediumslatebluebg{background-color:#7b68ee}
.mediumspringgreenbg{background-color:#00fa9a}
.mediumturquoisebg{background-color:#48d1cc}
.mediumvioletredbg{background-color:#c71585}
.midnightbluebg{background-color:#191970}
.mintcreambg{background-color:#f5fffa}
.mistyrosebg{background-color:#ffe4e1}
.moccasinbg{background-color:#ffe4b5}
.navajowhitebg{background-color:#ffdead}
.navybg{background-color:#000080}
.oldlacebg{background-color:#fdf5e6}
.olivebg{background-color:#808000}
.olivedrabbg{background-color:#6b8e23}
.orangebg{background-color:#ffa500}
.orangeredbg{background-color:#ff4500}
.orchidbg{background-color:#da70d6}
.palegoldenrodbg{background-color:#eee8aa}
.palegreenbg{background-color:#98fb98}
.paleturquoisebg{background-color:#afeeee}
.palevioletredbg{background-color:#db7093}
.papayawhipbg{background-color:#ffefd5}
.peachpuffbg{background-color:#ffdab9}
.perubg{background-color:#cd853f}
.pinkbg{background-color:#ffc0cb}
.plumbg{background-color:#dda0dd}
.powderbluebg{background-color:#b0e0e6}
.purplebg{background-color:#800080}
.rebeccapurplebg{background-color:#663399}
.redbg{background-color:#f00}
.rosybrownbg{background-color:#bc8f8f}
.royalbluebg{background-color:#4169e1}
.saddlebrownbg{background-color:#8b4513}
.salmonbg{background-color:#fa8072}
.sandybrownbg{background-color:#f4a460}
.seagreenbg{background-color:#2e8b57}
.seashellbg{background-color:#fff5ee}
.siennabg{background-color:#a0522d}
.silverbg{background-color:#c0c0c0}
.skybluebg{background-color:#87ceeb}
.slatebluebg{background-color:#6a5acd}
.slategraybg{background-color:#708090}
.slategreybg{background-color:#708090}
.snowbg{background-color:#fffafa}
.springgreenbg{background-color:#00ff7f}
.steelbluebg{background-color:#4682b4}
.tanbg{background-color:#d2b48c}
.tealbg{background-color:#008080}
.thistlebg{background-color:#d8bfd8}
.tomatobg{background-color:#ff6347}
.turquoisebg{background-color:#40e0d0}
.violetbg{background-color:#ee82ee}
.wheatbg{background-color:#f5deb3}
.whitebg{background-color:#fff}
.whitesmokebg{background-color:#f5f5f5}
.yellowbg{background-color:#ff0}
.yellowgreenbg{background-color:#9acd32}
shield_with_heart Verified and Powered by A-Z Business Ecosystems VID:89734511
Established Date:Nov. 2, 2024