Color • Natura11y
Jump to main contentJump to website footer
Yellow, blue, red, and green bird in close-up photograph

Photo by David Clode

Color

Introduction

Natura11y's dynamic color system makes it easy to maintain consistent colors across your design. You can easily create and apply color themes for entire pages, such as dark mode. Themes can also be applied to specific sections or individual components like cards or buttons.

Theme Colors: Your Principal Palette

Your principal theme colors include Primary, Secondary, Dark, Light, and Canvas.

Primary

Secondary

Dark

Light

Canvas (default)

These five colors produce utility classes for theme colors, background colors, text colors, and border colors.

Natura11y treats canvas (white) as a color, which serves as the default theme. Natura11y's CSS file applies the canvas theme (and its correlated colors) to the <body> selector.

Correlated Colors

Every theme color has five correlated colors. These are used for text, borders, links, and instances of confirm and warn. Correlated colors work in isolation within their corresponding theme color utility class.

Figure 1 (below) depicts the CSS variable declared for the primary theme on line 3. Lines 7-11 provide CSS variables for primary's correlated colors.


        // Primary Theme Color
        
        --primary: #440381;
        
        // Primary Correlated Colors
        
        --primary-text: var(--dark);
        --primary-border: hsla(0, 0%, 0%, 0.25);
        --primary-link: currentColor;
        --primary-confirm: #16db93;
        --primary-warn: #ff73aa;
Figure 1

For a descriptive list of all colors available, jump over to the css variable reference guide.

Theme Color Utilities

Natura11y's theme color utility classes are one of its most useful features. Each theme color utility provides predefined colors for background, text, borders, and links (within paragraphs). Theme color utilities also provide colors for instances of confirm and warn.

Figure 2 (below) provides the five theme color utilities:


        <div class="theme-primary">...</div>
        <div class="theme-secondary">...</div>
        <div class="theme-dark">...</div>
        <div class="theme-light">...</div>
        <div class="theme-canvas">...</div>
Figure 2

You may apply theme colors to any containing block-level element within the DOM. Consider the following five cards, each colored with a different theme color utility.

Primary

Rainbow lorikeet

The rainbow lorikeet is a species of parrot found in Australia. It is common along the eastern seaboard, from northern Queensland to South Australia. Its habitat is rainforest, coastal bush and woodland areas.

Secondary

Rainbow lorikeet

The rainbow lorikeet is a species of parrot found in Australia. It is common along the eastern seaboard, from northern Queensland to South Australia. Its habitat is rainforest, coastal bush and woodland areas.

Dark

Rainbow lorikeet

The rainbow lorikeet is a species of parrot found in Australia. It is common along the eastern seaboard, from northern Queensland to South Australia. Its habitat is rainforest, coastal bush and woodland areas.

Light

Rainbow lorikeet

The rainbow lorikeet is a species of parrot found in Australia. It is common along the eastern seaboard, from northern Queensland to South Australia. Its habitat is rainforest, coastal bush and woodland areas.

Canvas

Rainbow lorikeet

The rainbow lorikeet is a species of parrot found in Australia. It is common along the eastern seaboard, from northern Queensland to South Australia. Its habitat is rainforest, coastal bush and woodland areas.

In Figure 3 (below), on line 1, notice the .theme-primary utility present. No other element within the card needs color specified. Each theme color utility applies its correlated colors to all descendants.


        <div class="card 👉 theme-primary border-radius-2">
        
            <div class="card__head border-bottom">
                <p>
                    <strong>Theme: Primary</strong>
                </p>
            </div>
            
            <div class="card__body">
                <h2 class="h4">
                    Rainbow lorikeet
                </h2>
                <p>
                    The rainbow lorikeet is a species of parrot found in Australia. It is common along the eastern seaboard, from northern <a href="#">Queensland</a> to <a href="#1">South Australia</a>. Its habitat is rainforest, coastal bush and woodland areas.
                </p>
            </div>
            
            <div class="card__foot border-top">
                <ul class="nav nav--horizontal justify-content-between">
                    <li>
                        <a href="#1">Search Images</a>
                    </li>
                    <li>
                        <a class="button button--outline rounded-pill" href="#1">
                            Visit Wikipedia
                        </a>
                    </li>
                </ul>
            </div>
            
        </div>
Figure 3

Links

Refer to Figure 1 (above), on line 9. The correlated link color (e.g. --primary-link) value sets the color of generic links (<a> tags) within paragraphs (<p> tags). This is not only convenient, it keeps paragraph links visible and accessible.

Primary

It is common along the eastern seaboard, from northern Queensland to South Australia.

Secondary

It is common along the eastern seaboard, from northern Queensland to South Australia.

Dark

It is common along the eastern seaboard, from northern Queensland to South Australia.

Light

It is common along the eastern seaboard, from northern Queensland to South Australia.

Canvas

It is common along the eastern seaboard, from northern Queensland to South Australia.

Beyond generic links, a text color utility named .text-color-link is available. With the following example, .text-color-link (Figure 4, Line 5) colors the buttons within the same selector blue.

Sign In

        <div class="display-flex gap-2 justify-content-center 👉 text-color-link">
        
            <a class="button button--outline" href="#1">
                Sign In
            </a>

            <a class="button button--icon-only" href="#1" aria-label="Language">
                <span class="icon icon-language" aria-hidden="true"></span>
            </a>
            
            <a class="button button--icon-only" href="#1" aria-label="Search">
                <span class="icon icon-search" aria-hidden="true"></span>
            </a>
            
        </div>
Figure 4

Confirm and Warn

In Figure 1 (above), on lines 10 and 11, you will find declarations for confirm and warn color values. Natura11y allows you to specify confirm and warn values for each theme color!

Primary

Alert Confirm
Alert Warn

Secondary

Alert Confirm
Alert Warn

Dark

Alert Confirm
Alert Warn

Light

Alert Confirm
Alert Warn

Canvas

Alert Confirm
Alert Warn

Instances of confirm and warn appear in alert and form elements.

Infinitely Nestable

You can nest theme color utilities throughout the DOM.

Primary

Secondary

Dark

Light

Canvas

Breakpoint Specific

Apply a theme color at a specific breakpoint. Chain a breakpoint modifier (e.g. --lg for a large breakpoint) to a the color utility. In the following example, .theme-primary--lg is present on the parent selector of our nav (Figure 5, line 1).


        <div class="theme-primary--lg"> 
        
            <ul class="nav nav--divider nav--horizontal border border-radius-2">
                <li>
                    <a href="#1">Link</a>
                </li>
                <li>
                    <a href="#1">Link</a>
                </li>
                <li>
                    <a href="#1">Link</a>
                </li>
            </ul>
            
        </div>
Figure 5

On smaller viewports The above example uses the default canvas theme. It instead used the primary theme when the viewport reaches the large breakpoint. Scale your browser horizontally to see this change occur.

Prefers Color Scheme

Natura11y's .theme-canvas utility offers a special --prefers modifier class. With .theme-canvas--prefers present on the <body> tag for example, a light or dark color theme is used depending on the operating system's settings.

Prefers

Rainbow lorikeet

The rainbow lorikeet is a species of parrot found in Australia. It is common along the eastern seaboard, from northern Queensland to South Australia. Its habitat is rainforest, coastal bush and woodland areas.

Subtle Fill

The .subtle-fill-1 and .subtle-fill-2 classes add light background tints to any element, using a percentage of the element's text color (currentColor).

  • .subtle-fill-1 applies a background color that is 5% of the current text color.
  • .subtle-fill-2 applies a background color that is 10% of the current text color.

In the card examples below, we apply a subtle fill to the action buttons within the .card__footer class using these new variations.

Rainbow

A rainbow is a meteorological phenomenon that appears as a multicolored arc that forms with the sunlight reflecting off water.


        <div class="card theme-dark">
        
            <div class="card__body">
                <!-- ... -->
            </div>
            
            <div class="card__foot 👉 subtle-fill-1">
                <!-- ... -->
            </div>
            
        </div>
Figure 3

Notice how the subtle fills appear differently depending on the theme: darker in the white theme and lighter in the dark theme cards.

Background Color Utilities

Need to apply only a background color? Our background color utilities (shown in Figure 6) apply a background color to its selector.

Primary

Secondary

Dark

Light

White


        <div class="background-color-primary">...</div>
        <div class="background-color-secondary">...</div>
        <div class="background-color-dark">...</div>
        <div class="background-color-light">...</div>
        <div class="background-color-white">...</div>
Figure 6

Text Color Utilities

Natura11y's text color utilities are useful for applying text color specificly to certain selectors.

Consider the following example in Figure 7. With our primary theme applied to the containing element (line 1), .text-color-secondary is present on the third button selector.


        <div class="theme-light">
        
            <ul class="nav nav--horizontal justify-content-center">
                <li>
                    <a class="button" href="#1">
                        Button
                    </a>
                </li>
                <li>
                    <a class="button" href="#1">
                        Button
                    </a>
                </li>
                <li>
                    <a class="button text-color-secondary" href="#1">
                        Button
                    </a>
                </li>
            </ul>
            
        </div>
Figure 7

Keep in mind that text color utilities take priority over color applied with theme color utilies. This, of course allows for even more variations within your themes.

Available text color utilities shown in figure 8:


        <div class="text-color-primary">...</div>
        <div class="text-color-secondary">...</div>
        <div class="text-color-dark">...</div>
        <div class="text-color-light">...</div>
        <div class="text-color-white">...</div>
        <div class="text-color-link">...</div>
Figure 8