Swegon Component Library

Colors 

<!-- Color White -->
<div class="color">
    <div style="background-color: #FFFFFF"></div>
    <p>$color-white</p>
    <p>#FFFFFF</p>
</div>


<!-- Color Black -->
<div class="color">
    <div style="background-color: #191919"></div>
    <p>$color-black</p>
    <p>#191919</p>
</div>


<!-- Color Red -->
<div class="color">
    <div style="background-color: #C14B0F"></div>
    <p>$color-red</p>
    <p>#C14B0F</p>
</div>


<!-- Color Red Light -->
<div class="color">
    <div style="background-color: #FDF3EF"></div>
    <p>$color-red-light</p>
    <p>#FDF3EF</p>
</div>


<!-- Color Blue -->
<div class="color">
    <div style="background-color: #0064B3"></div>
    <p>$color-blue</p>
    <p>#0064B3</p>
</div>


<!-- Color Blue 2 -->
<div class="color">
    <div style="background-color: #397087"></div>
    <p>$color-blue-2</p>
    <p>#397087</p>
</div>


<!-- Color Blue 3 -->
<div class="color">
    <div style="background-color: #CDDBE1"></div>
    <p>$color-blue-3</p>
    <p>#CDDBE1</p>
</div>


<!-- Color Green -->
<div class="color">
    <div style="background-color: #39AA0D"></div>
    <p>$color-green</p>
    <p>#39AA0D</p>
</div>


<!-- Color Green Pale -->
<div class="color">
    <div style="background-color: #E9F2E5"></div>
    <p>$color-green-pale</p>
    <p>#E9F2E5</p>
</div>


<!-- Color Green Light -->
<div class="color">
    <div style="background-color: #7FC600"></div>
    <p>$color-green-light</p>
    <p>#7FC600</p>
</div>


<!-- Color Green Dark -->
<div class="color">
    <div style="background-color: #277D32"></div>
    <p>$color-green-dark</p>
    <p>#277D32</p>
</div>


<!-- Color Turquoise -->
<div class="color">
    <div style="background-color: #00857F"></div>
    <p>$color-turquoise</p>
    <p>#00857F</p>
</div>


<!-- Color Cardinal -->
<div class="color">
    <div style="background-color: #E20E49"></div>
    <p>$color-cardinal</p>
    <p>#E20E49</p>
</div>


<!-- Color Gray 1 -->
<div class="color">
    <div style="background-color: #F5F5F5"></div>
    <p>$color-gray-1</p>
    <p>#F5F5F5</p>
</div>


<!-- Color Gray 2 -->
<div class="color">
    <div style="background-color: #D1D2D2"></div>
    <p>$color-gray-2</p>
    <p>#D1D2D2</p>
</div>


<!-- Color Gray 3 -->
<div class="color">
    <div style="background-color: #AEAFAF"></div>
    <p>$color-gray-3</p>
    <p>#AEAFAF</p>
</div>


<!-- Color Gray 4 -->
<div class="color">
    <div style="background-color: #737473"></div>
    <p>$color-gray-4</p>
    <p>#737473</p>
</div>


<!-- Color Gray 5 -->
<div class="color">
    <div style="background-color: #434343"></div>
    <p>$color-gray-5</p>
    <p>#434343</p>
</div>


<div class="color">
    <div style="background-color: {{hex}}"></div>
    <p>{{title}}</p>
    <p>{{hex}}</p>
</div>
 
/* Color White */
{
  "title": "$color-white",
  "hex": "#FFFFFF"
}


/* Color Black */
{
  "title": "$color-black",
  "hex": "#191919"
}


/* Color Red */
{
  "title": "$color-red",
  "hex": "#C14B0F"
}


/* Color Red Light */
{
  "title": "$color-red-light",
  "hex": "#FDF3EF"
}


/* Color Blue */
{
  "title": "$color-blue",
  "hex": "#0064B3"
}


/* Color Blue 2 */
{
  "title": "$color-blue-2",
  "hex": "#397087"
}


/* Color Blue 3 */
{
  "title": "$color-blue-3",
  "hex": "#CDDBE1"
}


/* Color Green */
{
  "title": "$color-green",
  "hex": "#39AA0D"
}


/* Color Green Pale */
{
  "title": "$color-green-pale",
  "hex": "#E9F2E5"
}


/* Color Green Light */
{
  "title": "$color-green-light",
  "hex": "#7FC600"
}


/* Color Green Dark */
{
  "title": "$color-green-dark",
  "hex": "#277D32"
}


/* Color Turquoise */
{
  "title": "$color-turquoise",
  "hex": "#00857F"
}


/* Color Cardinal */
{
  "title": "$color-cardinal",
  "hex": "#E20E49"
}


/* Color Gray 1 */
{
  "title": "$color-gray-1",
  "hex": "#F5F5F5"
}


/* Color Gray 2 */
{
  "title": "$color-gray-2",
  "hex": "#D1D2D2"
}


/* Color Gray 3 */
{
  "title": "$color-gray-3",
  "hex": "#AEAFAF"
}


/* Color Gray 4 */
{
  "title": "$color-gray-4",
  "hex": "#737473"
}


/* Color Gray 5 */
{
  "title": "$color-gray-5",
  "hex": "#434343"
}
  • Content: 
    $color-white: #fff;
$color-black: #191919;
$color-red: #C14B0F;
$color-red-light: #FDF3EF;
$color-blue: #0064B3;
$color-blue-2: #397087;
$color-blue-3: #CDDBE1;
$color-green: #39AA0D;
$color-green-pale: #E9F2E5;
$color-green-light: #7FC600;
$color-green-dark: #277D32;
$color-turquoise: #00857F;
$color-cardinal: #E20E49;
$color-gray-1: #F5F5F5;
$color-gray-2: #D1D2D2;
$color-gray-3: #AEAFAF;
$color-gray-4: #737473;
$color-gray-5: #434343;

$colors: (
    "white": $color-white,
    "black": $color-black,
    "red": $color-red,
    "red-light": $color-red,
    "blue": $color-blue,
    "blue-2": $color-blue-2,
    "blue-3": $color-blue-3,
    "green": $color-green,
    "green-pale": $color-green,
    "green-light": $color-green,
    "green-dark": $color-green,
    "turquoise": $color-turquoise,
    "cardinal": $color-cardinal,
    "gray-1": $color-gray-1,
    "gray-2": $color-gray-2,
    "gray-3": $color-gray-3,
    "gray-4": $color-gray-4,
    "gray-5": $color-gray-5
);
  • URL: /components/raw/colors/colors.scss
  • Filesystem Path: src/colors/colors.scss
  • Size: 982 Bytes

Colors

Colors used in the project