Table of contents

Color

SFUMATO uses sets of 4 colors, called color quads, which allow you to easily set up and control the color theme for an entire website or parts of one. The color quads define colors for text, hyperlinks, headlines, and backgrounds. They can also be used as a source for a single color for other purposes.

Color quads

In the _config-colors.scss file, SFUMATO includes a set of base and theme color quads. The base colors collection includes shades of gray, base colors, and more. The theme colors collection includes a set of colors unique to your project.

                                        
                                            // (background, foreground, anchors, headlines)
                                            $base-colors: (
                                                black:     (#000000, #ffffff, #ffffff, #ffffff),
                                                white:     (#ffffff, #2b303a, #1f8dd6, #2b303a),
                                                ...
                                            }
                                                
                                            // (background, foreground, anchors, headlines)
                                            $theme-colors: (
                                                default:   (#ffffff, #2b303a, #1187ff, #2b303a),
                                                primary:   (#1187ff, #ffffff, #a9e2ff, #a9e2ff),
                                                ...
                                            }
                                        
                                    

Base color quads

Background, foreground, anchor, and headline color quad maps are used to generate the swatches below, including the hex codes. You can completely control the site color scheme from the _config-colors.scss file.

Theme color quads

Background, foreground, anchor, and headline color quad maps are used to generate the swatches below, including the hex codes. You can completely control the site color scheme from the _config-colors.scss file.

Helpers

There are several color helper functions you can use to access colors in the quads.

sf-set-color-scheme()

In a single line of SCSS code you can set the color scheme for an object or the web app as a whole, using the sf-set-color-scheme() mixin.

  • $color
    The name of the color quad.
  • $darken-bg-percentage
    Darken the background color by this percentage.
  • $lighten-bg-percentage
    Lighten the background color by this percentage.
                                    
                                        html {

                                            @include sf-set-color-scheme (primary, $darken-bg-percentage: 10%);

                                            article {

                                                @include sf-set-color-scheme (secondary);
                                            }
                                        }
                                    
                                

sf-get-background-color()
or sf-get-color()

Get the background color from a color quad.

  • $color
    The name of the color quad.
                                
                                    html {

                                        background-color: sf-get-background-color(primary);
                                    }
                                
                            

sf-get-foreground-color()

Get the foreground color from a color quad.

  • $color
    The name of the color quad.
                                
                                    p {
                                    
                                        color: sf-get-foreground-color(primary);
                                    }
                                
                            

sf-get-anchor-color()

Get the anchor color from a color quad.

  • $color
    The name of the color quad.
                                
                                    a {
                                    
                                        color: sf-get-anchor-color(primary);
                                    }
                                
                            

sf-get-headline-color()

Get the headline color from a color quad.

  • $color
    The name of the color quad.
                                
                                    h1 {
                                    
                                        color: sf-get-headline-color(primary);
                                    }