Explore

Color palette

This blog was also posted on a social media platform : Medium (

Link⁠

)

A design system consists of standards and components that ensure scalability, reusability, and consistency, while eliminating redundancy in design.

This section outlines the process we followed to establish a structured, scalable, and accessible color system for STEM.

How we established our color system?

Creating a structured and scalable color system requires a systematic approach to ensure consistency, accessibility, and usability across the design system. Our process followed these key steps:

Identifying necessary colors

Determined all essential colors required for the design system based on brand identity, UI components, and functional needs.

Organizing colors into logical groups

Categorized colors into primary, secondary, and semantic palettes, ensuring a clear distinction between branding and functional use cases.

Assigning names for clarity

Implemented a structured naming convention, using either descriptive names (e.g., “Primary Blue”) or tokenized formats (e.g., primary-100, primary-200).

Ensured clear communication between designers and developers.

Validating for product & accessibility standards

Conducted WCAG contrast tests to ensure compliance with accessibility guidelines.

Verified that colors met product usability and aesthetic requirements.

Defining usage guidelines

Established clear rules for applying colors, such as reserving semantic colors for specific states (e.g., red for error messages, green for success states).

Testing & iteration

Applied the color system across various UI components and tested for inconsistencies, readability, and adaptability.

Iterated on feedback to refine the palette where necessary.

Creating & distributing the final palette

Documented the finalized color system in the design system, ensuring accessibility for both designers and developers.

Integrated the color tokens into Figma and code libraries for seamless adoption.

By following this structured process, we created a color system that is scalable, accessible, and adaptable, ensuring consistency across all products and platforms.

Organising colors

To ensure clarity, consistency, and scalability, we structured our color system into three main categories:

Primary colors

These core brand colors define the overall look and feel of the product.

Used extensively across the UI to establish brand identity and recognition.

Secondary colors

These complement the primary colors, helping to highlight key UI elements.

Typically, 7–8 secondary colors are used to accentuate the primary palette while maintaining balance.

Neutrals

Muted or desaturated shades that provide cohesion and contrast when paired with other colors.

Primarily used for text, icons, and background elements to ensure readability and visual hierarchy.

This structured approach allowed us to build a flexible and scalable color system, ensuring harmonious UI aesthetics while maintaining functional clarity across different design elements.

Methods to create a palette

There are several approaches to creating a color palette, but two widely used and straightforward methods are:

Online color palette generators

A quick and easy method for generating color schemes.

Tools like Coolors, Adobe Color, and Material Palette provide pre-generated color schemes.

These tools allow you to input a hex code, which then produces a cohesive palette based on the selected color.

These tools help in quickly generating harmonious color combinations based on color theory principles.

HSL (Hue, Saturation, Lightness) manipulation

A more structured and scalable approach to creating a color system.

This method allows for precise control over colors by adjusting their hue, saturation, and lightness values.

It ensures scalability, as colors can be systematically modified to create shades and tints while maintaining consistency.

At Attentive, we used HSL manipulation to build our color palette, ensuring better scalability and flexibility across the design system.

By choosing HSL manipulation, we were able to create a well-balanced, systematic color framework that aligns with both brand identity and usability needs.

In figma you can change hex-code to show HSL of particular color, or choose an online generators to generate HSL code

⁠

(Figma panel)

(Figma panel)

⁠

How to create a color palette using HSL Manipulation

Creating a color palette using HSL (Hue, Saturation, Lightness) allows for precise control over color variations while maintaining consistency and scalability. Here’s how to systematically build a palette using this method:

Choose a base color

Start by selecting the primary color for your palette.

Work with HSL instead of Hex codes

Convert the chosen color into its HSL (Hue, Saturation, Lightness) values.

Hue (H) represents the color type (e.g., blue, red, green).

Saturation (S) determines how intense or muted the color is.

Lightness (L) controls the brightness and depth of the color.

Adjust the lightness to generate shades

Once you have set the hue and saturation, the lightness (L) is the key factor in generating different shades.

Lightness ranges from 0 to 100:

0 = Darkest shade (black, as there is no light).

100 = Lightest shade (white, as the light is at maximum).

Mathematically distribute lightness for a balanced palette

To create a palette of 10 shades, lightness values should be evenly spaced across the range.

The distribution formula can be adjusted based on the desired contrast and usability needs.

For example, if a gradient from dark to light is needed, the lightness values might follow a pattern like:

L = 10, 20, 30 … 90, 100

This method ensures that the color system remains scalable, flexible, and visually cohesive across all UI components. By manipulating HSL instead of relying on arbitrary hex codes, we were able to maintain color consistency across different themes and product environments at Attentive.

To illustrate how HSL manipulation works, let's create a 10-shade palette for the color Purple.

Step 1: Identify the base color

The base color Purple in HSL format: HSL(277°, 100%, 50%)

Hue (H) = 277° (defines the color itself)

Saturation (S) = 100% (full intensity)

Lightness (L) = 50% (this is the mid-tone, representing the original color)

Step 2: Adjust the lightness to create shades

Instead of modifying hue or saturation, we only change the lightness (L) to create different shades of Purple.

Step 3: Generate the shades

A 10-shade palette is created by assigning different values to L:

Darker shades: 10%, 20%, 30%, 40%

Base color: 50% (unchanged)

Lighter shades: 60%, 70%, 80%, 90%, 100%

Color table

Color table

Shade

HSL Value

Darkest Shade

HSL(277°, 100%, 10%)

HSL(277°, 100%, 20%)

HSL(277°, 100%, 30%)

HSL(277°, 100%, 40%)

Base Purple

HSL(277°, 100%, 50%)

HSL(277°, 100%, 60%)

HSL(277°, 100%, 70%)

HSL(277°, 100%, 80%)

HSL(277°, 100%, 90%)

Lightest Shade

HSL(277°, 100%, 100%)

There are no rows in this table

⁠

Step 4: Apply the palette

This systematic approach ensures even distribution of colors.

By using HSL manipulation, designers can easily scale colors while keeping hue and saturation consistent.

This method also guarantees better accessibility by maintaining a clear contrast between dark and light variants.

Pro tip : Don’t use L=100% as it will give you white color. Tone down it to some other % so that a shade of color is achieved. Let’s use L=98% for our case.

The color palette would look something like this :

⁠

Voila!! You now have a color palette generated for yourself. In similar fashion you can create palette for other colors as well.

Key Learnings from Creating the Color Palette

Building a structured and scalable color palette using HSL manipulation provided valuable insights into color theory, accessibility, and design system scalability. Here are some key takeaways:

HSL provides more control and flexibility

Unlike hex codes, which are static, HSL allows systematic manipulation of lightness to create well-balanced shades.

This method ensured that colors remained consistent and scalable without manually adjusting multiple color values.

A structured color system improves design consistency

Defining primary, secondary, and neutral colors helped establish a clear hierarchy in the design system.

Implementing tints and shades using lightness variations ensured that all components followed a cohesive color logic.

Accessibility and contrast are critical considerations

Using WCAG guidelines, we ensured that color contrast ratios met AA or AAA compliance, improving readability and usability.

This was particularly important for semantic colors, where users needed clear visual cues for actions like errors, warnings, and success messages.

Systematic color expansion

Supports Future Scalability The HSL-based approach allowed us to easily expand the palette when new shades were needed.

This made the design system future-proof, reducing the need for manual color adjustments over time.

By applying HSL manipulation, we were able to create a scalable, accessible, and structured color system that integrates seamlessly with the STEM design system. This approach not only enhanced the usability of our product but also provided a consistent visual experience for users across different themes and interfaces.

How we established our color system?

Organising colors

Methods to create a palette

How to create a color palette using HSL Manipulation

Key Learnings from Creating the Color Palette

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.