<!--htmlhint style-disabled:false -->
<h1>Default colors</h1>
<div class="colors">
<div class="color">
<div class="background-ruby"></div>
<p class="beta color-name">ruby</p>
<p><strong>SASS:</strong> $color-ruby</p>
<p><strong>HEX:</strong> #ff4069</p>
<p><strong>RGB:</strong> 255 64 105</p>
<p><strong>CMYK:</strong> 0 84 38 0</p>
<p><strong>PMS:</strong> 1925U</p>
</div>
<div class="color">
<div class="background-ruby-light"></div>
<p class="beta color-name">ruby-light</p>
<p><strong>SASS:</strong> $color-ruby-light</p>
<p><strong>HEX:</strong> #ff9fb4</p>
<p><strong>RGB:</strong> 255 159 180</p>
<p><strong>CMYK:</strong> 0 51 13 0</p>
<p><strong>PMS:</strong> 708UP</p>
</div>
<div class="color">
<div class="background-peacock"></div>
<p class="beta color-name">peacock</p>
<p><strong>SASS:</strong> $color-peacock</p>
<p><strong>HEX:</strong> #c27fec</p>
<p><strong>RGB:</strong> 194 127 236</p>
<p><strong>CMYK:</strong> 41 54 0 0</p>
<p><strong>PMS:</strong> 2655U</p>
</div>
<div class="color">
<div class="background-peacock-light"></div>
<p class="beta color-name">peacock-light</p>
<p><strong>SASS:</strong> $color-peacock-light</p>
<p><strong>HEX:</strong> #e0bff5</p>
<p><strong>RGB:</strong> 224 191 245</p>
<p><strong>CMYK:</strong> 17 30 0 0</p>
<p><strong>PMS:</strong> 2635U</p>
</div>
<div class="color">
<div class="background-jade"></div>
<p class="beta color-name">jade</p>
<p><strong>SASS:</strong> $color-jade</p>
<p><strong>HEX:</strong> #55c7b4</p>
<p><strong>RGB:</strong> 85 199 180</p>
<p><strong>CMYK:</strong> 58 0 30 0</p>
<p><strong>PMS:</strong> 325U</p>
</div>
<div class="color">
<div class="background-jade-light"></div>
<p class="beta color-name">jade-light</p>
<p><strong>SASS:</strong> $color-jade-light</p>
<p><strong>HEX:</strong> #aae3d9</p>
<p><strong>RGB:</strong> 170 227 217</p>
<p><strong>CMYK:</strong> 28 0 20 0</p>
<p><strong>PMS:</strong> 324U</p>
</div>
<div class="color">
<div class="background-sandstone"></div>
<p class="beta color-name">sandstone</p>
<p><strong>SASS:</strong> $color-sandstone</p>
<p><strong>HEX:</strong> #f99963</p>
<p><strong>RGB:</strong> 249 153 99</p>
<p><strong>CMYK:</strong> 0 39 50 0</p>
<p><strong>PMS:</strong> 473U</p>
</div>
<div class="color">
<div class="background-sandstone-light"></div>
<p class="beta color-name">sandstone-light</p>
<p><strong>SASS:</strong> $color-sandstone-light</p>
<p><strong>HEX:</strong> #fcccb1</p>
<p><strong>RGB:</strong> 252 204 177</p>
<p><strong>CMYK:</strong> 1 20 30 0</p>
<p><strong>PMS:</strong> 719UP</p>
</div>
<div class="color">
<div class="background-lemon"></div>
<p class="beta color-name">lemon</p>
<p><strong>SASS:</strong> $color-lemon</p>
<p><strong>HEX:</strong> #ffce2e</p>
<p><strong>RGB:</strong> 255 206 46</p>
<p><strong>CMYK:</strong> 0 20 86 0</p>
<p><strong>PMS:</strong> 120U</p>
</div>
<div class="color">
<div class="background-lemon-light"></div>
<p class="beta color-name">lemon-light</p>
<p><strong>SASS:</strong> $color-lemon-light</p>
<p><strong>HEX:</strong> #ffe696</p>
<p><strong>RGB:</strong> 255 230 150</p>
<p><strong>CMYK:</strong> 0 9 50 0</p>
<p><strong>PMS:</strong> 1215UP</p>
</div>
<div class="color">
<div class="background-ocean"></div>
<p class="beta color-name">ocean</p>
<p><strong>SASS:</strong> $color-ocean</p>
<p><strong>HEX:</strong> #50b2fc</p>
<p><strong>RGB:</strong> 80 178 252</p>
<p><strong>CMYK:</strong> 69 10 0 0</p>
<p><strong>PMS:</strong> 299U</p>
</div>
<div class="color">
<div class="background-ocean-light"></div>
<p class="beta color-name">ocean-light</p>
<p><strong>SASS:</strong> $color-ocean-light</p>
<p><strong>HEX:</strong> #a7d8fd</p>
<p><strong>RGB:</strong> 167 216 253</p>
<p><strong>CMYK:</strong> 35 5 1 0</p>
<p><strong>PMS:</strong> 2830U</p>
</div>
<div class="color">
<div class="background-black"></div>
<p class="beta color-name">black</p>
<p><strong>SASS:</strong> $color-black</p>
<p><strong>HEX:</strong> #000000</p>
<p><strong>RGB:</strong> 0 0 0</p>
<p><strong>CMYK:</strong> 50 50 50 100</p>
<p><strong>PMS:</strong> n/a</p>
</div>
<div class="color">
<div class="background-cyberspace"></div>
<p class="beta color-name">cyberspace</p>
<p><strong>SASS:</strong> $color-cyberspace</p>
<p><strong>HEX:</strong> #1f2a36</p>
<p><strong>RGB:</strong> 31 42 54</p>
<p><strong>CMYK:</strong> 88 71 52 41</p>
<p><strong>PMS:</strong> PMS 289U</p>
</div>
<div class="color">
<div class="background-granit"></div>
<p class="beta color-name">granit</p>
<p><strong>SASS:</strong> $color-granit</p>
<p><strong>HEX:</strong> #8E9297</p>
<p><strong>RGB:</strong> 142 146 151</p>
<p><strong>CMYK:</strong> 6 3 0 41</p>
<p><strong>PMS:</strong> n/a</p>
</div>
<div class="color">
<div class="background-concrete"></div>
<p class="beta color-name">concrete</p>
<p><strong>SASS:</strong> $color-concrete</p>
<p><strong>HEX:</strong> #d8d8d8</p>
<p><strong>RGB:</strong> 216 216 216</p>
<p><strong>CMYK:</strong> 0 0 0 15</p>
<p><strong>PMS:</strong> n/a</p>
</div>
<div class="color">
<div class="background-ash has_border"></div>
<p class="beta color-name">ash</p>
<p><strong>SASS:</strong> $color-ash</p>
<p><strong>HEX:</strong> #ededed</p>
<p><strong>RGB:</strong> 237 237 237</p>
<p><strong>CMYK:</strong> 0 0 0 7</p>
<p><strong>PMS:</strong> n/a</p>
</div>
<div class="color">
<div class="background-snow"></div>
<p class="beta color-name">snow</p>
<p><strong>SASS:</strong> $color-snow</p>
<p><strong>HEX:</strong> #ffffff</p>
<p><strong>RGB:</strong> 255 255 255</p>
<p><strong>CMYK:</strong> 0 0 0 0</p>
<p><strong>PMS:</strong> n/a</p>
</div>
</div>
<h2 class="alpha">Accessibility colors</h2>
<div class="row no-gutters">
<div class="grid-xl-7 grid-lg-10 grid-md-12 grid-18">
<p>This set of colors are to be used only for accessibility purposes when the default colors doesn't meet the WCAG AA baseline. Any use of these colors must be approved by Internetstiftelsen.</p>
</div>
</div>
<div class="colors">
<div class="color color-33">
<div class="background-ruby-dark"></div>
<p class="beta color-name">ruby-dark</p>
<p><strong>SASS:</strong> $color-ruby-dark</p>
<p><strong>HEX:</strong> #d9002f</p>
<p><strong>RGB:</strong> n/a</p>
<p><strong>CMYK:</strong> n/a</p>
<p><strong>PMS:</strong> n/a</p>
</div>
<div class="color color-33">
<div class="background-peacock-dark"></div>
<p class="beta color-name">peacock-dark</p>
<p><strong>SASS:</strong> $color-peacock-dark</p>
<p><strong>HEX:</strong> #9826df</p>
<p><strong>RGB:</strong> n/a</p>
<p><strong>CMYK:</strong> n/a</p>
<p><strong>PMS:</strong> n/a</p>
</div>
<div class="color color-33">
<div class="background-sandstone-dark"></div>
<p class="beta color-name">sandstone-dark</p>
<p><strong>SASS:</strong> $color-sandstone-dark</p>
<p><strong>HEX:</strong> #ed5b09</p>
<p><strong>RGB:</strong> n/a</p>
<p><strong>CMYK:</strong> n/a</p>
<p><strong>PMS:</strong> n/a</p>
</div>
<div class="color color-33">
<div class="background-lemon-dark"></div>
<p class="beta color-name">lemon-dark</p>
<p><strong>SASS:</strong> $color-lemon-dark</p>
<p><strong>HEX:</strong> #e1ac00</p>
<p><strong>RGB:</strong> n/a</p>
<p><strong>CMYK:</strong> n/a</p>
<p><strong>PMS:</strong> n/a</p>
</div>
<div class="color color-33">
<div class="background-jade-dark"></div>
<p class="beta color-name">jade-dark</p>
<p><strong>SASS:</strong> $color-jade-dark</p>
<p><strong>HEX:</strong> #2d897a</p>
<p><strong>RGB:</strong> n/a</p>
<p><strong>CMYK:</strong> n/a</p>
<p><strong>PMS:</strong> n/a</p>
</div>
<div class="color color-33">
<div class="background-ocean-dark"></div>
<p class="beta color-name">ocean-dark</p>
<p><strong>SASS:</strong> $color-ocean-dark</p>
<p><strong>HEX:</strong> #0477ce</p>
<p><strong>RGB:</strong> n/a</p>
<p><strong>CMYK:</strong> n/a</p>
<p><strong>PMS:</strong> n/a</p>
</div>
</div>
<style>
.colors {
display: flex;
flex-wrap: wrap;
margin-bottom: 2em;
}
.color {
flex: 100% 1 0;
max-width: 100vw;
}
@media (min-width: 768px) {
.color {
flex: 50% 1 0;
}
.color-33 {
flex: 33.333333% 1 0;
}
}
.color div {
width: 100%;
height: 80px;
margin-bottom: 10px;
}
.has_border {
border: 1px solid #d8d8d8;
}
.color p {
line-height: 1.25;
margin: 0 10px;
}
.color p:last-child {
margin-bottom: 40px;
}
.color p strong {
font-family: 'Roboto Mono Regular', monotype;
}
.color-name::first-letter {
text-transform: uppercase;
}
</style>
<!--htmlhint style-disabled:false -->
<h1>Default colors</h1>
<div class="colors">
{{#each colors}}
<div class="color">
<div class="background-{{name}}{{#if hasBorder}} has_border{{/if}}"></div>
<p class="beta color-name">{{name}}</p>
<p><strong>{{../sass}}:</strong> {{title}}</p>
<p><strong>{{../hex}}:</strong> {{hex}}</p>
<p><strong>{{../rgb}}:</strong> {{rgb}}</p>
<p><strong>{{../cmyk}}:</strong> {{cmyk}}</p>
<p><strong>{{../pms}}:</strong> {{pms}}</p>
</div>
{{/each}}
</div>
<h2 class="alpha">Accessibility colors</h2>
<div class="row no-gutters">
<div class="grid-xl-7 grid-lg-10 grid-md-12 grid-18">
<p>This set of colors are to be used only for accessibility purposes when the default colors doesn't meet the WCAG AA baseline. Any use of these colors must be approved by Internetstiftelsen.</p>
</div>
</div>
<div class="colors">
{{#each specialColors}}
<div class="color color-33">
<div class="background-{{name}}{{#if hasBorder}} has_border{{/if}}"></div>
<p class="beta color-name">{{name}}</p>
<p><strong>{{../sass}}:</strong> {{title}}</p>
<p><strong>{{../hex}}:</strong> {{hex}}</p>
<p><strong>{{../rgb}}:</strong> {{rgb}}</p>
<p><strong>{{../cmyk}}:</strong> {{cmyk}}</p>
<p><strong>{{../pms}}:</strong> {{pms}}</p>
</div>
{{/each}}
</div>
<style>
.colors {
display: flex;
flex-wrap: wrap;
margin-bottom: 2em;
}
.color {
flex: 100% 1 0;
max-width: 100vw;
}
@media (min-width: 768px) {
.color {
flex: 50% 1 0;
}
.color-33 {
flex: 33.333333% 1 0;
}
}
.color div {
width: 100%;
height: 80px;
margin-bottom: 10px;
}
.has_border {
border: 1px solid #d8d8d8;
}
.color p {
line-height: 1.25;
margin: 0 10px;
}
.color p:last-child {
margin-bottom: 40px;
}
.color p strong {
font-family: 'Roboto Mono Regular', monotype;
}
.color-name::first-letter {
text-transform: uppercase;
}
</style>
{
"sass": "SASS",
"hex": "HEX",
"rgb": "RGB",
"cmyk": "CMYK",
"pms": "PMS",
"colors": [
{
"name": "ruby",
"title": "$color-ruby",
"hex": "#ff4069",
"rgb": "255 64 105",
"cmyk": "0 84 38 0",
"pms": "1925U",
"hasBorder": false
},
{
"name": "ruby-light",
"title": "$color-ruby-light",
"hex": "#ff9fb4",
"rgb": "255 159 180",
"cmyk": "0 51 13 0",
"pms": "708UP",
"hasBorder": false
},
{
"name": "peacock",
"title": "$color-peacock",
"hex": "#c27fec",
"rgb": "194 127 236",
"cmyk": "41 54 0 0",
"pms": "2655U",
"hasBorder": false
},
{
"name": "peacock-light",
"title": "$color-peacock-light",
"hex": "#e0bff5",
"rgb": "224 191 245",
"cmyk": "17 30 0 0",
"pms": "2635U",
"hasBorder": false
},
{
"name": "jade",
"title": "$color-jade",
"hex": "#55c7b4",
"rgb": "85 199 180",
"cmyk": "58 0 30 0",
"pms": "325U",
"hasBorder": false
},
{
"name": "jade-light",
"title": "$color-jade-light",
"hex": "#aae3d9",
"rgb": "170 227 217",
"cmyk": "28 0 20 0",
"pms": "324U",
"hasBorder": false
},
{
"name": "sandstone",
"title": "$color-sandstone",
"hex": "#f99963",
"rgb": "249 153 99",
"cmyk": "0 39 50 0",
"pms": "473U"
},
{
"name": "sandstone-light",
"title": "$color-sandstone-light",
"hex": "#fcccb1",
"rgb": "252 204 177",
"cmyk": "1 20 30 0",
"pms": "719UP",
"hasBorder": false
},
{
"name": "lemon",
"title": "$color-lemon",
"hex": "#ffce2e",
"rgb": "255 206 46",
"cmyk": "0 20 86 0",
"pms": "120U"
},
{
"name": "lemon-light",
"title": "$color-lemon-light",
"hex": "#ffe696",
"rgb": "255 230 150",
"cmyk": "0 9 50 0",
"pms": "1215UP",
"hasBorder": false
},
{
"name": "ocean",
"title": "$color-ocean",
"hex": "#50b2fc",
"rgb": "80 178 252",
"cmyk": "69 10 0 0",
"pms": "299U",
"hasBorder": false
},
{
"name": "ocean-light",
"title": "$color-ocean-light",
"hex": "#a7d8fd",
"rgb": "167 216 253",
"cmyk": "35 5 1 0",
"pms": "2830U",
"hasBorder": false
},
{
"name": "black",
"title": "$color-black",
"hex": "#000000",
"rgb": "0 0 0",
"cmyk": "50 50 50 100",
"pms": "n/a",
"hasBorder": false
},
{
"name": "cyberspace",
"title": "$color-cyberspace",
"hex": "#1f2a36",
"rgb": "31 42 54",
"cmyk": "88 71 52 41",
"pms": "PMS 289U",
"hasBorder": false
},
{
"name": "granit",
"title": "$color-granit",
"hex": "#8E9297",
"rgb": "142 146 151",
"cmyk": "6 3 0 41",
"pms": "n/a",
"hasBorder": false
},
{
"name": "concrete",
"title": "$color-concrete",
"hex": "#d8d8d8",
"rgb": "216 216 216",
"cmyk": "0 0 0 15",
"pms": "n/a",
"hasBorder": false
},
{
"name": "ash",
"title": "$color-ash",
"hex": "#ededed",
"rgb": "237 237 237",
"cmyk": "0 0 0 7",
"pms": "n/a",
"hasBorder": true
},
{
"name": "snow",
"title": "$color-snow",
"hex": "#ffffff",
"rgb": "255 255 255",
"cmyk": "0 0 0 0",
"pms": "n/a",
"hasBorder": false
}
],
"specialColors": [
{
"name": "ruby-dark",
"title": "$color-ruby-dark",
"hex": "#d9002f",
"rgb": "n/a",
"cmyk": "n/a",
"pms": "n/a"
},
{
"name": "peacock-dark",
"title": "$color-peacock-dark",
"hex": "#9826df",
"rgb": "n/a",
"cmyk": "n/a",
"pms": "n/a"
},
{
"name": "sandstone-dark",
"title": "$color-sandstone-dark",
"hex": "#ed5b09",
"rgb": "n/a",
"cmyk": "n/a",
"pms": "n/a"
},
{
"name": "lemon-dark",
"title": "$color-lemon-dark",
"hex": "#e1ac00",
"rgb": "n/a",
"cmyk": "n/a",
"pms": "n/a"
},
{
"name": "jade-dark",
"title": "$color-jade-dark",
"hex": "#2d897a",
"rgb": "n/a",
"cmyk": "n/a",
"pms": "n/a"
},
{
"name": "ocean-dark",
"title": "$color-ocean-dark",
"hex": "#0477ce",
"rgb": "n/a",
"cmyk": "n/a",
"pms": "n/a",
"hasBorder": false
}
]
}
@charset "UTF-8";
@use 'colors-functions' as colorFunc;
// Generate background color classes e.g. .background-ruby
/// @group Colors
.background {
@include colorFunc.color_values(colorFunc.$colors, 'background-color', $separator: '-');
}
@charset "UTF-8";
@use 'sass:meta';
@use 'colors' as colors;
/// Get a shaded version of a color
/// @group Colors
@function shade($color, $percentage) {
@return mix(black, colors.$color, $percentage);
}
/// Get a tinted version of a color
/// @group Colors
@function tint($color, $percentage) {
@return mix(white, colors.$color, $percentage);
}
/// @group Colors
$colors: (
black: colors.$color-black,
snow: colors.$color-snow,
cyberspace: colors.$color-cyberspace,
dark: colors.$color-dark,
granit: colors.$color-granit,
concrete: colors.$color-concrete,
ash: colors.$color-ash,
ruby: (
base: colors.$color-ruby,
light: colors.$color-ruby-light,
dark: colors.$color-ruby-dark,
medium-dark: colors.$color-ruby-medium-dark
),
peacock: (
base: colors.$color-peacock,
light: colors.$color-peacock-light,
dark: colors.$color-peacock-dark,
medium-dark: colors.$color-peacock-medium-dark
),
jade: (
base: colors.$color-jade,
light: colors.$color-jade-light,
dark: colors.$color-jade-dark,
medium-dark: colors.$color-jade-medium-dark
),
sandstone: (
base: colors.$color-sandstone,
light: colors.$color-sandstone-light,
dark: colors.$color-sandstone-dark,
medium-dark: colors.$color-sandstone-medium-dark
),
lemon: (
base: colors.$color-lemon,
light: colors.$color-lemon-light,
dark: colors.$color-lemon-dark,
medium-dark: colors.$color-lemon-medium-dark
),
ocean: (
base: colors.$color-ocean,
light: colors.$color-ocean-light,
dark : colors.$color-ocean-dark,
medium-dark: colors.$color-ocean-medium-dark
)
);
/// Generate color values on attributes e.g @include color_values(colors.$colors, 'color', $separator: '-');
/// Generates this: color: color-name;
/// @group Colors
@mixin color_values($map, $attribute, $prefix: '-', $separator: '-', $base: 'base') {
@each $key, $value in $map {
&#{if($key != $base, #{$prefix}#{$key}, '')} {
@if meta.type-of($value) == 'map' {
@include color_values($value, $attribute, $separator);
}
@else {
#{$attribute}: $value !important;
}
}
}
}
/// Generate color classes with attribute and value and pass optional nested element e.g @include color_classes ($map: colors.$colors,$prefix: '-',$attribute: 'fill',$element: 'svg');
/// Generates this: element.color-name element {fill: color-name}
/// @group Colors
@mixin color_classes($map, $attribute, $prefix: '', $separator: '.', $base: 'base', $element: '') {
@each $key, $value in $map {
&#{if($key != $base, #{$separator}#{$key}, '')} {
@if meta.type-of($value) == 'map' {
@include color_classes($value, $attribute, $prefix: '.', $separator: '-', $element: $element);
}
@else {
@if ($element != '') {
#{$element} {
#{$attribute}: $value;
}
}
@else {
#{$attribute}: $value;
}
}
}
}
}
/// Generate wordpress color classes with attribute and value
/// Generates this: .has-colorname-color
/// @group Colors
@mixin wordpress_color_classes($map, $attribute, $separator: '-', $suffix: '', $base: 'base') {
@each $key, $value in $map {
@if meta.type-of($value) == 'map' {
&#{if($key != $base, #{$separator}#{$key}, '')} {
@include wordpress_color_classes($value, $attribute, $separator, '-color');
}
}
@else {
&#{if($key != $base, #{$separator}#{$key}, '')}#{$suffix} {
#{$attribute}: $value;
}
}
}
}
@charset "UTF-8";
@use "sass:color";
/* @group Colors */
$color-black: #000 !default;
$color-snow: #fff !default;
$color-granit: #8e9297 !default;
$color-concrete: #d8d8d8;
$color-ash: #ededed !default;
$color-ruby: #ff4069 !default;
$color-ruby-light: #ff9fb4 !default;
$color-peacock: #c27fec !default;
$color-peacock-light: #e0bff5 !default;
$color-jade: #55c7b4 !default;
$color-jade-light: #aae3d9 !default;
$color-sandstone: #f99963 !default;
$color-sandstone-light: #fcccb1 !default;
$color-lemon: #ffce2e !default;
$color-lemon-light: #ffe696 !default;
$color-ocean: #50b2fc !default;
$color-ocean-light: #a7d8fd !default;
$color-cyberspace: #1f2a36 !default;
$color-dark: #4c4c4c !default;
$color-facebook: #0866ff !default;
$color-twitter: #00aced !default;
$color-linkedin: #0a66c2 !default;
/* Dark colors only for accessibility */
$color-ruby-dark: color.adjust($color-ruby, $lightness: -20%);
$color-peacock-dark: color.adjust($color-peacock, $lightness: -20%);
$color-jade-dark: color.adjust($color-jade, $lightness: -20%);
$color-sandstone-dark: color.adjust($color-sandstone, $lightness: -20%);
$color-lemon-dark: color.adjust($color-lemon, $lightness: -15%);
$color-ocean-dark:color.adjust($color-ocean, $lightness: -24%);
/* Medium dark colors, for decoration purposes like borders */
$color-ruby-medium-dark: color.adjust($color-ruby, $lightness: -10%);
$color-peacock-medium-dark: color.adjust($color-peacock, $lightness: -10%);
$color-jade-medium-dark: color.adjust($color-jade, $lightness: -10%);
$color-sandstone-medium-dark: color.adjust($color-sandstone, $lightness: -10%);
$color-lemon-medium-dark: color.adjust($color-lemon, $lightness: -13%);
$color-ocean-medium-dark: color.adjust($color-ocean, $lightness: -10%);
@charset "UTF-8";
@use 'colors-functions' as colorFunc;
// Generate text color classes e.g. .color-ruby
/// @group Colors
.color {
@include colorFunc.color_values(colorFunc.$colors, 'color', $separator: '-');
}
@charset "UTF-8";
@use 'colors-functions' as colorFunc;
// Generate wordpress color classes e.g. .has-ruby-color
/// @group Colors
.has {
@include colorFunc.wordpress_color_classes (
colorFunc.$colors,
$attribute: 'color',
$separator: '-',
$suffix: '-color'
);
}
No notes defined.