+

Colors






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, modules as well as pages.

=>We have set border-width:1vw; in demo & editor section just for visibility.

Types

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 containers, div wrappers, grids, buttons, anchor tags, toggle buttons, input fields, panels, scrollbars, navigation bars 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.

  1. Background Colors
  2. Foreground Colors
  3. Border Colors

Classes

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.

  1. .tp
  2. .wt
  3. .az
  4. .gd
  5. .yl
  6. .og
  7. .or
  8. .sl
  9. .rd
  10. .cr
  11. .bn
  12. .rr
  13. .lm
  14. .gr
  15. .dg
  16. .ov
  17. .ed
  18. .aq
  19. .sb
  20. .bl
  21. .db
  22. .nb
  23. .tq
  24. .cn
  25. .tl
  26. .sg
  27. .vt
  28. .pk
  29. .mg
  30. .mn
  31. .pl
  32. .bv
  33. .id
  34. .kh
  35. .bw
  36. .ch
  37. .sv
  38. .gy
  39. .lb
  40. .bk
.

How to use

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-, .t- and .br prefix for background, foreground and border respectively. For colors, there are forty postfixes 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 .bg-pl, .t-wt and .br-bk 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.
  1. Add .bg-* as background color in the class attribute of html tags capable of colors' styling.
  2. <div class="bg-*"></div>
  3. Add .bg-*-hvr as extra class for hovering effects.
  4. <div class="bg-* bg-*-hvr"></div>
  5. Add .t-* as foreground color in the class attribute of html tags capable of colors' styling.
  6. <div class="t-*"></div>
  7. Add .t-*-hvr as extra class for hovering effects.
  8. <div class="t-* t-*-hvr"></div>
  9. Add .br-* as border color in the class attribute of html tags capable of colors' styling.
  10. <div class="br-*"></div>
  11. Add .br-*-hvr as extra class for hovering effects.
  12. <div class="br-* br-*-hvr"></div>
=>* 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).

Demo

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.
Background Colors

Transparent .bg-tp
White .bg-wt
Azure .bg-az
Golden .bg-gd
Yellow .bg-yl
Orange .bg-og
OrangeRed .bg-or
Salmon .bg-sl
Red .bg-rd
Crimson .bg-cr
Brown .bg-bn
RockyRoad .bg-rr
Lime .bg-lm
Green .bg-gr
DarkGreen .bg-dg
Olive .bg-ov
Eden .bg-ed
Aqua .bg-aq
SkyBlue .bg-sb
Blue .bg-bl
DarkBlue .bg-db
Navy .bg-nb
Turquoise .bg-tq
Cyan .bg-cn
Teal .bg-tl
SlateGrey .bg-sg
Violet .bg-vt
Pink .bg-pk
Magenta .bg-mg
Maroon .bg-mn
Purple .bg-pl
BlueViolet .bg-bv
Indigo .bg-id
Khaki .bg-kh
Burlywood .bg-bw
Chocolate .bg-ch
Silver .bg-sv
Grey .bg-gy
LightBlack .bg-lb
Black .bg-bk
.
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
.

Editing

You can make or modify color scheme of your own choice by using this editor and make your website look good.

  1. Select background color from first color picker.
  2. Select foreground color from second color picker.
  3. Select border color from third color picker.
  4. See the effect in dummy panel and HTML code.
  5. Copy that HTML code and place it in your script.

Background Color

Foreground Color

Border Color

Design Responsive Websites

HTML



Leave a Reply

Your email address will not be published. Required fields are marked.