City of Ghent Style Guide - Version 3.1.1

Colors

Colors

Primary and secondary colors

Colors are defined in the $colors SASS map inside the _colors.scss partial.

Tints of colors

We provide a number of tints you can apply to your components in the $tints SASS map.

Using a color in your SASS files

When implementing a color for a component always use the colors() function defined in the _colors.scss partial.

Examples

.my-selector {
  color: color('cyan', 1);
}

This example calculates the color for .my-selector based on the base color cyan and makes it 1 tint darker.

.my-selector {
  color: color('red', -31);
}

This example calculates the color for .my-selector based on the base color red and makes it 3 tints lighter.

Defining colors based on themes

We provide a themify system that allows you to “themify” your components. This means they will change colors based on predefined sub themes.

To make a property themable use the mixin theme() in your component.

The $themes map exists out of multiple keys that define the themes for the style guide. Based on these maps you have to require some basic colors such as color-primary and color-secondary. See the $themes map inside _colors.scss for more information. These form the basic of the theming system. Through a syntax convention you can theme the colors of your components:

  @include theme('background', 'color-primary--lighten-4', 'field-background');

gets transformed by the system to:

  background: #some-hex-value;

It does this by searching for the key color-primary in the $themes map. Everything just before the double dashes gets used as the key value.

It then checks the part after the double dashes -- and strips out lighten or darken (everything before the dash -). Based on that result it applies the color() mixin with the correct parameters.

<h3 id="styleguide-colors" class="styleguide-title">{{ 'Primary colors' }}</h3>
{% for text, color in primary %}
  <div class="color-wrapper {{ text == 'white' ? 'white' : '' }}">
    <div>
      <div class="color" style="background: {{ color|e }}"></div>
      <p><strong>{{ text|e }}</strong></p>
      <code>color('{{ text }}');</code>
      <code>{{ color|e }}</code>
    </div>
    <div class="color-variants">
      <div>
        {% for key, tint in tints %}
          {% if key > 0 %}
            <div class="color-box">
              <div class="color color-swatch-{{ text|e }}-{{ key }}"></div>
              <strong>{{ '+ ' ~ tint|e }}</strong>
              <code>color('{{ text }}', {{ key }});</code>
              <code>{{ 'rgb(' ~
                ((1 - tint|trim('%')/100) *
                ("0123456789abcdef"|split(color|slice(1,1))[0]|length * 16
                + "0123456789abcdef"|split(color|slice(2,1))[0]|length)
                + (tint|trim('%')/100) * 0)|round
                ~ ", " ~
                ((1 - tint|trim('%')/100) *
                ("0123456789abcdef"|split(color|slice(3,1))[0]|length * 16
                + "0123456789abcdef"|split(color|slice(4,1))[0]|length)
                + (tint|trim('%')/100) * 0)|round
                ~ ", " ~
                ((1 - tint|trim('%')/100) *
                ("0123456789abcdef"|split(color|slice(5,1))[0]|length * 16
                + "0123456789abcdef"|split(color|slice(6,1))[0]|length)
                + (tint|trim('%')/100) * 0)|round
                ~ ")" }}</code>
            </div>
          {% endif %}
        {% endfor %}
      </div>
      <div>
        {% for key, tint in tints %}
          {% if key < 0 %}
            <div class="color-box">
              <div class="color color-swatch-{{ text|e }}-{{ key }}"></div>
              <strong>{{ tint|e }}</strong>
              <code>color('{{ text }}', {{ key }});</code>
              <code>{{ 'rgba(' ~
                ("0123456789abcdef"|split(color|slice(1,1))[0]|length * 16
                + "0123456789abcdef"|split(color|slice(2,1))[0]|length)|round
                ~ ", " ~
                ("0123456789abcdef"|split(color|slice(3,1))[0]|length * 16
                + "0123456789abcdef"|split(color|slice(4,1))[0]|length)|round
                ~ ", " ~
                ("0123456789abcdef"|split(color|slice(5,1))[0]|length * 16
                + "0123456789abcdef"|split(color|slice(6,1))[0]|length)|round
                ~ ", "
                ~ tint|trim('%')/100 ~ ")" }}</code>
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
{% endfor %}

<h3 class="styleguide-title">{{ 'Secondary colors' }}</h3>
{% for text, color in secondary %}
  <div class="color-wrapper {{ text == 'white' ? 'white' : '' }}">
    <div>
      <div class="color" style="background: {{ color|e }}"></div>
      <p><strong>{{ text|e }}</strong></p>
      <code>color('{{ text }}');</code>
      <code>{{ color|e }}</code>
    </div>
    <div class="color-variants">
      <div>
        {% for key, tint in tints %}
          {% if key > 0 %}
            <div class="color-box">
              <div class="color color-swatch-{{ text|e }}-{{ key }}"></div>
              <strong>{{ '+ ' ~ tint|e }}</strong>
              <code>color('{{ text }}', {{ key }});</code>
              <code>{{ 'rgb(' ~
                ((1 - tint|trim('%')/100) *
                ("0123456789abcdef"|split(color|slice(1,1))[0]|length * 16
                + "0123456789abcdef"|split(color|slice(2,1))[0]|length)
                + (tint|trim('%')/100) * 0)|round
                ~ ", " ~
                ((1 - tint|trim('%')/100) *
                ("0123456789abcdef"|split(color|slice(3,1))[0]|length * 16
                + "0123456789abcdef"|split(color|slice(4,1))[0]|length)
                + (tint|trim('%')/100) * 0)|round
                ~ ", " ~
                ((1 - tint|trim('%')/100) *
                ("0123456789abcdef"|split(color|slice(5,1))[0]|length * 16
                + "0123456789abcdef"|split(color|slice(6,1))[0]|length)
                + (tint|trim('%')/100) * 0)|round
                ~ ")" }}</code>
            </div>
          {% endif %}
        {% endfor %}
      </div>
      <div>
        {% for key, tint in tints %}
          {% if key < 0 %}
            <div class="color-box">
              <div class="color color-swatch-{{ text|e }}-{{ key }}"></div>
              <strong>{{ tint|e }}</strong>
              <code>color('{{ text }}', {{ key }});</code>
              <code>{{ 'rgba(' ~
                ("0123456789abcdef"|split(color|slice(1,1))[0]|length * 16
                + "0123456789abcdef"|split(color|slice(2,1))[0]|length)|round
                ~ ", " ~
                ("0123456789abcdef"|split(color|slice(3,1))[0]|length * 16
                + "0123456789abcdef"|split(color|slice(4,1))[0]|length)|round
                ~ ", " ~
                ("0123456789abcdef"|split(color|slice(5,1))[0]|length * 16
                + "0123456789abcdef"|split(color|slice(6,1))[0]|length)|round
                ~ ", "
                ~ tint|trim('%')/100 ~ ")" }}</code>
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
{% endfor %}
 
<h3 id="styleguide-colors" class="styleguide-title">Primary colors</h3>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #009de0"></div>
        <p><strong>cyan</strong></p>
        <code>color('cyan');</code>
        <code>#009de0</code>
    </div>
    <div class="color-variants">
        <div>
            <div class="color-box">
                <div class="color color-swatch-cyan-1"></div>
                <strong>+ 10%</strong>
                <code>color('cyan', 1);</code>
                <code>rgb(0, 141, 202)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-cyan-2"></div>
                <strong>+ 25%</strong>
                <code>color('cyan', 2);</code>
                <code>rgb(0, 118, 168)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-cyan-3"></div>
                <strong>+ 50%</strong>
                <code>color('cyan', 3);</code>
                <code>rgb(0, 79, 112)</code>
            </div>
        </div>
        <div>
            <div class="color-box">
                <div class="color color-swatch-cyan--1"></div>
                <strong>75%</strong>
                <code>color('cyan', -1);</code>
                <code>rgba(0, 157, 224, 0.75)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-cyan--2"></div>
                <strong>50%</strong>
                <code>color('cyan', -2);</code>
                <code>rgba(0, 157, 224, 0.5)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-cyan--3"></div>
                <strong>25%</strong>
                <code>color('cyan', -3);</code>
                <code>rgba(0, 157, 224, 0.25)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-cyan--4"></div>
                <strong>10%</strong>
                <code>color('cyan', -4);</code>
                <code>rgba(0, 157, 224, 0.1)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-cyan--5"></div>
                <strong>6%</strong>
                <code>color('cyan', -5);</code>
                <code>rgba(0, 157, 224, 0.06)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-cyan--6"></div>
                <strong>2%</strong>
                <code>color('cyan', -6);</code>
                <code>rgba(0, 157, 224, 0.02)</code>
            </div>
        </div>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #007db3"></div>
        <p><strong>cyan-wcag</strong></p>
        <code>color('cyan-wcag');</code>
        <code>#007db3</code>
    </div>
    <div class="color-variants">
        <div>
            <div class="color-box">
                <div class="color color-swatch-cyan-wcag-1"></div>
                <strong>+ 10%</strong>
                <code>color('cyan-wcag', 1);</code>
                <code>rgb(0, 113, 161)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-cyan-wcag-2"></div>
                <strong>+ 25%</strong>
                <code>color('cyan-wcag', 2);</code>
                <code>rgb(0, 94, 134)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-cyan-wcag-3"></div>
                <strong>+ 50%</strong>
                <code>color('cyan-wcag', 3);</code>
                <code>rgb(0, 63, 90)</code>
            </div>
        </div>
        <div>
            <div class="color-box">
                <div class="color color-swatch-cyan-wcag--1"></div>
                <strong>75%</strong>
                <code>color('cyan-wcag', -1);</code>
                <code>rgba(0, 125, 179, 0.75)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-cyan-wcag--2"></div>
                <strong>50%</strong>
                <code>color('cyan-wcag', -2);</code>
                <code>rgba(0, 125, 179, 0.5)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-cyan-wcag--3"></div>
                <strong>25%</strong>
                <code>color('cyan-wcag', -3);</code>
                <code>rgba(0, 125, 179, 0.25)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-cyan-wcag--4"></div>
                <strong>10%</strong>
                <code>color('cyan-wcag', -4);</code>
                <code>rgba(0, 125, 179, 0.1)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-cyan-wcag--5"></div>
                <strong>6%</strong>
                <code>color('cyan-wcag', -5);</code>
                <code>rgba(0, 125, 179, 0.06)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-cyan-wcag--6"></div>
                <strong>2%</strong>
                <code>color('cyan-wcag', -6);</code>
                <code>rgba(0, 125, 179, 0.02)</code>
            </div>
        </div>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #23333a"></div>
        <p><strong>dark-gray</strong></p>
        <code>color('dark-gray');</code>
        <code>#23333a</code>
    </div>
    <div class="color-variants">
        <div>
            <div class="color-box">
                <div class="color color-swatch-dark-gray-1"></div>
                <strong>+ 10%</strong>
                <code>color('dark-gray', 1);</code>
                <code>rgb(32, 46, 52)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-dark-gray-2"></div>
                <strong>+ 25%</strong>
                <code>color('dark-gray', 2);</code>
                <code>rgb(26, 38, 44)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-dark-gray-3"></div>
                <strong>+ 50%</strong>
                <code>color('dark-gray', 3);</code>
                <code>rgb(18, 26, 29)</code>
            </div>
        </div>
        <div>
            <div class="color-box">
                <div class="color color-swatch-dark-gray--1"></div>
                <strong>75%</strong>
                <code>color('dark-gray', -1);</code>
                <code>rgba(35, 51, 58, 0.75)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-dark-gray--2"></div>
                <strong>50%</strong>
                <code>color('dark-gray', -2);</code>
                <code>rgba(35, 51, 58, 0.5)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-dark-gray--3"></div>
                <strong>25%</strong>
                <code>color('dark-gray', -3);</code>
                <code>rgba(35, 51, 58, 0.25)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-dark-gray--4"></div>
                <strong>10%</strong>
                <code>color('dark-gray', -4);</code>
                <code>rgba(35, 51, 58, 0.1)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-dark-gray--5"></div>
                <strong>6%</strong>
                <code>color('dark-gray', -5);</code>
                <code>rgba(35, 51, 58, 0.06)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-dark-gray--6"></div>
                <strong>2%</strong>
                <code>color('dark-gray', -6);</code>
                <code>rgba(35, 51, 58, 0.02)</code>
            </div>
        </div>
    </div>
</div>
<div class="color-wrapper white">
    <div>
        <div class="color" style="background: #ffffff"></div>
        <p><strong>white</strong></p>
        <code>color('white');</code>
        <code>#ffffff</code>
    </div>
    <div class="color-variants">
        <div>
            <div class="color-box">
                <div class="color color-swatch-white-1"></div>
                <strong>+ 10%</strong>
                <code>color('white', 1);</code>
                <code>rgb(230, 230, 230)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-white-2"></div>
                <strong>+ 25%</strong>
                <code>color('white', 2);</code>
                <code>rgb(191, 191, 191)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-white-3"></div>
                <strong>+ 50%</strong>
                <code>color('white', 3);</code>
                <code>rgb(128, 128, 128)</code>
            </div>
        </div>
        <div>
            <div class="color-box">
                <div class="color color-swatch-white--1"></div>
                <strong>75%</strong>
                <code>color('white', -1);</code>
                <code>rgba(255, 255, 255, 0.75)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-white--2"></div>
                <strong>50%</strong>
                <code>color('white', -2);</code>
                <code>rgba(255, 255, 255, 0.5)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-white--3"></div>
                <strong>25%</strong>
                <code>color('white', -3);</code>
                <code>rgba(255, 255, 255, 0.25)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-white--4"></div>
                <strong>10%</strong>
                <code>color('white', -4);</code>
                <code>rgba(255, 255, 255, 0.1)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-white--5"></div>
                <strong>6%</strong>
                <code>color('white', -5);</code>
                <code>rgba(255, 255, 255, 0.06)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-white--6"></div>
                <strong>2%</strong>
                <code>color('white', -6);</code>
                <code>rgba(255, 255, 255, 0.02)</code>
            </div>
        </div>
    </div>
</div>

<h3 class="styleguide-title">Secondary colors</h3>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #0340c7"></div>
        <p><strong>blue</strong></p>
        <code>color('blue');</code>
        <code>#0340c7</code>
    </div>
    <div class="color-variants">
        <div>
            <div class="color-box">
                <div class="color color-swatch-blue-1"></div>
                <strong>+ 10%</strong>
                <code>color('blue', 1);</code>
                <code>rgb(3, 58, 179)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-blue-2"></div>
                <strong>+ 25%</strong>
                <code>color('blue', 2);</code>
                <code>rgb(2, 48, 149)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-blue-3"></div>
                <strong>+ 50%</strong>
                <code>color('blue', 3);</code>
                <code>rgb(2, 32, 100)</code>
            </div>
        </div>
        <div>
            <div class="color-box">
                <div class="color color-swatch-blue--1"></div>
                <strong>75%</strong>
                <code>color('blue', -1);</code>
                <code>rgba(3, 64, 199, 0.75)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-blue--2"></div>
                <strong>50%</strong>
                <code>color('blue', -2);</code>
                <code>rgba(3, 64, 199, 0.5)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-blue--3"></div>
                <strong>25%</strong>
                <code>color('blue', -3);</code>
                <code>rgba(3, 64, 199, 0.25)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-blue--4"></div>
                <strong>10%</strong>
                <code>color('blue', -4);</code>
                <code>rgba(3, 64, 199, 0.1)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-blue--5"></div>
                <strong>6%</strong>
                <code>color('blue', -5);</code>
                <code>rgba(3, 64, 199, 0.06)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-blue--6"></div>
                <strong>2%</strong>
                <code>color('blue', -6);</code>
                <code>rgba(3, 64, 199, 0.02)</code>
            </div>
        </div>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #29cfc9"></div>
        <p><strong>teal</strong></p>
        <code>color('teal');</code>
        <code>#29cfc9</code>
    </div>
    <div class="color-variants">
        <div>
            <div class="color-box">
                <div class="color color-swatch-teal-1"></div>
                <strong>+ 10%</strong>
                <code>color('teal', 1);</code>
                <code>rgb(37, 186, 181)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-teal-2"></div>
                <strong>+ 25%</strong>
                <code>color('teal', 2);</code>
                <code>rgb(31, 155, 151)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-teal-3"></div>
                <strong>+ 50%</strong>
                <code>color('teal', 3);</code>
                <code>rgb(21, 104, 101)</code>
            </div>
        </div>
        <div>
            <div class="color-box">
                <div class="color color-swatch-teal--1"></div>
                <strong>75%</strong>
                <code>color('teal', -1);</code>
                <code>rgba(41, 207, 201, 0.75)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-teal--2"></div>
                <strong>50%</strong>
                <code>color('teal', -2);</code>
                <code>rgba(41, 207, 201, 0.5)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-teal--3"></div>
                <strong>25%</strong>
                <code>color('teal', -3);</code>
                <code>rgba(41, 207, 201, 0.25)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-teal--4"></div>
                <strong>10%</strong>
                <code>color('teal', -4);</code>
                <code>rgba(41, 207, 201, 0.1)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-teal--5"></div>
                <strong>6%</strong>
                <code>color('teal', -5);</code>
                <code>rgba(41, 207, 201, 0.06)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-teal--6"></div>
                <strong>2%</strong>
                <code>color('teal', -6);</code>
                <code>rgba(41, 207, 201, 0.02)</code>
            </div>
        </div>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #38ab30"></div>
        <p><strong>green</strong></p>
        <code>color('green');</code>
        <code>#38ab30</code>
    </div>
    <div class="color-variants">
        <div>
            <div class="color-box">
                <div class="color color-swatch-green-1"></div>
                <strong>+ 10%</strong>
                <code>color('green', 1);</code>
                <code>rgb(50, 154, 43)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-green-2"></div>
                <strong>+ 25%</strong>
                <code>color('green', 2);</code>
                <code>rgb(42, 128, 36)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-green-3"></div>
                <strong>+ 50%</strong>
                <code>color('green', 3);</code>
                <code>rgb(28, 86, 24)</code>
            </div>
        </div>
        <div>
            <div class="color-box">
                <div class="color color-swatch-green--1"></div>
                <strong>75%</strong>
                <code>color('green', -1);</code>
                <code>rgba(56, 171, 48, 0.75)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-green--2"></div>
                <strong>50%</strong>
                <code>color('green', -2);</code>
                <code>rgba(56, 171, 48, 0.5)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-green--3"></div>
                <strong>25%</strong>
                <code>color('green', -3);</code>
                <code>rgba(56, 171, 48, 0.25)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-green--4"></div>
                <strong>10%</strong>
                <code>color('green', -4);</code>
                <code>rgba(56, 171, 48, 0.1)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-green--5"></div>
                <strong>6%</strong>
                <code>color('green', -5);</code>
                <code>rgba(56, 171, 48, 0.06)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-green--6"></div>
                <strong>2%</strong>
                <code>color('green', -6);</code>
                <code>rgba(56, 171, 48, 0.02)</code>
            </div>
        </div>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #ffda00"></div>
        <p><strong>lemon</strong></p>
        <code>color('lemon');</code>
        <code>#ffda00</code>
    </div>
    <div class="color-variants">
        <div>
            <div class="color-box">
                <div class="color color-swatch-lemon-1"></div>
                <strong>+ 10%</strong>
                <code>color('lemon', 1);</code>
                <code>rgb(230, 196, 0)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-lemon-2"></div>
                <strong>+ 25%</strong>
                <code>color('lemon', 2);</code>
                <code>rgb(191, 164, 0)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-lemon-3"></div>
                <strong>+ 50%</strong>
                <code>color('lemon', 3);</code>
                <code>rgb(128, 109, 0)</code>
            </div>
        </div>
        <div>
            <div class="color-box">
                <div class="color color-swatch-lemon--1"></div>
                <strong>75%</strong>
                <code>color('lemon', -1);</code>
                <code>rgba(255, 218, 0, 0.75)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-lemon--2"></div>
                <strong>50%</strong>
                <code>color('lemon', -2);</code>
                <code>rgba(255, 218, 0, 0.5)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-lemon--3"></div>
                <strong>25%</strong>
                <code>color('lemon', -3);</code>
                <code>rgba(255, 218, 0, 0.25)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-lemon--4"></div>
                <strong>10%</strong>
                <code>color('lemon', -4);</code>
                <code>rgba(255, 218, 0, 0.1)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-lemon--5"></div>
                <strong>6%</strong>
                <code>color('lemon', -5);</code>
                <code>rgba(255, 218, 0, 0.06)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-lemon--6"></div>
                <strong>2%</strong>
                <code>color('lemon', -6);</code>
                <code>rgba(255, 218, 0, 0.02)</code>
            </div>
        </div>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #fab600"></div>
        <p><strong>yellow</strong></p>
        <code>color('yellow');</code>
        <code>#fab600</code>
    </div>
    <div class="color-variants">
        <div>
            <div class="color-box">
                <div class="color color-swatch-yellow-1"></div>
                <strong>+ 10%</strong>
                <code>color('yellow', 1);</code>
                <code>rgb(225, 164, 0)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-yellow-2"></div>
                <strong>+ 25%</strong>
                <code>color('yellow', 2);</code>
                <code>rgb(188, 137, 0)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-yellow-3"></div>
                <strong>+ 50%</strong>
                <code>color('yellow', 3);</code>
                <code>rgb(125, 91, 0)</code>
            </div>
        </div>
        <div>
            <div class="color-box">
                <div class="color color-swatch-yellow--1"></div>
                <strong>75%</strong>
                <code>color('yellow', -1);</code>
                <code>rgba(250, 182, 0, 0.75)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-yellow--2"></div>
                <strong>50%</strong>
                <code>color('yellow', -2);</code>
                <code>rgba(250, 182, 0, 0.5)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-yellow--3"></div>
                <strong>25%</strong>
                <code>color('yellow', -3);</code>
                <code>rgba(250, 182, 0, 0.25)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-yellow--4"></div>
                <strong>10%</strong>
                <code>color('yellow', -4);</code>
                <code>rgba(250, 182, 0, 0.1)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-yellow--5"></div>
                <strong>6%</strong>
                <code>color('yellow', -5);</code>
                <code>rgba(250, 182, 0, 0.06)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-yellow--6"></div>
                <strong>2%</strong>
                <code>color('yellow', -6);</code>
                <code>rgba(250, 182, 0, 0.02)</code>
            </div>
        </div>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #f95706"></div>
        <p><strong>orange</strong></p>
        <code>color('orange');</code>
        <code>#f95706</code>
    </div>
    <div class="color-variants">
        <div>
            <div class="color-box">
                <div class="color color-swatch-orange-1"></div>
                <strong>+ 10%</strong>
                <code>color('orange', 1);</code>
                <code>rgb(224, 78, 5)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-orange-2"></div>
                <strong>+ 25%</strong>
                <code>color('orange', 2);</code>
                <code>rgb(187, 65, 5)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-orange-3"></div>
                <strong>+ 50%</strong>
                <code>color('orange', 3);</code>
                <code>rgb(125, 44, 3)</code>
            </div>
        </div>
        <div>
            <div class="color-box">
                <div class="color color-swatch-orange--1"></div>
                <strong>75%</strong>
                <code>color('orange', -1);</code>
                <code>rgba(249, 87, 6, 0.75)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-orange--2"></div>
                <strong>50%</strong>
                <code>color('orange', -2);</code>
                <code>rgba(249, 87, 6, 0.5)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-orange--3"></div>
                <strong>25%</strong>
                <code>color('orange', -3);</code>
                <code>rgba(249, 87, 6, 0.25)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-orange--4"></div>
                <strong>10%</strong>
                <code>color('orange', -4);</code>
                <code>rgba(249, 87, 6, 0.1)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-orange--5"></div>
                <strong>6%</strong>
                <code>color('orange', -5);</code>
                <code>rgba(249, 87, 6, 0.06)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-orange--6"></div>
                <strong>2%</strong>
                <code>color('orange', -6);</code>
                <code>rgba(249, 87, 6, 0.02)</code>
            </div>
        </div>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #f20f36"></div>
        <p><strong>red</strong></p>
        <code>color('red');</code>
        <code>#f20f36</code>
    </div>
    <div class="color-variants">
        <div>
            <div class="color-box">
                <div class="color color-swatch-red-1"></div>
                <strong>+ 10%</strong>
                <code>color('red', 1);</code>
                <code>rgb(218, 14, 49)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-red-2"></div>
                <strong>+ 25%</strong>
                <code>color('red', 2);</code>
                <code>rgb(182, 11, 41)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-red-3"></div>
                <strong>+ 50%</strong>
                <code>color('red', 3);</code>
                <code>rgb(121, 8, 27)</code>
            </div>
        </div>
        <div>
            <div class="color-box">
                <div class="color color-swatch-red--1"></div>
                <strong>75%</strong>
                <code>color('red', -1);</code>
                <code>rgba(242, 15, 54, 0.75)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-red--2"></div>
                <strong>50%</strong>
                <code>color('red', -2);</code>
                <code>rgba(242, 15, 54, 0.5)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-red--3"></div>
                <strong>25%</strong>
                <code>color('red', -3);</code>
                <code>rgba(242, 15, 54, 0.25)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-red--4"></div>
                <strong>10%</strong>
                <code>color('red', -4);</code>
                <code>rgba(242, 15, 54, 0.1)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-red--5"></div>
                <strong>6%</strong>
                <code>color('red', -5);</code>
                <code>rgba(242, 15, 54, 0.06)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-red--6"></div>
                <strong>2%</strong>
                <code>color('red', -6);</code>
                <code>rgba(242, 15, 54, 0.02)</code>
            </div>
        </div>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #ff0099"></div>
        <p><strong>pink</strong></p>
        <code>color('pink');</code>
        <code>#ff0099</code>
    </div>
    <div class="color-variants">
        <div>
            <div class="color-box">
                <div class="color color-swatch-pink-1"></div>
                <strong>+ 10%</strong>
                <code>color('pink', 1);</code>
                <code>rgb(230, 0, 138)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-pink-2"></div>
                <strong>+ 25%</strong>
                <code>color('pink', 2);</code>
                <code>rgb(191, 0, 115)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-pink-3"></div>
                <strong>+ 50%</strong>
                <code>color('pink', 3);</code>
                <code>rgb(128, 0, 77)</code>
            </div>
        </div>
        <div>
            <div class="color-box">
                <div class="color color-swatch-pink--1"></div>
                <strong>75%</strong>
                <code>color('pink', -1);</code>
                <code>rgba(255, 0, 153, 0.75)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-pink--2"></div>
                <strong>50%</strong>
                <code>color('pink', -2);</code>
                <code>rgba(255, 0, 153, 0.5)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-pink--3"></div>
                <strong>25%</strong>
                <code>color('pink', -3);</code>
                <code>rgba(255, 0, 153, 0.25)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-pink--4"></div>
                <strong>10%</strong>
                <code>color('pink', -4);</code>
                <code>rgba(255, 0, 153, 0.1)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-pink--5"></div>
                <strong>6%</strong>
                <code>color('pink', -5);</code>
                <code>rgba(255, 0, 153, 0.06)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-pink--6"></div>
                <strong>2%</strong>
                <code>color('pink', -6);</code>
                <code>rgba(255, 0, 153, 0.02)</code>
            </div>
        </div>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #5a0ec4"></div>
        <p><strong>purple</strong></p>
        <code>color('purple');</code>
        <code>#5a0ec4</code>
    </div>
    <div class="color-variants">
        <div>
            <div class="color-box">
                <div class="color color-swatch-purple-1"></div>
                <strong>+ 10%</strong>
                <code>color('purple', 1);</code>
                <code>rgb(81, 13, 176)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-purple-2"></div>
                <strong>+ 25%</strong>
                <code>color('purple', 2);</code>
                <code>rgb(68, 11, 147)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-purple-3"></div>
                <strong>+ 50%</strong>
                <code>color('purple', 3);</code>
                <code>rgb(45, 7, 98)</code>
            </div>
        </div>
        <div>
            <div class="color-box">
                <div class="color color-swatch-purple--1"></div>
                <strong>75%</strong>
                <code>color('purple', -1);</code>
                <code>rgba(90, 14, 196, 0.75)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-purple--2"></div>
                <strong>50%</strong>
                <code>color('purple', -2);</code>
                <code>rgba(90, 14, 196, 0.5)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-purple--3"></div>
                <strong>25%</strong>
                <code>color('purple', -3);</code>
                <code>rgba(90, 14, 196, 0.25)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-purple--4"></div>
                <strong>10%</strong>
                <code>color('purple', -4);</code>
                <code>rgba(90, 14, 196, 0.1)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-purple--5"></div>
                <strong>6%</strong>
                <code>color('purple', -5);</code>
                <code>rgba(90, 14, 196, 0.06)</code>
            </div>
            <div class="color-box">
                <div class="color color-swatch-purple--6"></div>
                <strong>2%</strong>
                <code>color('purple', -6);</code>
                <code>rgba(90, 14, 196, 0.02)</code>
            </div>
        </div>
    </div>
</div>
 
{
  "primary": {
    "cyan": "#009de0",
    "cyan-wcag": "#007db3",
    "dark-gray": "#23333a",
    "white": "#ffffff"
  },
  "secondary": {
    "blue": "#0340c7",
    "teal": "#29cfc9",
    "green": "#38ab30",
    "lemon": "#ffda00",
    "yellow": "#fab600",
    "orange": "#f95706",
    "red": "#f20f36",
    "pink": "#ff0099",
    "purple": "#5a0ec4"
  },
  "tints": {
    "1": "10%",
    "2": "25%",
    "3": "50%",
    "-1": "75%",
    "-2": "50%",
    "-3": "25%",
    "-4": "10%",
    "-5": "6%",
    "-6": "2%"
  }
}