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