+

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.

brokersduncFXSeptember 03, 2019 05:50:02 AM

https://currency-trading-brokers.com/forex-comparisons-ratings-reviews-malaysia.html Penilaian-Penganggaran-Kadaran-Taksiran top-teratas asing devisa-tukaran-penukaran-pertukaran syarikat.

hzImmolotymnMWSeptember 19, 2019 12:32:46 AM

With Houzz dominating the online search engine results of your most important search phrase, it is essential that when web website traffic probably to Houzz that you will show on top of their directory site. We can help - Houzz marketing NY - [url=https://houzzilla.com/how-to-increase-houzz-traffic/]HOW TO INCREASE HOUZZ TRAFFIC[/url] Right Right Here at HouZzilla we have a designated group of marketing experts that particularly service Houzz administration and optimization. We are all "Certified Houzz Advertising And Marketing Professionals"- a Houzz marketing and advertising training program with a certification test. As specialists in Houzz account management along with optimization, Consumer HouZzilla regularly acquires clients leading organic Houzz positionings consisting of in Cincinnati, in addition to in endless towns across the nation.

NormanGugPESeptember 20, 2019 06:08:53 PM

Specialist cleaning today is greater than simply cleaning: modern equipment, resources and techniques of job transform it right into a genuine high-tech method that substantially modifies the traditional understanding of what it implies to actually "well-maintained". In house cleaning company - best [url=https://maidsmanhattan.club/maid-service-queens/]Maid service Queens[/url] - it is actually simple, convenient as well as affordable with our business. Trust fund the sanitation leaders to residence cleaning Brooklyn! Our team utilize specialist detergents and technical tools of global makers in our work as well as perform a superb work along with cleaning of any difficulty. [url=https://maidsmanhattan.club/][size=8]Domestic house cleaning services ny[/size][/url] Participation with the firm is the surety of an impeccable, lucrative as well as efficient cleansing of qualified property cleaning as well as encompassing areas. Currently, house cleaning services coming from our provider are

hzImmolotymnMWSeptember 24, 2019 07:00:54 AM

With Houzz controling the internet search engine results of your crucial search phrase, it is essential that when internet traffic more than likely to Houzz that you will certainly reveal in addition to their directory site. We can help - Houzz Strategy usa : [url=https://houzzilla.com/how-to-make-houzz-smo-right/]Houzz smo account[/url] Right Here at HouZzilla we have a designated team of marketer that particularly solution Houzz monitoring and also optimization. We are all "Certified Houzz Marketing And Advertising Professionals"- a Houzz marketing and advertising training program with a certification examination. As experts in Houzz account management in addition to optimization, Client HouZzilla routinely gets customers leading organic Houzz positionings consisting of in Newark, in addition to in unlimited communities throughout the country.

centrsnabbiogueNWSeptember 28, 2019 07:19:39 PM

??????? ?????? ?. ????? ?????? ???? ??????????? ??? ??????? ?????????? ?? ????? ?????? ??? ?????? ??????? ??? ?????. ??????? ????? ???? ?? ?????? ????? ?????????: ?? ????? ?????? ?????, ????? ????????? ???????? ??? ??? ???????????????? ????????? ???????????. ???? ??????? ?????, ???? ????? ????????, ????? ????? ????? ????. ????? ???????? ????? ? ??????? ???? ??????? ??? ????????? ?????, ??????? ????? ????????? ????? ??????????????? ?????, ??? ????? ? ?????? ?????????, ? ???????? ??? ?? ?????? ??????? ??????????????? ????? ??????? ?????? ??? ?????????? ???? ??????????. ?????? ??????????? ???????? ??? ??????????? ????????. ????? ???????? Yandex ????? ?????????? ?? ???? ?? 10 ??? ? ???????. ???????????? ?????? ? ?. ?????: ???????????? ??????????? ? ??????????, ????????? ????????, ?????? ??????????, ?????????? ????? ???????, ???????? ??????? ????? ?? ?????. ??? ?????? ? ????? ????????? ?????????? ??????? ?????????? ????? ? ???????????? ????????, ??? ?????? ?? ????? ???? ?????. ??????? ?????????? ??

bbzbiogueUPOctober 09, 2019 03:47:09 AM

? ??? ?? ??????? ????????????? ???, ? ????? ???? ????????????? ???????? ??????, ?? ????? ?????????? ???????????? ??????? ??? ????. ??????? ???????????? ???????, ?????????? ?????????, ???????????? ?????? ?????????????. ? ????? ????? ?? ?????? ?????? ??????? , ?????????? — ??????????, ?????????? ???????, ???????? ??????? ??????? ???, ????????? ???????, ????????? ???????? (??), ???????-???????, ???????? ?????????? ? ?????????????????? ????????? ????????, ???????????? ???????????? ??????? ??????? ??? ?? ?????? ??? (??????????? ??? ????????), ????????? ?????????? ? ?????????????????? ???????? ????????, ??????? ???????? ??????? ??? ???????????????????, ???????? ? ????????????? ???????????? (???????, ???, ????, ???, ?????, ???) ???????? ????????, ?????????????? ????????? ? ?????????, ? ????? ??? ??? ????????? ??????? ??????? ???? ??? ????????. ? ??????? ????????????? ????????, ?????????? ??????????? ??????????? ????. ???????????? ????????????? ??????? ? ??????? ???? ????????????? ???????? ??? 65 [ur

KRbiogueKIOctober 10, 2019 08:27:49 AM

Our firm make branded furnishings , and with we pay close attention to standards safety and functionality. Work is underway with customer on of all stages do multilateral analysis location objects,produce advance calculations.You are interested in any questions . Ikea kitchen redo considered one of especially difficult classes In the specialized company Partnership OKTASI Hollis Hills involved good specialists, exactly they all know about Custom kitchen renovations. The Holding ready to provide quality Cheap ikea kitchen remodel by democratic rates . Masters with great practical experience work help completely upgrade in a few days perform relatively inexpensive repair . The price depends on selected style of kitchen. Each room apartments, houses, cottages or other housing Mill Island unique and has own multifunction load. This especially touches modern kitchens. Farm kitchen remodel Little Italy : [url=https://kitchen-renovation.club]kitchen renovatio