Change hex to hsl

core/static/core/style.scss

 $first-color: hsl(220, 100%, 50%);
-$second-color: #ffdd59;
+$second-color: hsl(48, 100%, 67%);
 $primary-color: hsl(219.9, 53.7%, 50%);
-$secondary-color: #2980b9;
+$secondary-color: hsl(204, 64%, 44%);
 $primary-color-text: hsl(0, 0%, 100%);
 $secondary-color-text: hsla(0, 0%, 0%, 0.87);
 
 $primary-light-color: hsl(219.8, 46.4%, 64.9%);
-$primary-dark-color: #2d98da;
+$primary-dark-color: hsl(203, 70%, 52%);
 
 $secondary-light-color: hsl(40, 68%, 65%);
 $secondary-dark-color: hsl(40, 68%, 35%);
 
 
 $primary-neutral-color: hsl(219.6, 20.8%, 50%);
-$primary-neutral-light-color: #efefef;
-$primary-neutral-dark-color: #34495e;
+$primary-neutral-light-color: hsl(0, 0%, 94%);
+$primary-neutral-dark-color: hsl(210, 29%, 29%);
 
-$secondary-neutral-color: #2980b9;
-$secondary-neutral-light-color: #e7e7e7;
+$secondary-neutral-color: hsl(204, 64%, 44%);
+$secondary-neutral-light-color: hsl(0, 0%, 91%);
 $secondary-neutral-dark-color: hsl(40, 57.6%, 17%);
 
 $white-color: hsl(219.6, 20.8%, 98%);
 $black-color: hsl(40.0, 0%, 17%);
 
-$faceblue: #3B5998;
-$twitblue: #55acee;
+$faceblue: hsl(221, 44%, 41%);
+$twitblue: hsl(206, 82%, 63%);
 
 $shadow-color: rgb(223, 223, 223);
 
-$background-bouton-color: #e6e6e6;
+$background-bouton-color: hsl(0, 0%, 90%);
 
 /*--------------------------------GENERAL------------------------------*/
 
@@ -50,7 +50,7 @@ input[type=button], input[type=submit], input[type=reset],input[type=file] {
   box-shadow: $shadow-color 0px 0px 1px;
 
   &:hover {
-    background: #d3d3d3;
+    background: hsl(0, 0%, 83%);
   }
 }
 button{
@@ -63,7 +63,7 @@ button{
   box-shadow: $shadow-color 0px 0px 1px;
   cursor: pointer;
   &:hover {
-    background: #d3d3d3;
+    background: hsl(0, 0%, 83%);
   }
 }
 input,textarea[type=text],[type=number]{
@@ -256,7 +256,7 @@ header {
         li {
           padding: 0.2em;
           &:hover {
-            background: #bcc;
+            background: hsl(180, 14%, 77%);
           }
         }
         li:last-child {
@@ -308,7 +308,7 @@ header {
       font-family: FontAwesome;
       font-size: 4em;
       content: "\f05a";
-      color: #1e90ff;
+      color: hsl(210, 100%, 56%);
     }
   }
   #alert_box {
@@ -729,14 +729,14 @@ header {
                 padding-right: 20px;
                 margin-left: 5px;
                 border-radius: 20px;
-                background-color: #ffaa00;
+                background-color: hsl(40, 100%, 50%);
                 color: black;
                 &:hover{
                     color: black;
-                    background-color: #c99836;
+                    background-color: hsl(40, 58%, 50%);
                 }
                 &.delete{
-                    background-color: #cb0000;
+                    background-color: hsl(0, 100%, 40%);
                 }
             }
         }
@@ -821,11 +821,11 @@ header {
             .edit, .moderate, .slideshow{
                 padding: 5px;
                 border-radius: 20px;
-                background-color: #ffaa00;
+                background-color: hsl(40, 100%, 50%);
                 color: black;
                 &:hover{
                     color: black;
-                    background-color: #c99836;
+                    background-color: hsl(40, 58%, 50%);
                 }
                 &:nth-child(2n){
                     margin-top: 5px;
@@ -835,8 +835,8 @@ header {
             .tooltip{
                 visibility: hidden;
                 width: 120px;
-                background-color: #f9fafb;
-                color: #000;
+                background-color: hsl(210, 20%, 98%);
+                color: hsl(0, 0%, 0%);
                 text-align: center;
                 padding: 5px 0;
                 border-radius: 6px;
@@ -1235,8 +1235,8 @@ u, .underline {
 #pict {
   display: inline-block;
   width: 80%;
-  background: #333;
-  border: solid #333 2px;
+  background: hsl(0, 0%, 20%);
+  border: solid hsl(0, 0%, 20%) 2px;
 }
 /*--------------------------------MATMAT-------------------------------*/
 .matmat_results {
@@ -1290,7 +1290,7 @@ textarea {
 #forum {
   .button {
     background-color: rgb(230, 230, 230);
-    padding: 7px;
+    padding: 10px;
     font-weight: bold;
     border-radius: 5px;
     &:hover {
@@ -1359,7 +1359,7 @@ textarea {
   .category {
     margin-top: 5px;
     background: $secondary-color;
-    color: #ffffff;
+    color: white;
     border-radius: 10px 10px 0px 0px;
     .title {
       text-transform: uppercase;
@@ -1369,7 +1369,7 @@ textarea {
   .message {
     padding: 1px;
     margin: 1px;
-    background: #f3f3f3;
+    background: $secondary-neutral-light-color;
     &:nth-child(odd) {
       background: $primary-neutral-light-color;
     }
@@ -1420,10 +1420,10 @@ textarea {
   }
 
   .forum_signature {
-    color: #C0C0C0;
-    border-top: 1px solid #C0C0C0;
+    color: hsl(0, 0%, 75%);
+    border-top: 1px solid hsl(0, 0%, 75%);
     a {
-      color: #C0C0C0;
+      color: hsl(0, 0%, 75%);
       &:hover {
         text-decoration: underline;
       }
@@ -1440,7 +1440,7 @@ textarea {
   padding: 5px;
   width: 200px;
   height: 140px;
-  background: #eee;
+  background: hsl(0, 0%, 93%);
   box-shadow: black 2px 2px 10px;
   margin: 10px;
   vertical-align: top;
@@ -1455,7 +1455,7 @@ textarea {
   width: 150px;
   height: 100px;
   margin: 5px;
-  background: #eee;
+  background: #eeeeee;
   box-shadow: grey 2px 2px 5px;
   padding: 2px;
   vertical-align: middle;