skip navigation

CSS Colours md

Tagged in: design , colours
Grouped in: colour

Drab retro colours

The colors used in old designs were often fairly drab because of the limitations of printing technology at the time.

This set of named colours can be used directly in the CSS just with their names; no need to remember their hexadecimal values.

.header {
background-color: PowderBlue;
}

The caps are not needed but make it easier to read when two or more words are run together.

NB. Because of the old printing processes many retro designs would be limited to just two or three colours plus black and white (the paper colour). Black and white could be replaced with –OffBlack and –OffWhite variables.

Split neutrals: oranges/yellows/whites OR light/dark

Greens
  • Aquamarine
  • DarkSeaGreen
  • LightGreen
  • LightSeaGreen
  • MediumAquaMarine
  • Olive
  • OliveDrab
  • SeaGreen
  • PaleGreen
  • PaleTurquoise
Reds
  • Brown
  • Crimson
  • DarkRed
  • FireBrick
  • IndianRed
  • LightCoral
  • LightPink
  • LightSalmon
  • PaleVioletRed
  • RosyBrown
  • Tomato
  • Violet
Blues
  • AliceBlue
  • Azure
  • CadetBlue
  • Cornflower
  • DarkSlateBlue
  • LightSkyBlue
  • LightSteelBlue
  • PowderBlue
  • RoyalBlue
  • SkyBlue
  • SteelBlue
Neutrals
  • AntiqueWhite
  • Beige
  • Beige
  • BlanchedAlmond
  • BurlyWood
  • Cornsilk
  • DarkKhaki
  • FloralWhite
  • Gainsboro
  • GhostWhite
  • HoneyDew
  • Ivory
  • Lavender
  • LavenderBlush
  • LemonChiffon
  • LightGoldenRodYellow
  • LightGrey
  • LightSlateGrey
  • LightYellow
  • Linen
  • MintCream
  • Moccasin
  • OldLace
  • PaleGoldenRod
  • PapayaWhip
  • RosyBrown
  • SeaShell
  • Snow
  • Tan
  • Wheat
  • WhiteSmoke

For a full list of all CSS colours see the W3 Schools table.

View the CSS for this page 
.flex {
    background:white;
    color:black;
    padding: 1em;
    padding-top: .6em;
    border-radius: 20px;
}

.flexbox ul {
    list-style-type: none;
    padding: 0;
    column-count: 4;
}

.flexbox li {
    border-radius:8px;
    padding: 12px 5px;
    margin-bottom:1em;
    font-size: .8em;
    text-align: center;
    /* color: #fff; */
}

.flexbox:not(:last-of-type) li {
    color: #fff;
}


/* -------- Greens --------- */

    #Aquamarine {
    background:Aquamarine;
}

    #DarkSeaGreen {
    background:DarkSeaGreen;
}

    #LightGreen {
    background:LightGreen;
}

    #LightSeaGreen {
    background:LightSeaGreen;
}

    #MediumAquaMarine  {
    background:MediumAquaMarine;
}

    #Olive {
    background:Olive;
}

    #OliveDrab {
    background:OliveDrab;
}

    #SeaGreen {
    background:SeaGreen;
}

    #PaleGreen {
    background:PaleGreen;
}

    #PaleTurquoise {
    background:PaleTurquoise;
}


/* ------- Reds ------- */

    #Brown {
    background:Brown;
}

    #Crimson {
    background:Crimson;
}

    #DarkRed {
    background:DarkRed;
}

    #FireBrick {
    background:FireBrick;
}

    #IndianRed {
    background:IndianRed;
}

    #LightCoral {
    background:LightCoral;
}

    #LightPink {
    background:LightPink;
}

    #LightSalmon {
    background:LightSalmon;
}

    #PaleVioletRed {
    background:PaleVioletRed;
}

    #RosyBrown {
    background:RosyBrown;
}

    #Tomato {
    background:Tomato;
}

    #Violet {
    background:Violet;
}


 /* ------- Blues ----- */

    #AliceBlue {
    background:AliceBlue;
    color: RoyalBlue;
}

#Azure {
    background:Azure;
    color: RoyalBlue;
}

    #CadetBlue {
    background:CadetBlue;
}

    #Cornflower {
    background:CornflowerBlue;
}

    #DarkSlateBlue {
    background:DarkSlateBlue;
}

    #LightSkyBlue {
    background:LightSkyBlue;
}

    #LightSteelBlue {
    background:LightSteelBlue;
}

    #Navy {
    background:Navy;
}

    #PowderBlue {
    background:PowderBlue;
}

    #RoyalBlue  {
    background:RoyalBlue;
}

    #SkyBlue {
    background:SkyBlue;
}

    #SteelBlue {
    background:SteelBlue;
}


    #AntiqueWhite {
    background:AntiqueWhite;
}

    #Beige {
    background:Beige;
}

    #Beige {
    background:Beige;
}

    #BlanchedAlmond {
    background:BlanchedAlmond;
}

    #BurlyWood {
    background:BurlyWood;
}

    #Cornsilk {
    background:Cornsilk;
}

    #DarkKhaki {
    background:DarkKhaki;
}

    #FloralWhite {
    background:FloralWhite;
}

    #Gainsboro {
    background:Gainsboro;
}

    #GhostWhite {
    background:GhostWhite;
}

    #HoneyDew {
    background:HoneyDew;
}

    #Ivory  {
    background:Ivory ;
}

    #Lavender {
    background:Lavender;
}

    #LavenderBlush {
    background:LavenderBlush;
}

    #LemonChiffon {
    background:LemonChiffon;
}

    #LightGoldenRodYellow {
    background:LightGoldenRodYellow;
}

    #LightGrey {
    background:LightGrey;
}

    #LightSlateGrey {
    background:LightSlateGrey;
}

    #LightYellow {
    background:LightYellow;
}

    #Linen {
    background:Linen;
}

    #MintCream {
    background:MintCream;
}

    #Moccasin {
    background:Moccasin;
}

    #NavajoWhite  {
    background:NavajoWhite ;
}

    #OldLace {
    background:OldLace;
}

    #PaleGoldenRod {
    background:PaleGoldenRod;
}

    #PapayaWhip {
    background:PapayaWhip;
}

    #RosyBrown {
    background:RosyBrown;
}

    #SeaShell {
    background:SeaShell;
}

    #Snow {
    background:Snow;
}

    #Tan {
    background:Tan;
}

    #Wheat {
    background:Wheat;
}

    #WhiteSmoke {
    background:WhiteSmoke;
}
☝