# Color
Apply colors to elements with HTML and SCSS
# How to
This utility class can be applied to any element with text in it to override the font color.
# HTML Example:
Import:
// Import is needed to make utility classes available.
@import '~@skyline/scss/src/core/UI.required';
@import '~@skyline/scss/src/utilities/utilities.colours';
Text:
<span class="u-color--green">Brainium trim tab friendraising</span>
Icon:
<svg
role="presentation"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="u-color--green"
fill="currentColor"
>
<path
d="M631.98 32H531.73c5.93-6.14 10.4-13.63 12.18-22.36 1.01-4.96-2.88-9.64-7.94-9.64H416c-70.69 0-128 57.31-128 128H160c-28.84 0-54.4 12.98-72 33.11V160c-48.53 0-88 39.47-88 88v56c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16v-56c0-13.22 6.87-24.39 16.78-31.68-.21 2.58-.78 5.05-.78 7.68 0 27.64 11.84 52.36 30.54 69.88l-25.72 68.6a63.945 63.945 0 00-2.16 37.99l24.85 99.41A15.982 15.982 0 00107.02 512h65.96c10.41 0 18.05-9.78 15.52-19.88l-26.31-105.26 23.84-63.59 102.04 22.33V496c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V318.22c19.74-20.19 32-47.75 32-78.22 0-.22-.07-.42-.08-.64V136.89l16 7.11 18.9 37.7c7.45 14.87 25.05 21.55 40.49 15.37l32.55-13.02a31.997 31.997 0 0020.12-29.74L544 83.3l92.42-36.65c6.59-4.38 3.48-14.65-4.44-14.65zM480 96c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16z"
></path>
</svg>
# SCSS Example:
// Import is needed to access all the functions.
@import '~@skyline/scss/src/core/UI.required';
.class-name {
color: get-hue(green, light);
}