Business Systems Center
 

MyNAVSUP Color Palette

These are the key colors used for MyNAVSUP Portal

#1a68b6

#4285f4

#efefef

#f4f4f2

#ffc107

#ff2348

The MyNAVSUP site uses the two darkest colors: #1a68b6 and #4285f4 for the header and key buttons. The light greys are used for backgrounds and the colors yellow, and red are used for stand-out, alert items/action item buttons. 

   
 

NAVY Color Palette

Official Navy Colors - Source

#08262c

#003b4f

#088199

#c6ccd0

#ffc107

#ff2348

In this example with the NAVY site, the darkest colors: #08262c, #003b4f and #088199 are reserved for the header and key buttons. The light greys are for backgrounds while using dark text colors for a crisp, distinct, very readable contrast. Yellows and red are used for stand-out, alert items/action item buttons. 

   
 

NAVSUP Public Site Color Palette

#151515

#212f3c

#2c3e50

#ecf0f1

#ffd400

#c63727

In this example with the NAVSUP Public site, the darker colors: #151515, #212f3c and #2c3e50 are used for the header and key buttons. The light greys are for backgrounds. Yellow and red are used for stand-out, alert items/action item buttons. Light grey/white buttons can also stand out nicely over dark blue backgrounds. 

   

Contrast Palette

Here is a collection of complimentary contrasting colors.

#43bfff

#5592cb

#b4a5ff

#ffd257

#4de735

#00a8ff

#487eb0

#9c88ff

#fbc531

#4cd137

#0097e6

#440739e

#8c7ae6

#e1b12c

#44bd32

#007fc2

#356187

#7867cd

#c89d26

#3aa22a


Contrast Palette Two

More Color Sets with Contrasting Values: Another collection of complimentary contrasting colors.

#ff471a

#f7f9ff

#91a3bd

#344e94

#4f5564

#e84118

#ebedf5

#7f8fa6

#273c75

#353b48

#c23616

#dddfe7

#718093

#192a56

#2f3640

#a02d13

#cfd1da

#647282

#111d3c

#1d2229



Paletter - https://paletter.ai/

Thanks to the internet I found a simple way to generate a color palette. Just upload an image that represents your application/project and see what this generator can do. Sometimes we are bound by official colors, but this color palette generator can help introduce complimentary colors we wouldn't normally think of. The above photos are from the NAVY's official flickr page. The results are pretty great. Just for fun I ran the photos below through the palette generator. L-R: my backyard, favorite movie and one of my ipad paintings. Hope this helps someone.


The NEW Logo

The NEW logo in various breaking point states. The logo images below are .svg images. They scale up and down nicely staying sharp.

The NEW Logo Responsive

Resize your browser to see the NEW logo ease into the smaller sizes.

Example snippet to make the NEW logo ease smaller

Add this to your CSS

<style type="text/css">
   .reslogo {
        background: url(/imgs/new-342.svg) no-repeat;
        width:342px;
        height:396px;
        display: block;
        margin-left: auto;
        margin-right: auto; 
        -webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
        transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);   
}

@media only screen and (max-width:1100px) {
   .reslogo {
        background: url(/imgs/new-294.svg) no-repeat;
        width:28%;
        -webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
        transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1); 
}

@media only screen and (max-width:950px) {
    .reslogo {
        background: url(/imgs/new-154.svg) no-repeat;
        background-position: 0px 0px;
        width:24%;
        -webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
        transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1); 
  } 

@media only screen and (max-width:800px) {
    .reslogo {
        background: url(/imgs/new-94.svg) no-repeat;
        background-position: 0px 0px;
        width:18%;
        -webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
        transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);   
 }

@media only screen and (max-width:600px) {
    .reslogo {
        background: url(/imgs/new-20.svg) no-repeat;
        background-position: 0px 0px;
        width:10%;
        -webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
        transition:  all 600ms cubic-bezier(0.86, 0, 0.07, 1); 
        }
}
</style>

<p><a class="resize_logo" href=""> </a></p>


 

Adding a Favicon

A favicon is the small image displayed next to the page title in the browser tab.

This is the NEW favicon:

new-16.svg

Add the favicon using this snippet:

<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/imgs/new-16.svg">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>



*
*
*
*

Our Headquarters

Support

Connect with NAVSUP Headquarters

  • Facebook Image Link Youtube Image Link Twitter Image Link Linked-in Image Link NEDS Image Link
Guidance-Card-Icon Dept-Exclusive-Card-Icon