Named Colors CSS Files

By: | On:

  CSS  

Bootstrap rocks but sometimes you need more colors. Named Colors are a great solution.

Included are css files that can be included for Bootstrap like colors:

  • color-bg-AliceBlue
  • color-border-AliceBlue
  • color-text-AliceBlue
  • color-text-bg-AliceBlue

List of Named Colors with Color Swatches: https://www.w3.org/wiki/CSS/Properties/color/keywords

color-bg.css:

.color-bg-AliceBlue { background-color: #F0F8FF; }
.color-bg-AntiqueWhite { background-color: #FAEBD7; }
.color-bg-Aqua { background-color: #00FFFF; }
.color-bg-Aquamarine { background-color: #7FFFD4; }
.color-bg-Azure { background-color: #F0FFFF; }
.color-bg-Beige { background-color: #F5F5DC; }
.color-bg-Bisque { background-color: #FFE4C4; }
.color-bg-Black { background-color: #000000; }

color-border.css

.color-border-AliceBlue { border-color: #F0F8FF; }
.color-border-AntiqueWhite { border-color: #FAEBD7; }
.color-border-Aqua { border-color: #00FFFF; }
.color-border-Aquamarine { border-color: #7FFFD4; }
.color-border-Azure { border-color: #F0FFFF; }
.color-border-Beige { border-color: #F5F5DC; }
.color-border-Bisque { border-color: #FFE4C4; }
.color-border-Black { border-color: #000000; }

color-text.css

.color-text-AliceBlue { color: #F0F8FF; }
.color-text-AntiqueWhite { color: #FAEBD7; }
.color-text-Aqua { color: #00FFFF; }
.color-text-Aquamarine { color: #7FFFD4; }
.color-text-Azure { color: #F0FFFF; }
.color-text-Beige { color: #F5F5DC; }
.color-text-Bisque { color: #FFE4C4; }
.color-text-Black { color: #000000; }

color-text-bg.css

.color-text-bg-AliceBlue { background-color: #F0F8FF; color: #000000; }
.color-text-bg-AntiqueWhite { background-color: #FAEBD7; color: #000000; }
.color-text-bg-Aqua { background-color: #00FFFF; color: #FFFFFF; }
.color-text-bg-Aquamarine { background-color: #7FFFD4; color: #000000; }
.color-text-bg-Azure { background-color: #F0FFFF; color: #000000; }
.color-text-bg-Beige { background-color: #F5F5DC; color: #000000; }
.color-text-bg-Bisque { background-color: #FFE4C4; color: #000000; }
.color-text-bg-Black { background-color: #000000; color: #FFFFFF; }

On Github: https://github.com/campsoftware/namedColors-css