<div class="color">
    <div style="background-color: #F5F5F5"></div>
    <p>$color-gray-1</p>
    <p>#F5F5F5</p>
</div>
<div class="color">
    <div style="background-color: {{hex}}"></div>
    <p>{{title}}</p>
    <p>{{hex}}</p>
</div>
{
  "title": "$color-gray-1",
  "hex": "#F5F5F5"
}
  • 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