Follow the CSS Style Guide rules for HEX colors.

Use lowercase letters and shorthand values for HEX colors where
possible.

Discussed in #14299.

app/assets/stylesheets/framework/buttons.scss

@@ -37,23 +37,23 @@
 }
 
 @mixin btn-green {
-  @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #FFFFFF);
+  @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #fff);
 }
 
 @mixin btn-blue {
-  @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #FFFFFF);
+  @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #fff);
 }
 
 @mixin btn-blue-medium {
-  @include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, #FFFFFF);
+  @include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, #fff);
 }
 
 @mixin btn-orange {
-  @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #FFFFFF);
+  @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #fff);
 }
 
 @mixin btn-red {
-  @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #FFFFFF);
+  @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #fff);
 }
 
 @mixin btn-gray {

app/assets/stylesheets/framework/calendar.scss

@@ -33,19 +33,19 @@
   }
 
   .q2 {
-    fill: #ACD5F2 !important;
+    fill: #acd5f2 !important;
   }
 
   .q3 {
-    fill: #7FA8D1 !important;
+    fill: #7fa8d1 !important;
   }
 
   .q4 {
-    fill: #49729B !important;
+    fill: #49729b !important;
   }
 
   .q5 {
-    fill: #254E77 !important;
+    fill: #254e77 !important;
   }
 
   .domain-background {

app/assets/stylesheets/framework/callout.scss

@@ -39,6 +39,6 @@
 }
 .bs-callout-success {
   background-color: #dff0d8;
-  border-color: #5cA64d;
+  border-color: #5ca64d;
   color: #3c763d;
 }

app/assets/stylesheets/framework/common.scss

 /** COLORS **/
 .cgray { color: $gl-gray; }
-.clgray { color: #BBB }
+.clgray { color: #bbb }
 .cred { color: $gl-text-red; }
 .cgreen { color: $gl-text-green; }
 .cdark { color: #444 }
@@ -51,7 +51,7 @@ pre {
   }
 
   &.well-pre {
-    border: 1px solid #EEE;
+    border: 1px solid #eee;
     background: #f9f9f9;
     border-radius: 0;
     color: #555;
@@ -103,7 +103,7 @@ span.update-author {
 }
 
 .user-mention {
-  color: #2FA0BB;
+  color: #2fa0bb;
   font-weight: bold;
 }
 
@@ -187,9 +187,9 @@ li.note {
 
 .error-message {
   padding: 10px;
-  background: #C67;
+  background: #c67;
   margin: 0;
-  color: #FFF;
+  color: #fff;
 
   a {
     color: #fff;
@@ -200,7 +200,7 @@ li.note {
 .browser-alert {
   padding: 10px;
   text-align: center;
-  background: #C67;
+  background: #c67;
   color: #fff;
   font-weight: bold;
   a {
@@ -271,7 +271,7 @@ img.emoji {
 
 table {
   td.permission-x {
-    background: #D9EDF7 !important;
+    background: #d9edf7 !important;
     text-align: center;
   }
 }
@@ -280,7 +280,7 @@ table {
   float: left;
   text-align: center;
   font-size: 32px;
-  color: #AAA;
+  color: #aaa;
   width: 60px;
 }
 
@@ -347,7 +347,7 @@ table {
 
   .profiler-button,
   .profiler-controls {
-    border-color: #EEE !important;
+    border-color: #eee !important;
   }
 }
 

app/assets/stylesheets/framework/dropdowns.scss

@@ -261,7 +261,7 @@
     position: absolute;
     top: 10px;
     right: 10px;
-    color: #C7C7C7;
+    color: #c7c7c7;
     font-size: 12px;
     pointer-events: none;
   }

app/assets/stylesheets/framework/files.scss

@@ -84,7 +84,7 @@
 
     &.blob-no-preview {
       background: #eee;
-      text-shadow: 0 1px 2px #FFF;
+      text-shadow: 0 1px 2px #fff;
       padding: 100px 0;
     }
 
@@ -124,7 +124,7 @@
       }
       td.line-numbers {
         float: none;
-        border-left: 1px solid #DDD;
+        border-left: 1px solid #ddd;
       }
       td.lines {
         padding: 0;

app/assets/stylesheets/framework/forms.scss

@@ -41,8 +41,8 @@ input[type='search'].search-input {
 }
 
 input[type='text'].danger {
-  background: #F2DEDE!important;
-  border-color: #D66;
+  background: #f2dede!important;
+  border-color: #d66;
   text-shadow: 0 1px 1px #fff
 }
 

app/assets/stylesheets/framework/gitlab-theme.scss

@@ -23,13 +23,13 @@
       &:hover {
         background-color: $color-darker;
         a {
-          color: #FFF;
+          color: #fff;
         }
       }
     }
 
     .collapse-nav a {
-      color: #FFF;
+      color: #fff;
       background: $color;
     }
 
@@ -42,7 +42,7 @@
 
         &:hover {
           background-color: $color-dark;
-          color: #FFF;
+          color: #fff;
           text-decoration: none;
         }
       }
@@ -71,7 +71,7 @@
       }
 
       &.active a {
-        color: #FFF;
+        color: #fff;
         background: $color-dark;
 
         &.no-highlight {
@@ -79,42 +79,42 @@
         }
 
         i {
-          color: #FFF
+          color: #fff
         }
       }
     }
   }
 }
 
-$theme-blue: #2980B9;
+$theme-blue: #2980b9;
 $theme-charcoal: #333c47;
-$theme-graphite: #888888;
+$theme-graphite: #888;
 $theme-gray: #373737;
 $theme-green: #019875;
-$theme-violet: #554488;
+$theme-violet: #548;
 
 body {
   &.ui_blue {
-    @include gitlab-theme(#BECDE9, $theme-blue, #1970A9, #096099);
+    @include gitlab-theme(#becde9, $theme-blue, #1970a9, #096099);
   }
 
   &.ui_charcoal {
-    @include gitlab-theme(#c5d0de, $theme-charcoal, #2b333d, #24272D);
+    @include gitlab-theme(#c5d0de, $theme-charcoal, #2b333d, #24272d);
   }
 
   &.ui_graphite {
-    @include gitlab-theme(#CCCCCC, $theme-graphite, #777777, #666666);
+    @include gitlab-theme(#ccc, $theme-graphite, #777, #666);
   }
 
   &.ui_gray {
-    @include gitlab-theme(#979797, $theme-gray, #272727, #222222);
+    @include gitlab-theme(#979797, $theme-gray, #272727, #222);
   }
 
   &.ui_green {
-    @include gitlab-theme(#AADDCC, $theme-green, #018865, #017855);
+    @include gitlab-theme(#adc, $theme-green, #018865, #017855);
   }
 
   &.ui_violet {
-    @include gitlab-theme(#9988CC, $theme-violet, #443366, #332255);
+    @include gitlab-theme(#98c, $theme-violet, #436, #325);
   }
 }
\ No newline at end of file

app/assets/stylesheets/framework/header.scss

@@ -7,8 +7,8 @@ header {
 
   &.navbar-empty {
     height: 58px;
-    background: #FFF;
-    border-bottom: 1px solid #EEE;
+    background: #fff;
+    border-bottom: 1px solid #eee;
 
     .center-logo {
       margin: 11px 0;
@@ -28,7 +28,7 @@ header {
     min-height: $header-height;
     background-color: #fff;
     border: none;
-    border-bottom: 1px solid #EEE;
+    border-bottom: 1px solid #eee;
 
     .container-fluid {
       width: 100% !important;
@@ -47,7 +47,7 @@ header {
         text-align: center;
 
         &:hover, &:focus, &:active {
-          background-color: #FFF;
+          background-color: #fff;
         }
       }
 
@@ -59,7 +59,7 @@ header {
         right: 2px;
 
         &:hover {
-          background-color: #EEE;
+          background-color: #eee;
         }
         &.active {
           color: #7f8fa4;

app/assets/stylesheets/framework/issue_box.scss

@@ -20,7 +20,7 @@
   display: block;
   float: left;
   margin-right: 10px;
-  color: #FFF;
+  color: #fff;
   font-size: $gl-font-size;
   line-height: 25px;
 

app/assets/stylesheets/framework/jquery.scss

@@ -3,13 +3,13 @@
   font-size: $font-size-base;
 
   &.ui-datepicker-inline {
-    border: 1px solid #DDD;
+    border: 1px solid #ddd;
     padding: 10px;
     width: 270px;
 
     .ui-datepicker-header {
-      background: #FFF;
-      border-color: #DDD;
+      background: #fff;
+      border-color: #ddd;
     }
 
     .ui-datepicker-calendar td a {
@@ -19,7 +19,7 @@
   }
 
   &.ui-autocomplete {
-    border-color: #DDD;
+    border-color: #ddd;
     padding: 0;
     margin-top: 2px;
     z-index: 1001;
@@ -30,20 +30,20 @@
   }
 
   .ui-state-default {
-    border: 1px solid #FFF;
-    background: #FFF;
+    border: 1px solid #fff;
+    background: #fff;
     color: #777;
   }
 
   .ui-state-highlight {
-    border: 1px solid #EEE;
-    background: #EEE;
+    border: 1px solid #eee;
+    background: #eee;
   }
 
   .ui-state-active {
     border: 1px solid $gl-primary;
     background: $gl-primary;
-    color: #FFF;
+    color: #fff;
   }
 
   .ui-state-hover,

app/assets/stylesheets/framework/markdown_area.scss

@@ -71,7 +71,7 @@
 }
 
 .md-preview-holder {
-  background: #FFF;
+  background: #fff;
   border: 1px solid #ddd;
   min-height: 169px;
   padding: 5px;
@@ -80,7 +80,7 @@
 
 .markdown-area {
   @include border-radius(0);
-  background: #FFF;
+  background: #fff;
   border: 1px solid #ddd;
   min-height: 140px;
   max-height: 500px;

app/assets/stylesheets/framework/mixins.scss

@@ -75,7 +75,7 @@
     @include clearfix;
 
     padding: 10px 0;
-    border-bottom: 1px solid #EEE;
+    border-bottom: 1px solid #eee;
     display: block;
     margin: 0px;
 

app/assets/stylesheets/framework/mobile.scss

@@ -131,9 +131,9 @@
   right: 0px;
   top: 30%;
   padding: 5px 15px;
-  background: #EEE;
+  background: #eee;
   font-size: 20px;
   color: #777;
   z-index: 100;
-  @include box-shadow(0 1px 2px #DDD);
+  @include box-shadow(0 1px 2px #ddd);
 }

app/assets/stylesheets/framework/nav.scss

@@ -26,7 +26,7 @@
     }
 
     &.active a {
-      color: #000000;
+      color: #000;
       border-bottom: 2px solid #4688f1;
     }
 
@@ -41,7 +41,7 @@
 .top-area {
   @include clearfix;
 
-  border-bottom: 1px solid #EEE;
+  border-bottom: 1px solid #eee;
 
   .nav-text {
     padding-top: 16px;

app/assets/stylesheets/framework/selects.scss

@@ -229,7 +229,7 @@
 
 .namespace-result {
   .namespace-kind {
-    color: #AAA;
+    color: #aaa;
     font-weight: normal;
   }
   .namespace-path {

app/assets/stylesheets/framework/sidebar.scss

@@ -47,7 +47,7 @@
   width: 100%;
 
   .container-fluid {
-    background: #FFF;
+    background: #fff;
     padding: 0 $gl-padding;
 
     &.container-blank {
@@ -103,7 +103,7 @@
     }
 
     &:hover {
-      background-color: #EEE;
+      background-color: #eee;
     }
   }
 

app/assets/stylesheets/framework/tw_bootstrap.scss

@@ -95,7 +95,7 @@
   }
 
   &.label-inverse {
-    background-color: #333333;
+    background-color: #333;
   }
 }
 

app/assets/stylesheets/framework/tw_bootstrap_variables.scss

@@ -57,7 +57,7 @@ $component-active-bg:       $brand-info;
 
 $input-color:                    $text-color;
 $input-border:                   #e7e9ed;
-$input-border-focus:             #7F8FA4;
+$input-border-focus:             #7f8fa4;
 $legend-color:                   $text-color;
 
 
@@ -125,8 +125,8 @@ $panel-inner-border:       $border-color;
 //
 //##
 
-$well-bg:                     #F9F9F9;
-$well-border:                 #EEE;
+$well-bg:                     #f9f9f9;
+$well-border:                 #eee;
 
 //== Code
 //

app/assets/stylesheets/framework/typography.scss

@@ -27,13 +27,13 @@
     line-height: 10px;
     color: #555;
     vertical-align: middle;
-    background-color: #FCFCFC;
+    background-color: #fcfcfc;
     border-width: 1px;
     border-style: solid;
-    border-color: #CCC #CCC #BBB;
+    border-color: #ccc #ccc #bbb;
     border-image: none;
     border-radius: 3px;
-    box-shadow: 0px -1px 0px #BBB inset;
+    box-shadow: 0px -1px 0px #bbb inset;
   }
 
   h1 {

app/assets/stylesheets/framework/variables.scss

 $row-hover: #f4f8fe;
-$gl-text-color: #54565B;
-$gl-text-green: #4A2;
-$gl-text-red: #D12F19;
-$gl-text-orange: #D90;
+$gl-text-color: #54565b;
+$gl-text-green: #4a2;
+$gl-text-red: #d12f19;
+$gl-text-orange: #d90;
 $gl-header-color: #323232;
 $gl-link-color: #333c48;
 $md-text-color: #444;
@@ -30,24 +30,24 @@ $gl-vert-padding: 6px;
 $gl-padding-top:10px;
 $gl-avatar-size: 40px;
 $secondary-text: #7f8fa4;
-$error-exclamation-point: #E62958;
+$error-exclamation-point: #e62958;
 $border-radius-default: 3px;
-$list-title-color: #333333;
-$list-text-color: #555555;
+$list-title-color: #333;
+$list-text-color: #555;
 
-$btn-transparent-color: #8F8F8F;
+$btn-transparent-color: #8f8f8f;
 
-$ssh-key-icon-color: #8F8F8F;
+$ssh-key-icon-color: #8f8f8f;
 $ssh-key-icon-size: 18px;
 
-$provider-btn-group-border: #E5E5E5;
-$provider-btn-not-active-color: #4688F1;
+$provider-btn-group-border: #e5e5e5;
+$provider-btn-not-active-color: #4688f1;
 
 /*
  * Color schema
  */
 
-$white-light: #FFFFFF;
+$white-light: #fff;
 $white-normal: #ededed;
 $white-dark: #ededed;
 
@@ -57,55 +57,55 @@ $gray-dark: #ededed;
 $gray-darkest: #c9c9c9;
 
 $green-light: #38ae67;
-$green-normal: #2FAA60;
-$green-dark: #2CA05B;
+$green-normal: #2faa60;
+$green-dark: #2ca05b;
 
-$blue-light: #2EA8E5;
-$blue-normal: #2D9FD8;
-$blue-dark: #2897CE;
+$blue-light: #2ea8e5;
+$blue-normal: #2d9fd8;
+$blue-dark: #2897ce;
 
-$blue-medium-light: #3498CB;
-$blue-medium: #2F8EBF;
-$blue-medium-dark: #2D86B4;
+$blue-medium-light: #3498cb;
+$blue-medium: #2f8ebf;
+$blue-medium-dark: #2d86b4;
 
 $orange-light: rgba(252, 109, 38, 0.80);
-$orange-normal: #E75E40;
-$orange-dark: #CE5237;
+$orange-normal: #e75e40;
+$orange-dark: #ce5237;
 
-$red-light: #F06559;
-$red-normal: #E52C5A;
-$red-dark: #D22852;
+$red-light: #f06559;
+$red-normal: #e52c5a;
+$red-dark: #d22852;
 
-$border-white-light: #F1F2F4;
-$border-white-normal: #D6DAE2;
-$border-white-dark: #C6CACF;
+$border-white-light: #f1f2f4;
+$border-white-normal: #d6dae2;
+$border-white-dark: #c6cacf;
 
 $border-gray-light: rgba(0, 0, 0, 0.06);
 $border-gray-normal: rgba(0, 0, 0, 0.10);;
-$border-gray-dark: #C6CACF;
+$border-gray-dark: #c6cacf;
 
-$border-green-light: #2FAA60;
-$border-green-normal: #2CA05B;
+$border-green-light: #2faa60;
+$border-green-normal: #2ca05b;
 $border-green-dark: #279654;
 
-$border-blue-light: #2D9FD8;
-$border-blue-normal: #2897CE;
-$border-blue-dark: #258DC1;
+$border-blue-light: #2d9fd8;
+$border-blue-normal: #2897ce;
+$border-blue-dark: #258dc1;
 
 $border-orange-light: #fc6d26;
-$border-orange-normal: #CE5237;
-$border-orange-dark: #C14E35;
+$border-orange-normal: #ce5237;
+$border-orange-dark: #c14e35;
 
-$border-red-light: #F24F41;
-$border-red-normal: #D22852;
-$border-red-dark: #CA264F;
+$border-red-light: #f24f41;
+$border-red-normal: #d22852;
+$border-red-dark: #ca264f;
 
-$help-well-bg: #FAFAFA;
-$help-well-border: #E5E5E5;
+$help-well-bg: #fafafa;
+$help-well-border: #e5e5e5;
 
-$warning-message-bg: #FBF2D9;
-$warning-message-color: #9E8E60;
-$warning-message-border: #F0E2BB;
+$warning-message-bg: #fbf2d9;
+$warning-message-color: #9e8e60;
+$warning-message-border: #f0e2bb;
 
 /* header */
 $light-grey-header: #faf9f9;
@@ -143,23 +143,23 @@ $dropdown-border-color: rgba(#000, .1);
 $dropdown-shadow-color: rgba(#000, .1);
 $dropdown-divider-color: rgba(#000, .1);
 $dropdown-header-color: #959494;
-$dropdown-caret-color: #54565B;
-$dropdown-title-btn-color: #BFBFBF;
-$dropdown-input-color: #C7C7C7;
+$dropdown-caret-color: #54565b;
+$dropdown-title-btn-color: #bfbfbf;
+$dropdown-input-color: #c7c7c7;
 $dropdown-input-focus-border: rgb(58, 171, 240);
 $dropdown-input-focus-shadow: rgba(#000, .2);
 $dropdown-loading-bg: rgba(#fff, .6);
 
 $dropdown-toggle-bg: #fff;
 $dropdown-toggle-color: #626262;
-$dropdown-toggle-border-color: #EAEAEA;
+$dropdown-toggle-border-color: #eaeaea;
 $dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 15%);
-$dropdown-toggle-icon-color: #C4C4C4;
+$dropdown-toggle-icon-color: #c4c4c4;
 $dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
 
 /*
  *  Award emoji
  */
-$award-emoji-menu-bg: #FFF;
-$award-emoji-menu-border: #F1F2F4;
-$award-emoji-new-btn-icon-color: #DCDCDC;
+$award-emoji-menu-bg: #fff;
+$award-emoji-menu-border: #f1f2f4;
+$award-emoji-new-btn-icon-color: #dcdcdc;

app/assets/stylesheets/highlight/dark.scss

@@ -43,12 +43,12 @@
   // Search result highlight
   span.highlight_word {
     background-color: #ffe792 !important;
-    color: #000000 !important;
+    color: #000 !important;
   }
 
   .hll { background-color: #373b41 }
   .c { color: #969896 } /* Comment */
-  .err { color: #cc6666 } /* Error */
+  .err { color: #c66 } /* Error */
   .k { color: #b294bb } /* Keyword */
   .l { color: #de935f } /* Literal */
   .n { color: #c5c8c6 } /* Name */
@@ -58,7 +58,7 @@
   .cp { color: #969896 } /* Comment.Preproc */
   .c1 { color: #969896 } /* Comment.Single */
   .cs { color: #969896 } /* Comment.Special */
-  .gd { color: #cc6666 } /* Generic.Deleted */
+  .gd { color: #c66 } /* Generic.Deleted */
   .ge { font-style: italic } /* Generic.Emph */
   .gh { color: #c5c8c6; font-weight: bold } /* Generic.Heading */
   .gi { color: #b5bd68 } /* Generic.Inserted */
@@ -77,17 +77,17 @@
   .na { color: #81a2be } /* Name.Attribute */
   .nb { color: #c5c8c6 } /* Name.Builtin */
   .nc { color: #f0c674 } /* Name.Class */
-  .no { color: #cc6666 } /* Name.Constant */
+  .no { color: #c66 } /* Name.Constant */
   .nd { color: #8abeb7 } /* Name.Decorator */
   .ni { color: #c5c8c6 } /* Name.Entity */
-  .ne { color: #cc6666 } /* Name.Exception */
+  .ne { color: #c66 } /* Name.Exception */
   .nf { color: #81a2be } /* Name.Function */
   .nl { color: #c5c8c6 } /* Name.Label */
   .nn { color: #f0c674 } /* Name.Namespace */
   .nx { color: #81a2be } /* Name.Other */
   .py { color: #c5c8c6 } /* Name.Property */
   .nt { color: #8abeb7 } /* Name.Tag */
-  .nv { color: #cc6666 } /* Name.Variable */
+  .nv { color: #c66 } /* Name.Variable */
   .ow { color: #8abeb7 } /* Operator.Word */
   .w { color: #c5c8c6 } /* Text.Whitespace */
   .mf { color: #de935f } /* Literal.Number.Float */
@@ -106,8 +106,8 @@
   .s1 { color: #b5bd68 } /* Literal.String.Single */
   .ss { color: #b5bd68 } /* Literal.String.Symbol */
   .bp { color: #c5c8c6 } /* Name.Builtin.Pseudo */
-  .vc { color: #cc6666 } /* Name.Variable.Class */
-  .vg { color: #cc6666 } /* Name.Variable.Global */
-  .vi { color: #cc6666 } /* Name.Variable.Instance */
+  .vc { color: #c66 } /* Name.Variable.Class */
+  .vg { color: #c66 } /* Name.Variable.Global */
+  .vi { color: #c66 } /* Name.Variable.Instance */
   .il { color: #de935f } /* Literal.Number.Integer.Long */
 }

app/assets/stylesheets/highlight/monokai.scss

@@ -43,7 +43,7 @@
   // Search result highlight
   span.highlight_word {
     background-color: #ffe792 !important;
-    color: #000000 !important;
+    color: #000 !important;
   }
 
   .hll { background-color: #49483e }

app/assets/stylesheets/highlight/solarized_dark.scss

@@ -96,7 +96,7 @@
   .m { color: #2aa198 } /* Literal.Number */
   .s { color: #2aa198 } /* Literal.String */
   .na { color: #93a1a1 } /* Name.Attribute */
-  .nb { color: #B58900 } /* Name.Builtin */
+  .nb { color: #b58900 } /* Name.Builtin */
   .nc { color: #268bd2 } /* Name.Class */
   .no { color: #cb4b16 } /* Name.Constant */
   .nd { color: #268bd2 } /* Name.Decorator */

app/assets/stylesheets/highlight/solarized_light.scss

@@ -96,7 +96,7 @@
   .m { color: #2aa198 } /* Literal.Number */
   .s { color: #2aa198 } /* Literal.String */
   .na { color: #586e75 } /* Name.Attribute */
-  .nb { color: #B58900 } /* Name.Builtin */
+  .nb { color: #b58900 } /* Name.Builtin */
   .nc { color: #268bd2 } /* Name.Class */
   .no { color: #cb4b16 } /* Name.Constant */
   .nd { color: #268bd2 } /* Name.Decorator */

app/assets/stylesheets/highlight/white.scss

@@ -23,7 +23,7 @@
   .line_holder {
     .diff-line-num {
       &.old {
-        background: #ffdddd;
+        background: #fdd;
         border-color: #f1c0c0;
       }
 
@@ -68,66 +68,66 @@
   }
 
   .hll { background-color: #f8f8f8 }
-  .c { color: #999988; font-style: italic; }
+  .c { color: #998; font-style: italic; }
   .err { color: #a61717; background-color: #e3d2d2; }
   .k { font-weight: bold; }
   .o { font-weight: bold; }
-  .cm { color: #999988; font-style: italic; }
-  .cp { color: #999999; font-weight: bold; }
-  .c1 { color: #999988; font-style: italic; }
-  .cs { color: #999999; font-weight: bold; font-style: italic; }
-  .gd { color: #000000; background-color: #ffdddd; }
-  .gd .x { color: #000000; background-color: #ffaaaa; }
+  .cm { color: #998; font-style: italic; }
+  .cp { color: #999; font-weight: bold; }
+  .c1 { color: #998; font-style: italic; }
+  .cs { color: #999; font-weight: bold; font-style: italic; }
+  .gd { color: #000; background-color: #fdd; }
+  .gd .x { color: #000; background-color: #faa; }
   .ge { font-style: italic; }
-  .gr { color: #aa0000; }
-  .gh { color: #999999; }
-  .gi { color: #000000; background-color: #ddffdd; }
-  .gi .x { color: #000000; background-color: #aaffaa; }
-  .go { color: #888888; }
-  .gp { color: #555555; }
+  .gr { color: #a00; }
+  .gh { color: #999; }
+  .gi { color: #000; background-color: #dfd; }
+  .gi .x { color: #000; background-color: #afa; }
+  .go { color: #888; }
+  .gp { color: #555; }
   .gs { font-weight: bold; }
   .gu { color: #800080; font-weight: bold; }
-  .gt { color: #aa0000; }
+  .gt { color: #a00; }
   .kc { font-weight: bold; }
   .kd { font-weight: bold; }
   .kn { font-weight: bold; }
   .kp { font-weight: bold; }
   .kr { font-weight: bold; }
-  .kt { color: #445588; font-weight: bold; }
-  .m { color: #009999; }
-  .s { color: #dd1144; }
-  .n { color: #333333; }
+  .kt { color: #458; font-weight: bold; }
+  .m { color: #099; }
+  .s { color: #d14; }
+  .n { color: #333; }
   .na { color: teal; }
   .nb { color: #0086b3; }
-  .nc { color: #445588; font-weight: bold; }
+  .nc { color: #458; font-weight: bold; }
   .no { color: teal; }
   .ni { color: purple; }
-  .ne { color: #990000; font-weight: bold; }
-  .nf { color: #990000; font-weight: bold; }
-  .nn { color: #555555; }
+  .ne { color: #900; font-weight: bold; }
+  .nf { color: #900; font-weight: bold; }
+  .nn { color: #555; }
   .nt { color: navy; }
   .nv { color: teal; }
   .ow { font-weight: bold; }
-  .w { color: #bbbbbb; }
-  .mf { color: #009999; }
-  .mh { color: #009999; }
-  .mi { color: #009999; }
-  .mo { color: #009999; }
-  .sb { color: #dd1144; }
-  .sc { color: #dd1144; }
-  .sd { color: #dd1144; }
-  .s2 { color: #dd1144; }
-  .se { color: #dd1144; }
-  .sh { color: #dd1144; }
-  .si { color: #dd1144; }
-  .sx { color: #dd1144; }
+  .w { color: #bbb; }
+  .mf { color: #099; }
+  .mh { color: #099; }
+  .mi { color: #099; }
+  .mo { color: #099; }
+  .sb { color: #d14; }
+  .sc { color: #d14; }
+  .sd { color: #d14; }
+  .s2 { color: #d14; }
+  .se { color: #d14; }
+  .sh { color: #d14; }
+  .si { color: #d14; }
+  .sx { color: #d14; }
   .sr { color: #009926; }
-  .s1 { color: #dd1144; }
+  .s1 { color: #d14; }
   .ss { color: #990073; }
-  .bp { color: #999999; }
+  .bp { color: #999; }
   .vc { color: teal; }
   .vg { color: teal; }
   .vi { color: teal; }
-  .il { color: #009999; }
-  .gc { color: #999; background-color: #EAF2F5; }
+  .il { color: #099; }
+  .gc { color: #999; background-color: #eaf2f5; }
 }

app/assets/stylesheets/pages/builds.scss

 .build-page {
   pre.trace {
-    background: #111111;
+    background: #111;
     color: #fff;
     font-family: $monospace_font;
     white-space: pre;

app/assets/stylesheets/pages/commits.scss

@@ -9,7 +9,7 @@
 
 .lists-separator {
   margin: 10px 0;
-  border-color: #DDD;
+  border-color: #ddd;
 }
 
 .commits-row {
@@ -76,7 +76,7 @@ li.commit {
 
   .commit-row-description {
     font-size: 14px;
-    border-left: 1px solid #EEE;
+    border-left: 1px solid #eee;
     padding: 10px 15px;
     margin: 5px 0 10px 5px;
     background: #f9f9f9;

app/assets/stylesheets/pages/diff.scss

@@ -29,7 +29,7 @@
   .diff-content {
     overflow: auto;
     overflow-y: hidden;
-    background: #FFF;
+    background: #fff;
     color: #333;
 
     .unfold {
@@ -118,7 +118,7 @@
       background-color: #fff;
       line-height: 0;
       img {
-        border: 1px solid #FFF;
+        border: 1px solid #fff;
         background: image-url('trans_bg.gif');
         max-width: 100%;
       }
@@ -265,7 +265,7 @@
   .view-modes {
     padding: 10px;
     text-align: center;
-    background: #EEE;
+    background: #eee;
 
     ul, li {
       list-style: none;

app/assets/stylesheets/pages/editor.scss

@@ -14,9 +14,9 @@
   }
 
   .cancel-btn {
-    color: #B94A48;
+    color: #b94a48;
     &:hover {
-      color: #B94A48;
+      color: #b94a48;
     }
   }
 

app/assets/stylesheets/pages/events.scss

@@ -83,10 +83,10 @@
   .event_icon {
     position: relative;
     float: right;
-    border: 1px solid #EEE;
+    border: 1px solid #eee;
     padding: 5px;
     @include border-radius(5px);
-    background: #F9F9F9;
+    background: #f9f9f9;
     margin-left: 10px;
     top: -6px;
     img {
@@ -160,7 +160,7 @@
 
     .event-body {
       margin: 0;
-      border-left: 2px solid #DDD;
+      border-left: 2px solid #ddd;
       padding-left: 10px;
     }
 

app/assets/stylesheets/pages/graph.scss

@@ -6,11 +6,11 @@
     font-size: 14px;
     padding: 5px;
     border-bottom: 1px solid $border-color;
-    background: #EEE;
+    background: #eee;
   }
 
   .network-graph {
-    background: #FFF;
+    background: #fff;
     height: 500px;
     overflow-y: scroll;
     overflow-x: hidden;

app/assets/stylesheets/pages/issuable.scss

@@ -222,7 +222,7 @@
       width: 100%;
       text-align: center;
       padding-bottom: 10px;
-      color: #999999;
+      color: #999;
 
       span {
         display: block;
@@ -237,7 +237,7 @@
         }
 
         i {
-          color: #999999;
+          color: #999;
         }
       }
     }

app/assets/stylesheets/pages/issues.scss

@@ -68,18 +68,18 @@ form.edit-issue {
 .merge-request,
 .issue {
   &.today {
-    background: #EFE;
-    border-color: #CEC;
+    background: #efe;
+    border-color: #cec;
   }
 
   &.closed {
-    background: #F9F9F9;
-    border-color: #E5E5E5;
+    background: #f9f9f9;
+    border-color: #e5e5e5;
   }
 
   &.merged {
-    background: #F9F9F9;
-    border-color: #E5E5E5;
+    background: #f9f9f9;
+    border-color: #e5e5e5;
   }
 }
 

app/assets/stylesheets/pages/login.scss

@@ -39,7 +39,7 @@
   .login-box{
     background: #fafafa;
     border-radius: 10px;
-    box-shadow: 0 0px 2px #CCC;
+    box-shadow: 0 0px 2px #ccc;
     padding: 15px;
 
     .login-heading h3 {
@@ -90,7 +90,7 @@
     }
 
     &:active, &:focus {
-      background-color: #FFF;
+      background-color: #fff;
     }
   }
 

app/assets/stylesheets/pages/merge_requests.scss

@@ -113,7 +113,7 @@
   }
 
   .mr-widget-footer {
-    border-top: 1px solid #EEE;
+    border-top: 1px solid #eee;
   }
 
   .ci-coverage {
@@ -222,7 +222,7 @@
     margin-bottom: 20px;
 
     span {
-      color: #B2B2B2;
+      color: #b2b2b2;
 
       a {
         color: $md-link-color;

app/assets/stylesheets/pages/note_form.scss

@@ -156,7 +156,7 @@
 
 .comment-hints {
   color: #999;
-  background: #FFF;
+  background: #fff;
   padding: 7px;
   margin-top: -7px;
   border: 1px solid $border-color;

app/assets/stylesheets/pages/notes.scss

@@ -30,7 +30,7 @@ ul.notes {
     font-size: 14px;
     padding-top: 10px;
     padding-bottom: 10px;
-    background: #FDFDFD;
+    background: #fdfdfd;
 
     .timeline-icon {
       .avatar {
@@ -129,7 +129,7 @@ ul.notes {
 
         hr {
           // Darken 'whitesmoke' a bit to make it more visible in note bodies
-          border-color: darken(#F5F5F5, 8%);
+          border-color: darken(#f5f5f5, 8%);
           margin: 10px 0;
         }
       }
@@ -166,7 +166,7 @@ ul.notes {
       vertical-align: middle;
       text-align: center;
       padding: 10px 0;
-      background: #FFF;
+      background: #fff;
       color: $text-color;
     }
     &.notes_line2 {
@@ -232,7 +232,7 @@ ul.notes {
   .add-diff-note {
     margin-top: -4px;
     @include border-radius(40px);
-    background: #FFF;
+    background: #fff;
     padding: 4px;
     font-size: 16px;
     color: $gl-link-color;
@@ -249,7 +249,7 @@ ul.notes {
 
     &:hover {
       background: $gl-info;
-      color: #FFF;
+      color: #fff;
       @include show-add-diff-note;
     }
   }

app/assets/stylesheets/pages/projects.scss

@@ -140,7 +140,7 @@
           left: 1px;
           margin-top: -9px;
           border-width: 10px 7px 10px 0;
-          border-right-color: #FFF;
+          border-right-color: #fff;
         }
       }
       .count {
@@ -165,7 +165,7 @@
         margin: 0 11px 0px 4px;
 
         &:hover {
-          background: #FFF;
+          background: #fff;
         }
       }
     }
@@ -462,7 +462,7 @@ pre.light-well {
 
   .form-control {
     @extend .monospace;
-    background: #FFF;
+    background: #fff;
     font-size: 14px;
     margin-left: -1px;
     cursor: auto;
@@ -472,16 +472,16 @@ pre.light-well {
 
 .cannot-be-merged,
 .cannot-be-merged:hover {
-  color: #E62958;
+  color: #e62958;
   margin-top: 2px;
 }
 
 .private-forks-notice .private-fork-icon {
   i:nth-child(1) {
-    color: #2AA056;
+    color: #2aa056;
   }
 
   i:nth-child(2) {
-    color: #FFFFFF;
+    color: #fff;
   }
 }

app/assets/stylesheets/pages/runners.scss

 .runner-state {
   padding: 6px 12px;
   margin-right: 10px;
-  color: #FFF;
+  color: #fff;
 
   &.runner-state-shared {
     background: #32b186;

app/assets/stylesheets/pages/search.scss

@@ -16,7 +16,7 @@
   margin-bottom: 20px;
 
   input {
-    border-color: #BBB;
+    border-color: #bbb;
     font-weight: bold;
   }
 }

app/assets/stylesheets/pages/status.scss

 .ci-status {
   padding: 2px 7px;
   margin-right: 5px;
-  border: 1px solid #EEE;
+  border: 1px solid #eee;
   white-space: nowrap;
   @include border-radius(4px);
 

app/assets/stylesheets/pages/todos.scss

@@ -89,7 +89,7 @@
 
     .todo-body {
       margin: 0;
-      border-left: 2px solid #DDD;
+      border-left: 2px solid #ddd;
       padding-left: 10px;
     }
   }

app/assets/stylesheets/pages/ui_dev_kit.scss

@@ -7,7 +7,7 @@
   .example {
     &:before {
       content: "Example";
-      color: #BBB;
+      color: #bbb;
     }
 
     padding: 15px;

app/assets/stylesheets/pages/xterm.scss

@@ -2,23 +2,23 @@
   // color codes are based on http://en.wikipedia.org/wiki/File:Xterm_256color_chart.svg
   // see also: https://gist.github.com/jasonm23/2868981
 
-  $black: #000000;
+  $black: #000;
   $red: #cd0000;
   $green: #00cd00;
   $yellow: #cdcd00;
-  $blue: #0000ee;   // according to wikipedia, this is the xterm standard
+  $blue: #00e;   // according to wikipedia, this is the xterm standard
   //$blue: #1e90ff; // this is used by all the terminals I tried (when configured with the xterm color profile)
   $magenta: #cd00cd;
   $cyan: #00cdcd;
   $white: #e5e5e5;
   $l-black: #7f7f7f;
-  $l-red: #ff0000;
-  $l-green: #00ff00;
-  $l-yellow: #ffff00;
+  $l-red: #f00;
+  $l-green: #0f0;
+  $l-yellow: #ff0;
   $l-blue: #5c5cff;
-  $l-magenta: #ff00ff;
-  $l-cyan: #00ffff;
-  $l-white: #ffffff;
+  $l-magenta: #f0f;
+  $l-cyan: #0ff;
+  $l-white: #fff;
 
   .term-bold {
       font-weight: bold;
@@ -136,7 +136,7 @@
 
 
   .xterm-fg-0 {
-    color: #000000;
+    color: #000;
   }
   .xterm-fg-1 {
     color: #800000;
@@ -163,28 +163,28 @@
     color: #808080;
   }
   .xterm-fg-9 {
-    color: #ff0000;
+    color: #f00;
   }
   .xterm-fg-10 {
-    color: #00ff00;
+    color: #0f0;
   }
   .xterm-fg-11 {
-    color: #ffff00;
+    color: #ff0;
   }
   .xterm-fg-12 {
-    color: #0000ff;
+    color: #00f;
   }
   .xterm-fg-13 {
-    color: #ff00ff;
+    color: #f0f;
   }
   .xterm-fg-14 {
-    color: #00ffff;
+    color: #0ff;
   }
   .xterm-fg-15 {
-    color: #ffffff;
+    color: #fff;
   }
   .xterm-fg-16 {
-    color: #000000;
+    color: #000;
   }
   .xterm-fg-17 {
     color: #00005f;
@@ -199,7 +199,7 @@
     color: #0000d7;
   }
   .xterm-fg-21 {
-    color: #0000ff;
+    color: #00f;
   }
   .xterm-fg-22 {
     color: #005f00;
@@ -274,7 +274,7 @@
     color: #00d7ff;
   }
   .xterm-fg-46 {
-    color: #00ff00;
+    color: #0f0;
   }
   .xterm-fg-47 {
     color: #00ff5f;
@@ -289,7 +289,7 @@
     color: #00ffd7;
   }
   .xterm-fg-51 {
-    color: #00ffff;
+    color: #0ff;
   }
   .xterm-fg-52 {
     color: #5f0000;
@@ -724,7 +724,7 @@
     color: #d7ffff;
   }
   .xterm-fg-196 {
-    color: #ff0000;
+    color: #f00;
   }
   .xterm-fg-197 {
     color: #ff005f;
@@ -739,7 +739,7 @@
     color: #ff00d7;
   }
   .xterm-fg-201 {
-    color: #ff00ff;
+    color: #f0f;
   }
   .xterm-fg-202 {
     color: #ff5f00;
@@ -814,7 +814,7 @@
     color: #ffd7ff;
   }
   .xterm-fg-226 {
-    color: #ffff00;
+    color: #ff0;
   }
   .xterm-fg-227 {
     color: #ffff5f;
@@ -829,7 +829,7 @@
     color: #ffffd7;
   }
   .xterm-fg-231 {
-    color: #ffffff;
+    color: #fff;
   }
   .xterm-fg-232 {
     color: #080808;
@@ -850,7 +850,7 @@
     color: #3a3a3a;
   }
   .xterm-fg-238 {
-    color: #444444;
+    color: #444;
   }
   .xterm-fg-239 {
     color: #4e4e4e;
@@ -901,6 +901,6 @@
     color: #e4e4e4;
   }
   .xterm-fg-255 {
-    color: #eeeeee;
+    color: #eee;
   }
 }