_colours.scss modified 83 days ago
GitHub: _colours.scss
:root {
// Base colors
--white: white;
--black: black;
// Greys
--grey-100: hsla(43, 46%, 88%, 1);
--grey-200: hsla(55, 3%, 73%, 1);
--grey-300: hsla(70, 2%, 65%, 1);
--grey-400: hsla(204, 4%, 59%, 1);
--grey-500: hsla(180, 1%, 58%, 1);
--grey-600: hsla(212, 4%, 53%, 1);
--grey-700: hsla(213, 5%, 40%, 1);
--grey-800: hsla(150, 2%, 37%, 1);
--grey-900: hsla(33, 6%, 33%, 1);
// Blues
--blue-100: hsla(201, 21%, 76%, 1);
--blue-200: hsla(201, 23%, 73%, 1);
--blue-300: hsla(207, 33%, 67%, 1);
--blue-400: hsla(205, 44%, 64%, 1);
--blue-500: hsla(194, 31%, 54%, 1);
--blue-600: hsla(220, 38%, 48%, 1);
--blue-700: hsla(221, 49%, 44%, 1);
--blue-800: hsla(201, 40%, 40%, 1);
--blue-900: hsla(227, 37%, 31%, 1);
// Greens
--green-100: hsla(147, 13%, 87%, 1);
--green-200: hsla(147, 19%, 81%, 1);
--green-300: hsla(104, 16%, 77%, 1);
--green-400: hsla(84, 38%, 72%, 1);
--green-500: hsla(84, 37%, 62%, 1);
--green-600: hsla(89, 29%, 49%, 1);
--green-700: hsla(149, 37%, 41%, 1);
--green-800: hsla(149, 26%, 34%, 1);
--green-900: hsla(122, 28%, 34%, 1);
// Reds
--red-100: hsla(6, 39%, 75%, 1);
--red-200: hsla(12, 41%, 66%, 1);
--red-300: hsla(14, 67%, 54%, 1);
--red-400: hsla(9, 61%, 50%, 1);
--red-500: hsla(5, 50%, 45%, 1);
--red-600: hsla(359, 47%, 41%, 1);
--red-700: hsla(353, 42%, 39%, 1);
--red-800: hsla(347, 44%, 40%, 1);
// Browns
--brown-100: hsla(24, 47%, 73%, 1);
--brown-200: hsla(33, 15%, 67%, 1);
--brown-300: hsla(24, 20%, 64%, 1);
--brown-400: hsla(14, 37%, 56%, 1);
--brown-500: hsla(33, 8%, 53%, 1);
--brown-600: hsla(12, 38%, 39%, 1);
--brown-700: hsla(12, 35%, 34%, 1);
--brown-800: hsla(10, 27%, 32%, 1);
--brown-900: hsla(17, 11%, 27%, 1);
// Accent colors
--yellow-300: hsla(35, 63%, 78%, 1);
--yellow-500: hsla(43, 89%, 53%, 1);
--yellow-700: hsla(52, 55%, 47%, 1);
--orange-300: hsla(31, 45%, 73%, 1);
--orange-500: hsla(17, 63%, 63%, 1);
--orange-700: hsla(29, 55%, 68%, 1);
--pink-300: hsla(18, 45%, 83%, 1);
--pink-500: hsla(347, 45%, 75%, 1);
--pink-700: hsla(358, 34%, 34%, 1);
}
// SCSS variables
// Greys
$grey-100: hsla(43, 46%, 88%, 1);
$grey-200: hsla(55, 3%, 73%, 1);
$grey-300: hsla(70, 2%, 65%, 1);
$grey-400: hsla(204, 4%, 59%, 1);
$grey-500: hsla(180, 1%, 58%, 1);
$grey-600: hsla(212, 4%, 53%, 1);
$grey-700: hsla(213, 5%, 40%, 1);
$grey-800: hsla(150, 2%, 37%, 1);
$grey-900: hsla(33, 6%, 33%, 1);
// Blues
$blue-100: hsla(201, 21%, 76%, 1);
$blue-200: hsla(201, 23%, 73%, 1);
$blue-300: hsla(207, 33%, 67%, 1);
$blue-400: hsla(205, 44%, 64%, 1);
$blue-500: hsla(194, 31%, 54%, 1);
$blue-600: hsla(220, 38%, 48%, 1);
$blue-700: hsla(221, 49%, 44%, 1);
$blue-800: hsla(201, 40%, 40%, 1);
$blue-900: hsla(227, 37%, 31%, 1);
// Greens
$green-100: hsla(147, 13%, 87%, 1);
$green-200: hsla(147, 19%, 81%, 1);
$green-300: hsla(104, 16%, 77%, 1);
$green-400: hsla(84, 38%, 72%, 1);
$green-500: hsla(84, 37%, 62%, 1);
$green-600: hsla(89, 29%, 49%, 1);
$green-700: hsla(149, 37%, 41%, 1);
$green-800: hsla(149, 26%, 34%, 1);
$green-900: hsla(122, 28%, 34%, 1);
// Reds
$red-100: hsla(6, 39%, 75%, 1);
$red-200: hsla(12, 41%, 66%, 1);
$red-300: hsla(14, 67%, 54%, 1);
$red-400: hsla(9, 61%, 50%, 1);
$red-500: hsla(5, 50%, 45%, 1);
$red-600: hsla(359, 47%, 41%, 1);
$red-700: hsla(353, 42%, 39%, 1);
$red-800: hsla(347, 44%, 40%, 1);
// Browns
$brown-100: hsla(24, 47%, 73%, 1);
$brown-200: hsla(33, 15%, 67%, 1);
$brown-300: hsla(24, 20%, 64%, 1);
$brown-400: hsla(14, 37%, 56%, 1);
$brown-500: hsla(33, 8%, 53%, 1);
$brown-600: hsla(12, 38%, 39%, 1);
$brown-700: hsla(12, 35%, 34%, 1);
$brown-800: hsla(10, 27%, 32%, 1);
$brown-900: hsla(17, 11%, 27%, 1);
// Accent colors
$yellow-300: hsla(35, 63%, 78%, 1);
$yellow-500: hsla(43, 89%, 53%, 1);
$yellow-700: hsla(52, 55%, 47%, 1);
$orange-300: hsla(31, 45%, 73%, 1);
$orange-500: hsla(17, 63%, 63%, 1);
$orange-700: hsla(29, 55%, 68%, 1);
$pink-300: hsla(18, 45%, 83%, 1);
$pink-500: hsla(347, 45%, 75%, 1);
$pink-700: hsla(358, 34%, 34%, 1);
Source html
<style>
.bg--grey-100 {
background-color: var(--grey-100);
}
.bg--grey-200 {
background-color: var(--grey-200);
}
.bg--grey-300 {
background-color: var(--grey-300);
}
.bg--grey-400 {
background-color: var(--grey-400);
}
.bg--grey-500 {
background-color: var(--grey-500);
}
.bg--grey-600 {
background-color: var(--grey-600);
}
.bg--grey-700 {
background-color: var(--grey-700);
}
.bg--grey-800 {
background-color: var(--grey-800);
}
.bg--grey-900 {
background-color: var(--grey-900);
}
.bg--blue-900 {
background-color: var(--blue-900);
}
.bg--blue-700 {
background-color: var(--blue-700);
}
.bg--blue-600 {
background-color: var(--blue-600);
}
.bg--blue-800 {
background-color: var(--blue-800);
}
.bg--blue-500 {
background-color: var(--blue-500);
}
.bg--blue-400 {
background-color: var(--blue-400);
}
.bg--blue-300 {
background-color: var(--blue-300);
}
.bg--blue-200 {
background-color: var(--blue-200);
}
.bg--blue-100 {
background-color: var(--blue-100);
}
.bg--green-800 {
background-color: var(--green-800);
}
.bg--green-900 {
background-color: var(--green-900);
}
.bg--green-700 {
background-color: var(--green-700);
}
.bg--green-600 {
background-color: var(--green-600);
}
.bg--green-500 {
background-color: var(--green-500);
}
.bg--green-400 {
background-color: var(--green-400);
}
.bg--green-300 {
background-color: var(--green-300);
}
.bg--green-200 {
background-color: var(--green-200);
}
.bg--green-100 {
background-color: var(--green-100);
}
.bg--yellow-500 {
background-color: var(--yellow-500);
}
.bg--yellow-700 {
background-color: var(--yellow-700);
}
.bg--yellow-300 {
background-color: var(--yellow-300);
}
.bg--orange-700 {
background-color: var(--orange-700);
}
.bg--orange-500 {
background-color: var(--orange-500);
}
.bg--orange-300 {
background-color: var(--orange-300);
}
.bg--red-500 {
background-color: var(--red-500);
}
.bg--red-600 {
background-color: var(--red-600);
}
.bg--red-700 {
background-color: var(--red-700);
}
.bg--red-800 {
background-color: var(--red-800);
}
.bg--red-200 {
background-color: var(--red-200);
}
.bg--red-100 {
background-color: var(--red-100);
}
.bg--pink-500 {
background-color: var(--pink-500);
}
.bg--pink-300 {
background-color: var(--pink-300);
}
.bg--pink-700 {
background-color: var(--pink-700);
}
.bg--brown-900 {
background-color: var(--brown-900);
}
.bg--brown-800 {
background-color: var(--brown-800);
}
.bg--brown-700 {
background-color: var(--brown-700);
}
.bg--brown-600 {
background-color: var(--brown-600);
}
.bg--brown-400 {
background-color: var(--brown-400);
}
.bg--brown-300 {
background-color: var(--brown-300);
}
.bg--brown-200 {
background-color: var(--brown-200);
}
.bg--brown-100 {
background-color: var(--brown-100);
}
.farbe {
width: 15vw;
display: inline-block;
vertical-align: top;
padding: 1em;
min-height: 15vw;
color: var(--white);
}
.farbe span {
font-size: 11px;
display: block;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
</style>
<h2>Neutrals</h2>
<div class="farbe bg--grey-100">grey-100 <span>blancivoire</span></div>
<div class="farbe bg--grey-200">grey-200 <span>grisclair31</span></div>
<div class="farbe bg--grey-300">grey-300 <span>grismoyen</span></div>
<div class="farbe bg--grey-400">grey-400 <span>grisclair59</span></div>
<div class="farbe bg--grey-500">grey-500 <span>gris31</span></div>
<div class="farbe bg--grey-600">grey-600 <span>gris59</span></div>
<div class="farbe bg--grey-700">grey-700 <span>grisfonce59</span></div>
<div class="farbe bg--grey-800">grey-800 <span>grisfonce31</span></div>
<div class="farbe bg--grey-900">grey-900 <span>ombrenaturelle31</span></div>
<h2>Blues</h2>
<div class="farbe bg--blue-900">blue-900 <span>bleuoutremerfonce</span></div>
<div class="farbe bg--blue-700">blue-700 <span>xxx</span></div>
<div class="farbe bg--blue-600">blue-600 <span>bleuoutremer31</span></div>
<div class="farbe bg--blue-800">blue-800 <span>bleuceruleen31</span></div>
<div class="farbe bg--blue-500">blue-500 <span>ceruleenvif</span></div>
<div class="farbe bg--blue-400">blue-400 <span>bleuceruleen59</span></div>
<div class="farbe bg--blue-300">blue-300 <span>outremermoyen</span></div>
<div class="farbe bg--blue-200">blue-200 <span>outremerclair</span></div>
<div class="farbe bg--blue-100">blue-100 <span>outremerpale</span></div>
<h2>Greens</h2>
<div class="farbe bg--green-800">green-800 <span>vert</span></div>
<div class="farbe bg--green-900">green-900 <span>vertfonce</span></div>
<div class="farbe bg--green-700">green-700 <span>vert59</span></div>
<div class="farbe bg--green-600">green-600 <span>vertclair</span></div>
<div class="farbe bg--green-500">green-500 <span>vertclair</span></div>
<div class="farbe bg--green-400">green-400 <span>vertjauneclair</span></div>
<div class="farbe bg--green-300">green-300 <span>vertanglaispale</span></div>
<div class="farbe bg--green-200">green-200 <span>ceruleenpale</span></div>
<div class="farbe bg--green-100">green-100 <span>outremergris</span></div>
<h2>Yellows</h2>
<div class="farbe bg--yellow-500">yellow-500 <span>lejaunevif</span></div>
<div class="farbe bg--yellow-700">yellow-700 <span>ocrejauneclair</span></div>
<div class="farbe bg--yellow-300">yellow-300 <span>ocre</span></div>
<h2>Oranges</h2>
<div class="farbe bg--orange-700">orange-700 <span>orangevif</span></div>
<div class="farbe bg--orange-500">orange-500 <span>orange</span></div>
<div class="farbe bg--orange-300">orange-300 <span>orangeclair</span></div>
<h2>Reds</h2>
<div class="farbe bg--red-500">red-500 <span>rougevermillon59</span></div>
<div class="farbe bg--red-600">red-600 <span>rougevermillon31</span></div>
<div class="farbe bg--red-700">red-700 <span>rougecarmin</span></div>
<div class="farbe bg--red-800">red-800 <span>rougerubia</span></div>
<div class="farbe bg--red-200">red-200 <span>rosevif</span></div>
<div class="farbe bg--red-100">red-100 <span>roseclair</span></div>
<h2>Pinks</h2>
<div class="farbe bg--pink-500">pink-500 <span>rosevif</span></div>
<div class="farbe bg--pink-300">pink-300 <span>rosepale</span></div>
<div class="farbe bg--pink-700">pink-700 <span>lerubis</span></div>
<h2>Browns</h2>
<div class="farbe bg--brown-900">brown-900 <span>terredombrebrulee31</span></div>
<div class="farbe bg--brown-800">brown-800 <span>terresiennebrulee31</span></div>
<div class="farbe bg--brown-700">brown-700 <span>terresiennebrulee59</span></div>
<div class="farbe bg--brown-600">brown-600 <span>locrerouge</span></div>
<div class="farbe bg--brown-400">brown-400 <span>terresiennebrique</span></div>
<div class="farbe bg--brown-300">brown-300 <span>terresienneclaire31</span></div>
<div class="farbe bg--brown-200">brown-200 <span>ombrenaturelleclaire</span></div>
<div class="farbe bg--brown-100">brown-100 <span>terresiennepale</span></div>