Want to try fastn for your company's website?

Explore

Get Started

Docs

Community

Blog

undefined

Blog

Color Scheme

Search Feature in fastn.com

Quote contest

A Content Writer’s Journey with fastn

fastn might prove you wrong

The Intimidation of Programming

Optimize your website

trizwitlabs web event

fastn goes to Philippines

Witty Hacks!

Ahoy, Web Components!

Color Scheme

Showcase Color Scheme

Arpita Jaiswal

posted on:

February 20, 2023

Color is an integral part of web design, and choosing the right color scheme can greatly impact the look and feel of a website. It is a powerful tool in web design, and it can greatly influence the way users perceive and interact with a website.

The fastn color-scheme framework provides a simple and powerful way to define color schemes and apply them to a website. In this showcase, we will present different sections using different color schemes to highlight how minimal changes are required to switch from one color scheme to another. Hence achieve the impact the colors have on the website's design and the emotion they evoke.

Take a look at the following color scheme cards:

Dark Mode

Light Mode

System Mode

Winter

Color scheme

I love colors!

Color can have a significant impact on the human brain and can evoke various emotions and responses.

Dark flame

Color scheme

I love colors!

Color can have a significant impact on the human brain and can evoke various emotions and responses.

Forest

Color scheme

I love colors!

Color can have a significant impact on the human brain and can evoke various emotions and responses.

Sunset

Color scheme

I love colors!

Color can have a significant impact on the human brain and can evoke various emotions and responses.

There are following notable things:

All of the scheme cards look identical except for the color. This demonstrates the effect that color has on the look and feel of a website.
Both dark mode and light mode are supported.

Code changes required

How many lines of code change were required to make this possible?

The answer is only one.

To understand this, let's examine the code of interest for the above cards. To initialize the card, all we need to do is invoke the color-display component:

Invoking color-display component

-- color-display:

Lang:

ftd

Then how can we achieve different color scheme?

To achieve different color schemes, First, we import the corresponding color scheme package. Then we wrap the call to the color-display component in another container that contains the colors from the imported color scheme package. This color, then, is inherited by color-display.

Using forest cs

-- import: fastn-community.github.io/forest-cs

-- ftd.column:
colors: $forest-cs.main

-- color-display:

-- end: ftd.column

Lang:

ftd

Similarly, the rest of the color scheme packages are imported and referred by their respective containers that contain the color-display component.

Color Variable

As shown in the code snippet above, we are passing a reference of the forest-cs .main variable from the forest-cs module to the colors property of ftd .column.

The type of forest-cs.main variable is ftd.color-scheme.

Let's take a closer look at the structure of ftd.color-scheme.

ftd module

-- record color-scheme:
ftd.background-colors background:
ftd.color border:
ftd.color border-strong:
ftd.color text:
ftd.color text-strong:
ftd.color shadow:
ftd.color scrim:
ftd.cta-colors cta-primary:
ftd.cta-colors cta-secondary:
ftd.cta-colors cta-tertiary:
ftd.cta-colors cta-danger:
ftd.pst accent:
ftd.btb error:
ftd.btb success:
ftd.btb info:
ftd.btb warning:
ftd.custom-colors custom:

-- record background-colors:
ftd.color base:
ftd.color step-1:
ftd.color step-2:
ftd.color overlay:
ftd.color code:

-- record cta-colors:
ftd.color base:
ftd.color hover:
ftd.color pressed:
ftd.color disabled:
ftd.color focused:
ftd.color border:
ftd.color text:

-- record pst:
ftd.color primary:
ftd.color secondary:
ftd.color tertiary:

-- record btb:
ftd.color base:
ftd.color text:
ftd.color border:

-- record custom-colors:
ftd.color one:
ftd.color two:
ftd.color three:
ftd.color four:
ftd.color five:
ftd.color six:
ftd.color seven:
ftd.color eight:
ftd.color nine:
ftd.color ten:

Lang:

ftd

As seen above, ftd.color-scheme is a record of various color fields that are used to specify the colors to be applied to various elements on the web page.

It is recommended in fastn to utilize this color record and establish the color scheme of your website.

Understanding inheritance

How does the color-display component inherits the colors from it's parent?

This is achieved through the use of the special keyword inherited. The inherited keyword gives access to the variables of its ancestors, allowing the component to search for the referred variable starting from its immediate parent, and then moving up to its grandparent and so on.

As depicted in the code above, the container ftd.column contains a property named color where we have passed the reference to ftd.color-scheme type variable. It is then inherited by color-display component.

To illustrate the use of inherited references, let us construct a basic component "my-color":

my-color component

-- component my-color:

-- ftd.text: Text
padding.px: 20
border-width.px: 10
color: $inherited.colors.text-strong
background.solid: $inherited.colors.background.step-2
border-color: $inherited.colors.border-strong

-- end: my-color

Lang:

ftd

We will then incorporate this component within a container and provide the sunset-cs color scheme to it:

Using my-color component

-- import: fastn-community.github.io/saturated-sunset-cs as sunset-cs

-- ftd.column:
colors: $sunset-cs.main

-- my-color:

-- end: ftd.column

Lang:

ftd

The output appears as follows:

Output

Text

We can also apply another color scheme, such as forest-cs:

Using my-color component

-- import: fastn-community.github.io/forest-cs

-- ftd.column:
colors: $forest-cs.main

-- my-color:

-- end: ftd.column

Lang:

ftd

Output

Text

As we can observe, inheritance plays a critical role in giving a unique look and feel to elements. A minor adjustment in the code can lead to a completely altered aspect for the element.

Benefits of using `fastn` Color Scheme:

Easy to use: The fastn color scheme framework is designed to be simple and straightforward, making it easy for designers to define and apply color schemes to a website.
Dynamic and flexible: With the ability to easily change colors and the use of inheritance, the ftd color scheme framework allows designers to create dynamic and flexible color schemes that can be easily modified as needed.
Consistent appearance: By using the fastn color scheme framework, designers can ensure a consistent appearance throughout their website, making it easier for users to navigate and interact with the site.
Centralized Management: By centralizing the definition of color schemes, this makes it easy for designers to modify and update the color palette in a single location. This helps save time and reduces the risk of inconsistent color usage throughout the application.
Improved accessibility: With the ability to create color palettes that meet accessibility standards, the fastn color scheme framework helps designers create websites that are accessible to all users.
Increased brand recognition: By using a consistent color scheme throughout the website, the fastn framework can help to reinforce a company's brand and increase brand recognition. The use of specific colors can also evoke emotions and feelings associated with the brand, helping to create a stronger connection with users.
Faster development: The fastn color scheme framework allows designers to quickly create color schemes and apply them to a website, reducing the time and effort required to create a professional-looking design. This can also lead to faster development times, helping to get the website up and running more quickly.

Final Thoughts

To wrap up, the impact of color on the visual appeal of a website cannot be overstated. Knowledge of the emotional connotations associated with different color schemes is imperative for designers to make informed decisions when selecting a color palette for their projects. The fastn color scheme framework provides a simple and effective approach for defining and implementing color schemes, making it a valuable tool for designers to have in their arsenal.