Colors

Background color in getcss


Just give the class name of any color from the list of 140 html color names to your element :

<div>
<div class="forestgreen">
<p>Background color of this element is ForestGreen.</p>
</div>
</div>

Background color of this element is ForestGreen.

You can set the background color of an element using html color name with lighten or darken property also:


Background color having lighten effect
<div>
<div class="mediumvioletred-dark-20">
<p>Background color of this element is MediumVioletRed with 20% darkness.</p>
</div>
</div>

Background color of this element is MediumVioletRed with 20% darkness.

Background color having darken effect
<div>
<div class="slateblue-light-60">
<p>Background color of this element is slateblue with 60% lightness.</p>
</div>
</div>

Background color of this element is slateblue with 60% lightness.

Text color in getcss


Just add {colorname*-txt} to get the color of a text:

<div>
<div class="indigo-txt">
<p>Text color of this element is Indigo.</p>
</div>
</div>

Text color of this element is Indigo.

*Any valid HTML color name.

Sample Color Palette

PeachPuff-dark-80

PeachPuff-dark-60

PeachPuff-dark-40

PeachPuff-dark-20

PeachPuff

PeachPuff-light-20

PeachPuff-light-40

PeachPuff-light-60

PeachPuff-light-80

YellowGreen-dark-80

YellowGreen-dark-60

YellowGreen-dark-40

YellowGreen-dark-20

YellowGreen

YellowGreen-light-20

YellowGreen-light-40

YellowGreen-light-60

YellowGreen-light-80

Purple-dark-80

Purple-dark-60

Purple-dark-40

Purple-dark-20

Purple

Purple-light-20

Purple-light-40

Purple-light-60

Purple-light-80

PowderBluenk-dark-80

PowderBlue-dark-60

PowderBlue-dark-40

PowderBlue-dark-20

PowderBlue

PowderBlue-light-20

PowderBlue-light-40

PowderBlue-light-60

PowderBlue-light-80

List of standard web colors

Use these colors with the 'getcss' framework without knowing their color code.

Pink Colors

mediumvioletred

deeppink

palevioletred

hotpink

lightpink

pink

Red Colors

darkred

red

firebrick

crimson

indianred

lightcoral

salmon

darksalmon

lightsalmon

Orange Colors

orangered

tomato

darkorange

coral

orange

Yellow Colors

darkkhaki

gold

khaki

peachpuff

yellow

palegoldenrod

moccasin

papayawhip

lightgoldenrodyellow

lemonchiffon

lightyellow

Brown Colors

maroon

brown

saddlebrown

sienna

chocolate

darkgoldenrod

peru

rosybrown

goldenrod

sandybrown

tan

burlywood

wheat

bisque

blanchedalmond

cornsilk

Purple, Violet, and Magenta Colors

indigo

purple

darkmagenta

darkviolet

darkslateblue

rebeccapurple

blueviolet

darkorchid

fuchsia

magenta

slateblue

mediumslateblue

mediumorchid

mediumpurple

orchid

violet

plum

thistle

lavender

Blue Colors

midnightblue

darkblue

mediumblue

blue

royalblue

steelblue

dodgerblue

deepskyblue

cornflowerblue

skyblue

lightskyblue

lightsteelblue

lightblue

powderblue

Cyan Colors

teal

darkcyan

lightseagreen

cadetblue

darkturquoise

mediumturquoise

turquoise

aqua

cyan

aquamarine

paleturquoise

lightcyan

Gray and Black Colors

black

darkslategray

dimgray

slategray

gray

lightslategray

darkgray

silver

lightgray

gainsboro

Green Colors

darkgreen

green

darkolivegreen

forestgreen

seagreen

olive

olivedrab

mediumseagreen

limegreen

lime

springgreen

mediumspringgreen

darkseagreen

mediumaquamarine

yellowgreen

lawngreen

chartreuse

lightgreen

greenyellow

palegreen

White Colors

mistyrose

antiquewhite

linen

beige

whitesmoke

lavenderblush

oldlace

aliceblue

seashell

ghostwhite

honeydew

floralwhite

azure

mintcream

snow

ivory

white

getcss logo


Designed and maintained with by Sunil

Source code licensed under MIT

Website content & documentation licensed under CC BY-NC-SA 4.0


Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.

getcss

Become a patron, sponsor, or backer!

Support getcss