TheBestTutorials.css Color Libraries
Color Libraries
Color libraries are small CSS files containing commonly used color values like safety standards, highway colors, fashion colors, army camouflage colors, and more.
Highway Yellow
Color libraries are very easy to use. Just add a library link to your web page:
<link rel="stylesheet" href="http://tutorials/lib/subhodaya-colors-highway.css">
And a class name to the HTML element you want to color:
<div class="subhodaya-highway-yellow">Highway Yellow
Try It Yourself »
US Highway Colors
| Name |
|---|
| TheBestTutorials-highway-brown |
| TheBestTutorials-highway-red |
| TheBestTutorials-highway-orange |
| TheBestTutorials-highway-schoolbus |
| TheBestTutorials-highway-yellow |
| TheBestTutorials-highway-green |
| TheBestTutorials-highway-blue |
Example
<div class="subhodaya-highway-green">Falcon Ridge Parkway</div>
<div class="subhodaya-highway-schoolbus">Schoolbus Stop</div>
Try It Yourself »
Download the CSS »
<div class="subhodaya-highway-schoolbus">Schoolbus Stop</div>
You can read more about highway colors in Federal Standard 595.
US Safety Colors
| Name |
|---|
| TheBestTutorials-safety-red |
| TheBestTutorials-safety-orange |
| TheBestTutorials-safety-yellow |
| TheBestTutorials-safety-green |
| TheBestTutorials-safety-blue |
| TheBestTutorials-safety-purple |
You can read more about safety colors in Federal Standard 595.
Camouflage Colors
| Name |
|---|
| TheBestTutorials-camo-brown |
| TheBestTutorials-camo-red |
| TheBestTutorials-camo-olive |
| TheBestTutorials-camo-field |
| TheBestTutorials-camo-earth |
| TheBestTutorials-camo-sand |
| TheBestTutorials-camo-tan |
| TheBestTutorials-camo-sandstone |
| TheBestTutorials-camo-dark-green |
| TheBestTutorials-camo-forest |
| TheBestTutorials-camo-light-green |
| TheBestTutorials-camo-green |
| TheBestTutorials-camo-dark-grey |
| TheBestTutorials-camo-grey |
| TheBestTutorials-camo-black |
You can read more about camouflage colors in Federal Standard 595.
Example
<div class="subhodaya-camo-earth">Camouflaged Truck</div>
<div class="subhodaya-camo-grey">Camouflaged Ship</div>
Try It Yourself »
Download the CSS »
<div class="subhodaya-camo-grey">Camouflaged Ship</div>
Vivid Colors
| Color Name |
|---|
| TheBestTutorials-vivid-pink |
| TheBestTutorials-vivid-red |
| TheBestTutorials-vivid-orange |
| TheBestTutorials-vivid-yellow |
| TheBestTutorials-vivid-green |
| TheBestTutorials-vivid-blue |
| TheBestTutorials-vivid-violet |
| TheBestTutorials-vivid-purple |
| TheBestTutorials-vivid-black |
| TheBestTutorials-vivid-white |
| TheBestTutorials-vivid-yellowish-pink |
| TheBestTutorials-vivid-reddish-orange |
| TheBestTutorials-vivid-orange-yellow |
| TheBestTutorials-vivid-greenish-yellow |
| TheBestTutorials-vivid-yellow-green |
| TheBestTutorials-vivid-yellowish-green |
| TheBestTutorials-vivid-bluish-green |
| TheBestTutorials-vivid-greenish-blue |
| TheBestTutorials-vivid-purplish-blue |
| TheBestTutorials-vivid-reddish-purple |
| TheBestTutorials-vivid-purplish-red |
You can read more about vivid colors in ISCC-NBS.
Example
<div class="subhodaya-vivid-red">
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
Try It Yourself »
Download the CSS »
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
European Signal Colors
| Color Nameeee |
|---|
| TheBestTutorials-signal-yellow |
| TheBestTutorials-signal-orange |
| TheBestTutorials-signal-red |
| TheBestTutorials-signal-violet |
| TheBestTutorials-signal-blue |
| TheBestTutorials-signal-green |
| TheBestTutorials-signal-grey |
| TheBestTutorials-signal-brown |
| subhodaya-signal-white |
| TheBestTutorials-signal-black |
You can read more about European signal colors in the RAL Color Standard.
Example
<div class="subhodaya-signal-red">Stopp</div>
<div class="subhodaya-signal-yellow">Wait</div>
<div class="subhodaya-signal-green">Go</div>
Try It Yourself »
Download the CSS »
<div class="subhodaya-signal-yellow">Wait</div>
<div class="subhodaya-signal-green">Go</div>
Food Colors
| Name |
|---|
| TheBestTutorials-food-apple |
| TheBestTutorials-food-aspargus |
| TheBestTutorials-food-apricot |
| TheBestTutorials-food-aubergine |
| TheBestTutorials-food-avocado |
| TheBestTutorials-food-banana |
| TheBestTutorials-food-butter |
| TheBestTutorials-food-blueberry |
| TheBestTutorials-food-cherry |
| TheBestTutorials-food-chocolate |
| TheBestTutorials-food-cranberry |
| TheBestTutorials-food-coffee |
| TheBestTutorials-food-egg |
| TheBestTutorials-food-grape |
| TheBestTutorials-food-kiwi |
| TheBestTutorials-food-lemon |
| TheBestTutorials-food-lime |
| TheBestTutorials-food-mango |
| TheBestTutorials-food-mushroom |
| TheBestTutorials-food-mustard |
| TheBestTutorials-food-mint |
| TheBestTutorials-food-olive |
| TheBestTutorials-food-orange |
| TheBestTutorials-food-pea |
| TheBestTutorials-food-peach |
| TheBestTutorials-food-pear |
| TheBestTutorials-food-pistachio |
| TheBestTutorials-food-plum |
| TheBestTutorials-food-raspberry |
| TheBestTutorials-food-saffron |
| TheBestTutorials-food-salmon |
| TheBestTutorials-food-spearmint |
| TheBestTutorials-food-squash |
| TheBestTutorials-food-strawberry |
| TheBestTutorials-food-tomato |
| TheBestTutorials-food-wheat |
| TheBestTutorials-food-wine |
