Color Palette
This section displays all colors defined in the Style Guide. You can see the hex code, an example of the color as well as the css class that can be used to color backgrounds or text sections.
All default colors also exist as custom properties and can be used directly under the designation --sg-color-{COLOR_NAME}. The color shades were only added to the Class Colors.
Basic
The basic color, that always needed.
Class
Class colors are color values that are assigned a meaning, which can change depending on the theme.
All class colors exist as custom properties including their shades.
The values are:
- CLASS primary, secondary, success, info, warning, danger, light, dark, text
The structure of the custom properties names are:
--sg-color-{CLASS}-lighter--sg-color-{CLASS}-lighter-contrast--sg-color-{CLASS}-light--sg-color-{CLASS}-light-contrast--sg-color-{CLASS}-default--sg-color-{CLASS}-default-contrast--sg-color-{CLASS}-dark--sg-color-{CLASS}-dark-contrast--sg-color-{CLASS}-darker--sg-color-{CLASS}-darker-contrast
Own Brands
A list of product branded colors for internal products.
External Brands
A list of product branded colors for external companies.
Gray
A list of gray colors.
Theme Default
A list of default colors.
Default Class
Theme finanzen.net
Special colors for finanzen.net
In NET we reuse a lots of colors from default theme.
finanzen.net Class
Theme finanzen.ch
Special colors for finanzen.ch.
In CH we reuse a lots of colors from finanzen.net theme.
finanzen.ch Class
Theme Markets Insider
Special colors for markets.businessinsider.com.
In MI we reuse a lots of colors from default theme.
Markets Insider Class
JavaScript
You have access to all default colors and all class colors and associated shades via the following JavaScript command.
const colors = styleGuide.Color.getColors();
console.log(colors['black']); // #000000
console.log(colors['brand-finnet']); // #093967
console.log(colors['danger']); // #DC3545
console.log(colors['success-darker']); // #082F1D
console.log(colors['warning-light-contrast']); // #FFFFFF
SCSS
The following example explains how a simple color or color shading can be defined and queried.
/* ---- _color.scss ---- */
/// define a color shade
$blue: -define(
$name: blue,
$lighter: -contrast(#71A9FD, $black),
$light: -contrast(#3F8BFD, $white),
$default: -contrast(#0D6EFD, $white),
$dark: -contrast(#0256D4, $white),
$darker: -contrast(#0141A1, $white)
);
/// define a single color
$ch-lila: -define($name: ch-lila, $color: #AD00AB);
/* ---- _some-component.scss ---- */
@use 'color' as color;
/// use the color.get() function, to get the color values
color.get(color.$blue) => #0D6EFD
color.get(color.$ch-lila) => #AD00AB
/// add the name key as second parameter, to get the color name
color.get(color.$blue, name) => blue
color.get(color.$ch-lila, name) => ch-lila
/// add the shader keys as second parameter, to get the shades or the contrasts
color.get(color.$blue, lighter) => #71A9FD
color.get(color.$blue, lighter-contrast) => #000000
color.get(color.$blue, light) => #3F8BFD
color.get(color.$blue, light-contrast) => #FFFFFF
color.get(color.$blue, default) => #0D6EFD
color.get(color.$blue, default-contrast) => #FFFFFF
color.get(color.$blue, dark) => #0256D4
color.get(color.$blue, dark-contrast) => #FFFFFF
color.get(color.$blue, darker) => #0141A1
color.get(color.$blue, darker-contrast) => #FFFFFF
/// SCSS will raise an exception, if a color or a color key not exist
color.get(color.$stuff) => throws a COLOR NOT EXIST error
color.get(color.$ch-lila, darker) => throws a COLOR NOT EXIST error
color.get(color.$ch-lila, dark-contrast) => throws a COLOR NOT EXIST error