# 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);
}

# White

Select a component variation
Brainium trim tab friendraising
Code

# Grays

Select a component variation
Brainium trim tab friendraising
Code

# Hues

Select a component variation
Brainium trim tab friendraising
Code