{{ snippet.infolabel('Primary Mixin') }}
{{ snippet.mixin('colors-palette') }}

{{ snippet.infolabel('Related Mixin') }}
{{ snippet.mixin('manage-palette') }}

{{ snippet.infolabel('Variabiles') }}
{{ snippet.sassvar('palette-color') }}

{{ snippet.infolabel('Template classes')}}
{{ snippet.templateclass('palette-color-$key-palette-color') }}
{{ snippet.templateclass('background-color-$key-palette-color') }}

{{ snippet.infolabel('Info') }}
{% call snippet.infocontent() %}
    Click or tap on the "palette dots" for copy the <strong>HEX</strong>. <br />
    In the key values ​​in {{ snippet.sassvar('palette-color') }} all HTML colors name are also accepted.
    You can find all HTML colors name in <a href="https://www.w3schools.com/colors/colors_names.asp" target="_blank">this page</a>. <br />
    To help the <strong>keys</strong> nomenclature of the map, you can use <a href="http://www.color-blindness.com/color-name-hue/" target="_blank">this online tool</a> to find the most suitable name for the hexadecimal.
{% endcall %}

{{ snippet.infolabel('Function for catch HEX')}}
{{ snippet.code('scss','.selector {
    color: palette($key-palette-color);
}')}}