Skip to content

Instantly share code, notes, and snippets.

@tmrk
Last active May 2, 2024 09:30
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tmrk/95c9659abef00c9eb13d11fed0869588 to your computer and use it in GitHub Desktop.
Save tmrk/95c9659abef00c9eb13d11fed0869588 to your computer and use it in GitHub Desktop.
Sweden Brand Colours as Sass and CSS variables. Source: https://sharingsweden.se/the-sweden-brand/brand-visual-identity/colour - originally developed by @deBroome & maintained by @sveins
/* Sweden Brand Colours (CSS variables) */
/* Source: https://sharingsweden.se/the-sweden-brand/brand-visual-identity/colour */
:root {
/* Primary colours */
--yellow: rgb(254, 203, 0);
--blue: rgb(0, 82, 147);
/* Secondary colours A */
--dawn-blue: rgb(26, 48, 80);
--dark-dawn-blue: rgb(20, 38, 56);
--grain-yellow: rgb(232, 227, 209);
--pale-yellow: rgb(255, 212, 129);
/* Secondary colours B (greyscale) */
--white: rgb(255, 255, 255);
--black: rgb(0, 0, 0);
--pale-winter-grey-1: rgb(250, 250, 250);
--pale-winter-grey-2: rgb(237, 237, 237);
--winter-grey: rgb(189, 189, 189);
--dark-winter-grey-1: rgb(117, 117, 117);
--dark-winter-grey-2: rgb(66, 66, 66);
/* Specialty colours (green) */
--green-minus-3: rgb(153, 222, 201);
--green-minus-2: rgb(102, 205, 176);
--green-minus-1: rgb(50, 186, 148);
--green: rgb(1, 168, 124);
--green-plus-1: rgb(0, 136, 98);
--green-plus-2: rgb(0, 102, 73);
--green-plus-3: rgb(0, 69, 48);
/* Specialty colours (blue) */
--blue-minus-3: rgb(153, 213, 237);
--blue-minus-2: rgb(102, 195, 229);
--blue-minus-1: rgb(50, 172, 223);
--blue: rgb(0, 153, 211);
--blue-plus-1: rgb(0, 122, 171);
--blue-plus-2: rgb(0, 92, 128);
--blue-plus-3: rgb(0, 77, 107);
/* Specialty colours (purple) */
--purple-minus-3: rgb(194, 176, 227);
--purple-minus-2: rgb(163, 138, 212);
--purple-minus-1: rgb(133, 97, 196);
--purple: rgb(102, 59, 184);
--purple-plus-1: rgb(82, 46, 145);
--purple-plus-2: rgb(61, 36, 110);
--purple-plus-3: rgb(41, 23, 74);
/* Specialty colours (orange) */
--orange-minus-3: rgb(255, 204, 153);
--orange-minus-2: rgb(255, 178, 102);
--orange-minus-1: rgb(255, 153, 51);
--orange: rgb(255, 128, 0);
--orange-plus-1: rgb(204, 102, 0);
--orange-plus-2: rgb(178, 89, 0);
--orange-plus-3: rgb(102, 51, 0);
/* Specialty colours (red) */
--red-minus-3: rgb(237, 176, 171);
--red-minus-2: rgb(227, 135, 128);
--red-minus-1: rgb(219, 97, 87);
--red: rgb(209, 56, 43);
--red-plus-1: rgb(168, 46, 36);
--red-plus-2: rgb(125, 33, 26);
--red-plus-3: rgb(84, 23, 18);
/* Specialty colours (pink) */
--pink-minus-3: rgb(247, 186, 209);
--pink-minus-2: rgb(245, 143, 176);
--pink-minus-1: rgb(240, 97, 145);
--pink: rgb(237, 64, 122);
--pink-plus-1: rgb(232, 31, 99);
--pink-plus-2: rgb(194, 23, 92);
--pink-plus-3: rgb(135, 13, 79);
}
/* Sweden Brand Colours (Sass variables) */
/* Source: https://sharingsweden.se/the-sweden-brand/brand-visual-identity/colour */
/* Primary colours */
$yellow: rgb(254, 203, 0);
$blue: rgb(0, 82, 147);
/* Secondary colours A */
$dawn-blue: rgb(26, 48, 80);
$dark-dawn-blue: rgb(20, 38, 56);
$grain-yellow: rgb(232, 227, 209);
$pale-yellow: rgb(255, 212, 129);
/* Secondary colours B (greyscale) */
$white: rgb(255, 255, 255);
$black: rgb(0, 0, 0);
$pale-winter-grey-1: rgb(250, 250, 250);
$pale-winter-grey-2: rgb(237, 237, 237);
$winter-grey: rgb(189, 189, 189);
$dark-winter-grey-1: rgb(117, 117, 117);
$dark-winter-grey-2: rgb(66, 66, 66);
/* Specialty colours (green) */
$green-minus-3: rgb(153, 222, 201);
$green-minus-2: rgb(102, 205, 176);
$green-minus-1: rgb(50, 186, 148);
$green: rgb(1, 168, 124);
$green-plus-1: rgb(0, 136, 98);
$green-plus-2: rgb(0, 102, 73);
$green-plus-3: rgb(0, 69, 48);
/* Specialty colours (blue) */
$blue-minus-3: rgb(153, 213, 237);
$blue-minus-2: rgb(102, 195, 229);
$blue-minus-1: rgb(50, 172, 223);
$blue: rgb(0, 153, 211);
$blue-plus-1: rgb(0, 122, 171);
$blue-plus-2: rgb(0, 92, 128);
$blue-plus-3: rgb(0, 77, 107);
/* Specialty colours (purple) */
$purple-minus-3: rgb(194, 176, 227);
$purple-minus-2: rgb(163, 138, 212);
$purple-minus-1: rgb(133, 97, 196);
$purple: rgb(102, 59, 184);
$purple-plus-1: rgb(82, 46, 145);
$purple-plus-2: rgb(61, 36, 110);
$purple-plus-3: rgb(41, 23, 74);
/* Specialty colours (orange) */
$orange-minus-3: rgb(255, 204, 153);
$orange-minus-2: rgb(255, 178, 102);
$orange-minus-1: rgb(255, 153, 51);
$orange: rgb(255, 128, 0);
$orange-plus-1: rgb(204, 102, 0);
$orange-plus-2: rgb(178, 89, 0);
$orange-plus-3: rgb(102, 51, 0);
/* Specialty colours (red) */
$red-minus-3: rgb(237, 176, 171);
$red-minus-2: rgb(227, 135, 128);
$red-minus-1: rgb(219, 97, 87);
$red: rgb(209, 56, 43);
$red-plus-1: rgb(168, 46, 36);
$red-plus-2: rgb(125, 33, 26);
$red-plus-3: rgb(84, 23, 18);
/* Specialty colours (pink) */
$pink-minus-3: rgb(247, 186, 209);
$pink-minus-2: rgb(245, 143, 176);
$pink-minus-1: rgb(240, 97, 145);
$pink: rgb(237, 64, 122);
$pink-plus-1: rgb(232, 31, 99);
$pink-plus-2: rgb(194, 23, 92);
$pink-plus-3: rgb(135, 13, 79);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment