To make your website beautiful, more attractive and stunning, it is very necessary to choose good color schemes for your website.
Normally, a simple web page includes navigation bar
at the top,
sticky footer at the bottom and some grid or any other user interface in the body at middle position. If we take care color schemes
about these three web components, we can get more traffic on our site. Because these three things will be used in every page. Remember,
If your coding is very smart, then you need only to make changes in your header and footer file, which will obviously affect on all
other web pages
linked to them. So, color scheme (background, foreground and border)
is very important for your website especially at designing point of view. Now a days, web designers use eye catching colors rather
than classic css colors. Therefore, PixelzUI have this function in its rich and fully responsive UI library. We not only provide
background colors, but also text and border colors for our designers. You can use these colors in all of our components including
CSS and JS
. Even these colors will help in your custom css rules. PixelzUI
provides very impressive color schemes for text, background and border in your web-page(s), web-app(s), template(s) and responsive
websites. We offer forty
color classes through HTML-DOM. These colors will further help to add
different colors' schemes in other components
as well as pages.
=> We have set border-width:1vw; in demo & editor section just for visibility.
Now choosing a good color scheme is not a scary thing. If you are unaware of using colour combination in your website, PixelzUI
will help you in this way. Because, it is necessary to improve your website and brand identity among the people. These colors will
definitely emphasize you about painting ideas. Color schemes of PixelzUI make your
etc. more attractive, beautiful and stunning. In startup,
we are offering only forty
colors for web designers. Your support will bring more and more attractive and best
colors in PixelzUI. Followings are the three
types of colors.
- Background Colors
- Foreground Colors
- Border Colors
After making the combination of our color scheme, we give one hundred and twenty two
colors for designers. Also,
you can use these colors in hovering effects as background, foreground and border as illustrated in usage section below. For example,
set turquoise color as background and teal color as background hovering effect for your button. No need to add transition effects,
PixelzUI will do it for you. To check this feature, go to demo section below. They will look like paint colors as well. Even
customizing a web template using PixelzUI is very easy. PixelzUI also gives you dark and light color contrast for a specific color
like maroon color as dark for orange or red color. Similarly there is a light green color called lime and dark green color related to
classic. Following are the classes to use colors in your scripts.
Adding these colors in your website is so simple. PixelzUI has set prefixes and postfixes for color scheme. Prefixes are used for background,
foreground and borders while postfixes are used for colors. PixelzUI has set .b-
prefix for background, foreground and border respectively. For colors, there are forty
which are use right after the hyphen(-) of prefix. For example, If you want to style a div box and want to give background color as
purple, foreground or text color as white and border color as black. Then, your css classes while using PixelzUI library will be
respectively. Similarly, postfix for sky blue
color will be -sb
and for indigo color as -id
. Here are the steps to add these web colors
your website in a right way.
=> * means (tp, wt, az, gd, yl, og, or, sl, rd, cr, bn, rr, lm, gr, dg, ov, ed, aq,
sb, bl, db, nb, tq, cn, tl, sg, vt, pk, mg, mn, pl, bv, id, kh, bw, ch, sv, gy, lb & bk).
- Add .bg-* as background color in the class attribute of html tags capable of colors' styling.
- Add .bg-*-hvr as extra class for hovering effects.
<div class="bg-* bg-*-hvr"></div>
- Add .t-* as foreground color in the class attribute of html tags capable of colors' styling.
- Add .t-*-hvr as extra class for hovering effects.
<div class="t-* t-*-hvr"></div>
- Add .br-* as border color in the class attribute of html tags capable of colors' styling.
- Add .br-*-hvr as extra class for hovering effects.
<div class="br-* br-*-hvr"></div>
Here is the live example of every color that are discussed above. This section is like a color wheel or color plate. Choose your color
scheme and add it in your website.
Foreground & Borders Colors
Transparent .t-tp & .br-tp
White .t-wt & .br-wt
Azure .t-az & .br-az
Golden .t-gd & .br-gd
Yellow .t-yl & .br-yl
Orange .t-og & .br-og
OrangeRed .t-or & .br-or
Salmon .t-sl & .br-sl
Red .t-rd & .br-rd
Crimson .t-cr & .br-cr
Brown .t-bn & .br-bn
RockyRoad .t-rr & .br-rr
Lime .t-lm & .br-lm
Green .t-gr & .br-gr
DarkGreen .t-dg & .br-dg
Olive .t-ov & .br-ov
Eden .t-ed & .br-ed
Aqua .t-aq & .br-aq
SkyBlue .t-sb & .br-sb
Blue .t-bl & .br-bl
DarkBlue .t-db & .br-db
Navy .t-nb & .br-nb
Turquoise .t-tq & .br-tq
Cyan .t-cn & .br-cn
Teal .t-tl & .br-tl
SlateGrey .t-sg & .br-sg
Violet .t-vt & .br-vt
Pink .t-pk & .br-pk
Magenta .t-mg & .br-mg
Maroon .t-mn & .br-mn
Purple .t-pl & .br-pl
BlueViolet .t-bv & .br-bv
Indigo .t-id & .br-id
Khaki .t-kh & .br-kh
Burlywood .t-bw & .br-bw
Chocolate .t-ch & .br-ch
Silver .t-sv & .br-sv
Grey .t-gy & .br-gy
LightBlack .t-lb & .br-lb
Black .t-bk & .br-bk
You can make or modify color scheme of your own choice by using this editor and make your website look good.
- Select background color from first color picker.
- Select foreground color from second color picker.
- Select border color from third color picker.
- See the effect in dummy panel and HTML code.
- Copy that HTML code and place it in your script.
Design Responsive Websites