");width:28px;height:32px}.navbar-nav{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static}#main-header .fillLogo,.fillLogo{fill:#297eda}#main-header .fillBody,.fillBody{fill:#252525}.highlight{display:inline-block;position:relative;z-index:1}.highlight:after{bottom:.3em;content:"";height:25%;left:0;position:absolute;width:100%;z-index:-1;background:#60d0ff}#wrapper-navbar{left:0;padding:12px 0;z-index:500;background-color:var(--wp--preset--color--body-bg);box-shadow:0 6px 45px 2px rgba(14,49,91,.129)}#wrapper-navbar+.wrapper{padding-top:70px}#main-header .navbar-brand svg{width:180px}#main-nav{align-content:flex-start}#breadcrumbs{margin-bottom:1em;width:auto;max-width:1400px;display:block;padding-right:1rem;z-index:10;position:relative}#breadcrumbs a{color:#fff}#breadcrumbs .active,#breadcrumbs .breadcrumb_last{color:#60d0ff;font-weight:500}#breadcrumbs li{display:inline-block;margin-right:.1em}#breadcrumbs li i{margin-left:.5em}#breadcrumbs i{transform:scaleX(1.1) scaleY(.8);opacity:.9}#breadcrumbs svg{stroke:#fff;stroke-width:2px;transform:scale(.65) translateY(-1px)}.entry-header{background:#0c1a34;overflow:hidden;padding:30px 0;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw;width:100vw}.entry-header:before{background:#132541;bottom:0;-webkit-clip-path:polygon(0 0,100% 0,100% 100%,79% 100%);clip-path:polygon(0 0,100% 0,100% 100%,79% 100%);content:"";display:block;position:absolute;right:0;top:0;width:60%}.entry-title{margin-bottom:10px;max-width:1400px;margin-left:auto;margin-right:auto;display:block;padding-left:1rem;padding-right:1rem;font-weight:900}.entry-header--single{padding:3em 0;margin-bottom:3em}.entry-content p+h3{margin-top:1.5em}.entry-content p+figure.wp-block-image:not(:last-child){margin-top:24px;margin-bottom:24px}.entry-content p.text-center a img{margin-top:80px}.site-image-text--label{background:#c0daf7;color:#12436e;border-radius:30px;font-weight:700;font-size:.75em;margin-bottom:1.325em;padding:.4em .9em .25em;text-transform:uppercase;width:fit-content;display:block}@media (min-width:375px){.col-actions .btn-content{display:none}.btn{width:auto}.container{max-width:343px}}@media (min-width:600px){.container{max-width:568px}}@media (min-width:782px){.col-md-auto{flex:0 0 auto;width:auto}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-9{flex:0 0 auto;width:75%}.container{max-width:746px}.col-actions .btn-content{display:block;white-space:nowrap;padding-left:8px}body.admin-bar #wrapper-navbar{top:32px}.navbar{padding-left:0;padding-right:0}.entry-header{padding:3.5em 15px 4em}}@media (min-width:992px){.entry-header{padding-top:4em;padding-bottom:4.5em}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-7{flex:0 0 auto;width:58.33333333%}.container{max-width:970px}.btn{min-width:unset!important}.col-actions .btn{padding-left:20px;padding-right:20px}.col-actions .btn-icon-svg{margin-right:4px;vertical-align:0}}@media (min-width:1170px){.entry-header{padding-right:0;padding-left:0}.container{max-width:1140px}.col-xl-auto{flex:0 0 auto;width:auto}.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xl .navbar-toggler,.navbar-toggler{display:none}#main-header .dropdown,#main-header .navbar{position:unset;display:flex;justify-content:center}#main-header .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;left:50%;transform:translateX(-50%);box-shadow:0 4px 10px -3px rgba(0,0,0,.15);min-width:1200px;padding-top:1.5em}.dropdown-menu .row--mega-menu{--grid-layout-gap:4em;--grid-column-count:4;--grid-item--min-width:200px;--gap-count:calc(var(--grid-column-count) - 1);--total-gap-width:calc(var(--gap-count) * var(--grid-layout-gap));--grid-item--max-width:calc((100% - var(--total-gap-width)) / var(--grid-column-count));display:grid;grid-template-columns:repeat(auto-fill,minmax(max(var(--grid-item--min-width),var(--grid-item--max-width)),1fr));grid-gap:var(--grid-layout-gap);text-align:left}#main-header .dropdown-menu .widget-title{display:flex;justify-content:space-between;line-height:2.5em}#main-header .mm-icon{display:inline-block;width:2em;height:2em}#main-header .mm-icon svg{height:100%;width:auto}}@media (min-width:1200px){.btn-lg,.navbar-brand,.navbar-toggler{font-size:1.3125rem}h1{font-size:3.15rem}h2{font-size:2.3625rem}h3{font-size:1.54875rem}}@media (min-width:1500px){.dropdown-menu .row--mega-menu{--grid-layout-gap:6em}}@media (min-width:1530px){.container{max-width:1500px}}@media (max-width:1530px) and (min-width:1169.98px){#main-header{max-width:1400px}}@media (max-width:1310px) and (min-width:1169.98px){.col-actions .btn{padding-left:12px;padding-right:12px;font-size:.95rem}#main-nav .nav-link{letter-spacing:-.2px;font-size:.95rem;padding-right:.25em;padding-left:.25em}}@media (max-width:1169.98px){#main-nav .dropdown-menu h3:after,#main-nav .dropdown-toggle:after{border-top:.375rem solid transparent;border-right:0;border-bottom:.375rem solid transparent;border-left:.375rem solid}#main-nav .dropdown-menu ul.menu,#main-nav .navbar-nav .dropdown-menu{position:absolute;left:100%;height:100%;transform:translateX(0);width:100%}#main-nav .dropdown-menu h3,#main-nav .dropdown-menu ul a{font-size:20px;padding:8px 20px}#main-header.container,.container{max-width:unset}.col-nav{width:0;flex:0;padding:0}#main-nav{border-left:4px solid #297eda;box-shadow:0 0 0 0 #000;height:100vh;left:0;max-width:calc(100% - 30px);overflow:hidden;position:fixed;top:0;width:400px;z-index:999999;background:#f8fbfe}#main-nav:not(.show),#main-nav:not(.show-nav){box-shadow:0 0 0 0 transparent;opacity:0;transform:translateX(-100%)}#main-nav .nav-link{padding-left:20px;padding-right:20px;font-size:20px;display:flex;align-items:center;justify-content:space-between}#main-nav .navbar-inner{height:100%!important;flex-basis:100%;flex-grow:1}#main-nav .navbar-brand--mobile{display:block;margin-left:20px;margin-right:auto}#main-nav .navbar-mobile--close{display:block;padding-left:20px;font-size:20px;color:#252525;line-height:46px}#main-nav .navbar-toggler--mobile{margin-right:10px;font-size:20px;width:36px;height:36px}#main-nav .navbar-nav .dropdown-menu{top:0;padding:8px 0 0;border-radius:0;display:block}#main-nav .dropdown{position:unset}#main-nav .dropdown-menu h3{color:#252525;text-transform:capitalize;font-weight:500;display:flex;align-items:center;justify-content:space-between}#main-nav .dropdown-menu h3:after{display:inline-block;margin-left:.3rem;vertical-align:.235em;content:""}#main-nav .dropdown-menu ul.menu{top:0;background-color:#f8fbfe;background-clip:padding-box;border:0 solid rgba(255,255,255,.3);padding-top:8px}#main-nav.show,#main-nav.show-nav{box-shadow:4px 0 10px 0 #000;opacity:1;transform:translateX(0)}#main-nav .dropdown-menu.show{opacity:1;transform:translateX(-100%)}#wrapper-navbar:before{content:"";display:block;position:fixed;width:100%;height:100vh;background-color:rgba(0,0,0,0);top:0;bottom:0;left:0;transform:translateX(-100%)}}@media (max-width:991.98px){.form-wrapper input{margin-bottom:20px}}@media (max-width:781.98px){h1,h2,h3{line-height:1.35;margin-bottom:.7546875rem}h1{font-size:1.625rem}h2{font-size:1.3rem}h3{font-size:1.2rem}.navbar-nav#main-menu{align-items:initial!important}}@media (max-width:718.98px){#breadcrumbs{font-size:13px}.entry-header #breadcrumbs,.entry-header .form-inner,.entry-header p,.entry-title{text-align:center}}@media (max-width:599.98px){.col-actions .btn{width:auto}#main-nav{max-width:calc(100% - 15vw)}}@media (max-width:449.98px){#main-nav .dropdown-menu h3,#main-nav .dropdown-menu ul a,#main-nav .nav-link{font-size:4.25vw;line-height:5.5vw}.services_panel_columns-6{gap:1em;flex-wrap:wrap}.services_panel{max-width:140px;width:100%}.col.col-logo{flex:0 0 auto;width:auto;padding-right:0;padding-top:5px}#main-header .navbar-brand svg{width:150px}}@media (max-width:399.98px){#main-header.container{padding-left:.5em;padding-right:.5em}.col-actions .btn{padding-left:12px;padding-right:12px}}@media (max-width:374.98px){.col-actions .btn-green{margin-right:auto!important}.col-actions .btn-content{font-size:.7rem;margin-left:8px;line-height:1;padding-top:2px;font-weight:700}.navbar-brand{display:block;text-align:center;padding-top:0}}/* services critical */.wrapper{padding-top:0;padding-bottom:0}.entry-title--services{color:#fff;margin-bottom:.5em;position:relative;display:block;padding-left:0;padding-right:0;font-weight:900;line-height:1.1}.entry-header--services .container{position:relative;max-width:1400px}.entry-header--services .row{align-items:center}.entry-header--services #breadcrumbs{padding-left:0}.entry-header--services .form-inner{align-items:center;display:flex;gap:.875rem}.entry-header--services .form-inner>.form-group{max-width:400px;width:100%}.entry-header--services .form-inner .form-control{border-radius:.3rem}.entry-header--services p{font-size:1.125rem;line-height:1.7}h1.entry-title--services{font-size:2rem;font-weight:500}h2.entry-title--services{font-size:2.75rem}.heading-contact-wrapper{margin-top:1.5em}.heading-company-highlight{align-items:center;background-color:rgba(255,255,255,.08);display:flex;padding:.4rem 1.2rem .45rem;min-width:22vw}.heading-company-highlight:not(:last-of-type){margin-bottom:1.25rem}.heading-company-highlight-content{margin-left:1.15rem;padding-top:.3em;padding-bottom:.4em}.heading-company-highlight-title{font-size:2.75rem;font-weight:900;line-height:1.15}.heading-company-highlight-subtitle{font-weight:500;line-height:1em;padding-right:.5em}.heading-company-highlight img{height:75px;-o-object-fit:cover;object-fit:cover;width:75px!important}.site-video-text .video-outer{position:relative}.site-video-text .video-outer .video{background:#000;border:11px solid #fff;border-radius:10px;box-shadow:0 10px 45px rgba(14,49,91,.129);line-height:0;position:relative;z-index:1}.site-video-text .video-outer .video img{opacity:.85}.site-video-text .video-test--col__content .h2,.site-video-text .video-test--col__content h2{line-height:1.125}.single-csi .site-video-text,.single-services .site-video-text{padding:1.875em 1em}section{padding:40px 0}.site-video-text--inner-container.site-video-text--top{align-items:flex-start}.site-video-text--inner-container{width:100%;margin-right:auto;margin-left:auto;box-sizing:border-box;direction:ltr;grid-gap:2em}.site-video-text .video-test--col__video{padding-top:1.5em;padding-bottom:3.5em}.site-video-text{overflow:hidden;padding:1.875em 0}@media (min-width:782px){.site-video-text{overflow:hidden}.single-csi .site-video-text,.single-services .site-video-text,.site-video-text{padding:2.25em 2em}.site-video-text .video-test--col__video{padding-top:3em;padding-bottom:5em}}@media (min-width:992px){section{padding:80px 0}.single-csi .site-video-text,.single-services .site-video-text,.site-video-text{padding:4.5em 0 1em}.site-video-text--inner-container{display:grid;grid-template-columns:40% 1fr;grid-template-rows:auto;align-items:center!important}.site-video-text .video-test--col__video{padding-top:0;padding-bottom:0;padding-left:2em}}@media (min-width:1170px){.site-video-text .video-test--col__video{padding-left:0}.site-video-text--inner-container{padding-left:2em;padding-right:2em}}@media (min-width:1530px){.container,.site-video-text--inner-container{max-width:1500px}}@media (min-width:2400px){.heading-company-highlight{min-width:unset;width:533px}}@media (max-width:1169.98px){.container{max-width:unset}}@media (max-width:991.9px){.heading-company-highlight{justify-content:start;max-width:400px;width:100%;min-width:unset;margin-left:auto;margin-right:auto}.heading-company-highlights{margin-top:40px}.entry-header--services .col{flex:0 0 auto;width:100%}}@media (max-width:782.9px){#wrapper-navbar+.wrapper{padding-top:60px}}@media (max-width:718.9px){.entry-header--services #breadcrumbs,.entry-header--services .form-inner,.entry-header--services p,.entry-title--services{text-align:center}.entry-header--services .form-inner{flex-direction:column}h1.entry-title--services{font-size:1.5rem;margin-bottom:.3em}h2.entry-title--services{font-size:2.25rem;margin-bottom:.3em}#breadcrumbs{font-size:13px}}@media (max-width:575px){.heading-company-highlight-title{font-size:20px}}@media (max-width:1185px) and (min-width:992px){.entry-header--services .form-inner{flex-direction:column;align-items:flex-start}}@media (max-width:1033.9px) and (min-width:992px){.heading-company-highlight{min-width:unset;width:100%;max-width:365px}}
Website Color Picker | Find Your Next Website Color Scheme Generate Color Schemes Take advantage of this tool to help you find color schemes for your next website design or digital marketing project!
Types of Color Schemes Complementary Complementary color schemes involve using two colors that are opposite each other on the color wheel. These color combinations tend to create a high contrast look and can be very visually striking. Examples of complementary color combinations include red and green, blue and orange, and purple and yellow. When used in design, these colors can help create a sense of balance and harmony in a composition, but they should be used with care since they can also be overpowering if used too heavily..
Split-Complementary A split-complementary color scheme involves using a base color and then selecting the two colors adjacent to its complement. This creates a look that is similar to a complementary color scheme, but with a little more harmony and less tension. This is achieved by using a base color and then pairing it with two colors that are adjacent to its complement. For example, if the base color is blue, the two colors that are adjacent to its complement (orange) would be blue-green and blue-purple. This creates a color scheme that is less contrasting and more harmonious than the traditional complementary color scheme. This type of scheme is often used in design to create a dynamic, yet balanced look.
Analogous Analogous color schemes involve selecting three colors that are next to each other on the color wheel. These color combinations tend to create a cohesive and harmonious look, as the colors are closely related. Examples of analogous color schemes include red, orange and yellow, or blue, blue-green and green. This color scheme is used in design to create a sense of continuity and flow, the colors are chosen to be close to each other on the color wheel. They can also be used to create a monochromatic look by using different shades of the same color. This type of color scheme is often used in nature-inspired designs, landscapes, and seascapes, or to create a calming and soothing atmosphere.
Triadic A triadic color scheme involves using three colors that are evenly spaced around the color wheel. This creates a bold and dynamic color combination. Triadic color schemes are formed by selecting three colors that are evenly spaced apart on the color wheel, for example, red, yellow, and blue. These color combinations can create a high contrast and vibrant look. They are often used to create a sense of movement and energy in a design. Triadic color combinations can be challenging to use in design, as they can be difficult to balance and harmonize. However, when used effectively they can create a bold and striking visual impact. They are often used in posters, flyers, postcards, and other designs that require a strong visual impact.
Tetradic A tetradic color scheme involves using four colors arranged into two complementary color pairs. This creates a rich and versatile color combination. Tetradic color combinations are formed by selecting four colors that are arranged into two complementary pairs. For example, a tetradic color scheme could include red, yellow-green, blue-purple and yellow-orange. This creates a rich and versatile color combination that offers many possibilities for color harmony and contrast. This type of color scheme can be quite challenging to use, as it requires a good understanding of color relationships to balance and harmonize the different hues. Tetradic color schemes are often used in advertising, packaging, and other types of designs that require a high degree of visual interest and impact.
Don’t forget to check out our other web design tools !