1.1 Colors View in a new window

Use the color() function to add colors to CSS properties. Documentation is available in John Albins Github site.

Twig: chroma-kss-markup.twig

Example

default

Descriptive color names for use in "functional" color names below.

color(white) uses the color: #fff
color(rich black) uses the color: #000
color(black) uses the color: #323232
color(blue) uses the color: #0f4beb
color(rich blue) uses the color: #0d41d1
color(red) uses the color: #ff2305
color(dark grey) uses the color: #767676
color(gun metal grey) uses the color: #707070
color(darker grey) uses the color: #595959
color(grey) uses the color: #b2b2b2
color(light grey) uses the color: #ebebeb
color(medium grey) uses the color: #7a7a7a
color(mid-light grey) uses the color: #ccc
color(extra-light grey) uses the color: #ddd
color(super-light grey) uses the color: #f5f4f5
color(ultra-light grey) uses the color: #f1f1f1
color(green) uses the color: #32cd32
color(orange) uses the color: #f09d38
color(off white) uses the color: #fcfcfb
color(maroon oak) uses the color: #5d0b0b
color(dark blue) uses the color: #123286

primary

Colors used by design components.

Markup 
<!-- This markup is auto-generated from Sass with chroma-kss-markup(). Do not modify. --><div class="kss-style"><h3 class="chroma-kss__title">default</h3><p class="chroma-kss__description">Descriptive color names for use in "functional" color names below.</p><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(white)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(rich black)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #323232"></span><code class="chroma-kss__variable">color(black)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#323232</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0f4beb"></span><code class="chroma-kss__variable">color(blue)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0f4beb</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0d41d1"></span><code class="chroma-kss__variable">color(rich blue)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0d41d1</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ff2305"></span><code class="chroma-kss__variable">color(red)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ff2305</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #767676"></span><code class="chroma-kss__variable">color(dark grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#767676</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #707070"></span><code class="chroma-kss__variable">color(gun metal grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#707070</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #595959"></span><code class="chroma-kss__variable">color(darker grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#595959</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #b2b2b2"></span><code class="chroma-kss__variable">color(grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#b2b2b2</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ebebeb"></span><code class="chroma-kss__variable">color(light grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ebebeb</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #7a7a7a"></span><code class="chroma-kss__variable">color(medium grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#7a7a7a</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ccc"></span><code class="chroma-kss__variable">color(mid-light grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ccc</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ddd"></span><code class="chroma-kss__variable">color(extra-light grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ddd</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f5f4f5"></span><code class="chroma-kss__variable">color(super-light grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f5f4f5</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f1f1f1"></span><code class="chroma-kss__variable">color(ultra-light grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f1f1f1</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #32cd32"></span><code class="chroma-kss__variable">color(green)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#32cd32</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f09d38"></span><code class="chroma-kss__variable">color(orange)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f09d38</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fcfcfb"></span><code class="chroma-kss__variable">color(off white)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fcfcfb</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #5d0b0b"></span><code class="chroma-kss__variable">color(maroon oak)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#5d0b0b</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #123286"></span><code class="chroma-kss__variable">color(dark blue)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#123286</code></span></div><h3 class="chroma-kss__title">primary</h3><p class="chroma-kss__description">Colors used by design components.</p></div>