Colors are defined in the $colors SASS map inside the _colors.scss partial.
We provide a number of tints you can apply to your components in the $tints
SASS map.
When implementing a color for a component always use the colors() function
defined in the _colors.scss partial.
.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.
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: #f5d605"></div>
<p><strong>lemon</strong></p>
<code>color('lemon');</code>
<code>#f5d605</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(221, 193, 5)</code>
</div>
<div class="color-box">
<div class="color color-swatch-lemon-2"></div>
<strong>+ 25%</strong>
<code>color('lemon', 2);</code>
<code>rgb(184, 161, 4)</code>
</div>
<div class="color-box">
<div class="color color-swatch-lemon-3"></div>
<strong>+ 50%</strong>
<code>color('lemon', 3);</code>
<code>rgb(123, 107, 3)</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(245, 214, 5, 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(245, 214, 5, 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(245, 214, 5, 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(245, 214, 5, 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(245, 214, 5, 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(245, 214, 5, 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": "#f5d605",
"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%"
}
}