4.3 Creating Color Palettes (CF001)
Whether the designer has an in-depth understanding of color theory or is just starting to explore design, color plays a vital role in UI design. In design systems, a well-structured color palette is essential. It ensures visual consistency across components and facilitates collaboration by establishing a shared understanding of how colors are used.
The Create feature of the Kolibri Sync Plugin is designed to support the goal PG002 by addressing the related pain points PP003 and PP004. It enables designers to quickly generate structured color palettes with variant shades based on a few selected colors. The goal is to speed up the setup process while still allowing designers to iterate and customize the palette as needed. It creates both a visual palette on the canvas and a corresponding variable collection in Figma. The feature also supports generating a dark mode version of the palette, allowing for theme-specific variants from the start. Example components are included to demonstrate how the generated colors can be applied in practice.
Input Parameters and Design Choices
To generate a color palette in Figma using the create feature of Kolibri Sync Plugin, the user must configure several input parameters in the plugin UI. These parameters allow building a customizable color palette.
1. Color Inputs
At the core of this setup are three main color inputs:
Base Color
Lightening Color
Darkening Color
These inputs correspond to the structure of the CSS color-mix() function, which blends two colors by a given percentage. In Kolibri Sync, this concept is mirrored to define all color variations from a fixed base color, which serves as the dominant value in each blend. The lightening or darkening color is applied at a fixed percentage, with the plugin calculating the mix for each step using preset values that cannot be manually adjusted.
color-mix(in srgb, <Base Color>, <Ligthening Color> <percentage>?)
color-mix(in srgb, <Base Color>, <Darkneing Color> <percentage>?)Based on our initial research and review of the Kolibri web UI toolkit, adopting color-mix() reproduces Kolibri’s palette logic in a maintainable way. This ensures alignment with a reliable CSS architecture, keeping the plugin’s output consistent with the production code it is intended to support. The following CSS excerpt shows Kolibri’s palette definition.
:root {
/* Colors that define the palette. Make changes here. */
--kolibri-palette-purple: hsl(260deg 100% 50%);
/* Warmer tones for color mixing, set lightness to 0 and 100% for black and white */
--kolibri-palette-darkening: hsl( 0deg 70% 10%);
--kolibri-palette-lightening: hsl( 23deg 100% 100%);
/* ------------------------------------------------ */
/* Below comes a technical area that derives the */
/* color variants in a consistent way. */
/* This should not be changed. */
/* ------------------------------------------------ */
/* Might be generated in the future. */
/* --- purple --- */
--kolibri-palette-purple-800: color-mix(in srgb, var(--kolibri-palette-purple), var(--kolibri-palette-darkening) 45% );
--kolibri-palette-purple-500: var(--kolibri-palette-purple);
--kolibri-palette-purple-100: color-mix(in srgb, var(--kolibri-palette-purple), var(--kolibri-palette-lightening) 80% );
/* --- and so on for all other colors in the parent palette --- */By replicating this logic in Figma, the plugin allows designers to generate entire palettes with just three color values. These colors can be set through the color picker or by using color formats such as HEX, RGB, or HSL. Once defined, the plugin calculates the full range of lighter and darker variants and updates the preview accordingly.
The plugin preview shows how much of the lightening or darkening color is blended into each variant. This helps users understand how the palette is constructed before generating it.
In the preview shown above, the palette includes five steps, centered around the base color (500). Lighter variants (100, 200) are created by mixing the base color with distinct percentages of the lightening color, while darker variants (700, 900) are produced using the darkening color. Each label indicates the mixing percentage applied.
The plugin preview reflects how each shade is calculated using color-mix(). The following breakdown shows the corresponding syntax for each variant:
100→color-mix(in srgb, baseColor, lighteningColor 80%)200→color-mix(in srgb, baseColor, lighteningColor 60%)500→baseColor(no mix)700→color-mix(in srgb, baseColor, darkeningColor 30%)900→color-mix(in srgb, baseColor, darkeningColor 60%)
Base Color Name Value
In addition to choosing the color values, the user can also assign a color name value to the base color input. This name is used as the base label for all generated variants and will influence how frames and components are named in later steps. The effect of this input is discussed in more detail in the sections Generating Color Variants in Collection and Creating Color Palette Frame. Beyond their functional role, these input controls are designed to mirror Figma’s internal controls, ensuring the plugin feels like a natural extension of the Figma environment.
2. Variant Count
Users can choose how many variations of color they need for their palette using a slider control. This control is intended to feel intuitive, as sliding it to the right increases the number of variants, while sliding it to the left reduces it.
Kolibri Sync supports palette generation with:
5 Variants
7 Variants
9 Variants
These odd-numbered variant counts allow the base color to always be in the middle and have an equal number of light and dark variants. This structure aims to make the base color easier to locate at a glance and to support quicker decision-making by limiting the available options to a predefined set.
While the ideal number of color variants always depends on the specific needs of a design project, our system offers a consistent structure. Regardless of the selected variant count, the lightest (100) and darkest (900) colors remain fixed. Additional shades are introduced by interpolating new steps between the base color and these two anchors. This ensures that the palette expands in a controlled and predictable way.
3. Dark Mode Palette
In addition to generating a light mode palette, Kolibri Sync supports the simultaneous creation of a dark mode palette. This ensures that both visual themes are available from the beginning of the design process.
The generation process mirrors the structure of the light mode palette. Based on the selected base color, the plugin automatically generates lighter and darker variants. However, before these variants are derived, the base color used for the dark mode palette is programmatically adjusted.
To create a more suitable appearance for dark environments, the base color is desaturated and modified using the HSL color model. HSL is supported in both Figma and CSS, which makes it a practical choice for implementation compared to HSV, which is not natively supported in CSS. Although HSL and HSV differ in their technical definitions, the lightness and saturation components in HSL correspond closely to the perceptual attributes of value and chroma in color relativity theory.
Adjusting these attributes directly allows control over how a color is perceived in relation to its surroundings. In dark mode, background values and contrast relationships change significantly, often altering the perceived brightness and intensity of colors.
The plugin modifies the lightness and saturation values of the base color by multiplying them with user-defined factors. This transformation helps achieve a more balanced appearance on dark backgrounds while offering fine-grained control over the brightness and vibrancy of each color. Reducing saturation is especially helpful in dark mode, as overly vivid colors can strain the eyes or reduce legibility. This adjustment means to support better accessibility by improving contrast and helping meet WCAG AA guidelines for legibility.
Based on our own experimentation, we found the following parameter settings to be the most effective for balancing contrast and aesthetics. These presets serve as a practical starting point and can be adjusted as needed:
Bright / Vibrant Colors
0.8 – 1.1
0.5
Tones down vivid colors
Balanced Colors (default)
1.0
0.5
Good starting point for most colors
Dark / Muted Colors
1.2 – 1.5
0.5
Increases brightness for better visibility in dark mode
These recommendations help balance contrast and aesthetics while giving designers a straightforward way to fine-tune their dark mode palette. With this approach, we ensure consistent progression in light/dark variants and aim to help reduce cognitive load for the designer.
4. Output Options via Checkboxes
In addition to setting the base color inputs and generation parameters, users can toggle optional output features via checkboxes. The following options are available:
Create Palette for Light Mode: Generates the main light mode palette on the canvas and the collection.
Create Palette for Dark Mode: Generates the dark mode palette on the canvas and the collection.
Create Palette with Components: Adds example UI components to the canvas using the generated colors. If both light and dark mode palettes are enabled, components for each theme are created accordingly. This helps designers preview and test how the color styles will be used in practice.
These checkboxes allow users to tailor the plugin's output to their needs, offering control over which elements are included in the generation process.
Generating Color Variants in Collection
When a palette is generated using Kolibri Sync, a new local variable collection named “KOLIBRI SYNC” is automatically created in Figma. This automation eliminates the need for users to manually add each color variant to a collection, significantly reducing repetitive setup steps during the design process.
In addition to reducing manual setup, this approach facilitates faster experimentation and provides immediate visual feedback. Once a color is saved as a variable, it becomes immediately accessible in the design panel and can be applied to any shape or element. The base color name entered in the plugin’s UI is used to name and group the variables in the KOLIBRI SYNC collection. If the same name is used again, the existing variable in that collection is overwritten with the new values. Any elements linked to those variables will update automatically, see Figure 43 for a demonstration. This allows designers to easily test their color variables across mockups without manually updating each one.
Once the user is satisfied with the generated palette, they can move or copy individual variables from the Kolibri Sync collection into their working collection, keeping the workspace clean and structured.
All generated color variables appear in HEX format inside Figma, making them easy to read, copy, and share with developers. Based on the selected checkboxes (light mode, dark mode, components), the generated collection may contain:
One or both theme variants (light and dark).
The full range of color steps for each base color (e.g., 100 to 900).
Grouped variable folders following Figma’s naming conventions.
The image below illustrates an example of the resulting "KOLIBRI SYNC" collection, generated with five color steps and both light and dark mode enabled, and the base color name value is set as purple .
Creating Color Palette Frame
When a palette is generated using the Kolibri Sync plugin, a new frame is appended to the Figma canvas to provide a structured and visual representation of the entire color palette.
Parent Frame
This top-level frame is named based on the format "<base color name value> Palette" (e.g., “purple Palette”) and displays all generated variants in a clean layout.
Original Colors (1): This section displays the original color values defined in the plugin UI, including the base color, lightening color, and darkening color. It serves as a reference to understand how the palette was generated.
Light Mode Palette (2): The
purple LIGHT PALETTEcontains the light mode variants, organized in rows from lightest (100) to darkest (900).Dark Mode Palette (3): The dark mode frame
purple DARK PALETTEmirrors the layout of the light mode palette but is appended on a dark background. Colors are adjusted based on the user-defined lightness and saturation settings.
Variants Frame
Inside each purple LIGHT PALETTE and purple DARK PALETTE is a nested VARIANTS frame. This frame holds the actual color variants. These are grouped according to their numeric labels (e.g. purple-100, purple-500, purple-900), each representing a specific color shade.
Each variant group contains two rectangles:
Base Rectangle: filled with base color
Overlay Rectangle: filled with lightening or darkening color
This structure creates the visual blend effect that simulates CSS color-mix() directly within Figma. Each variant is visually constructed by layering a base rectangle with an overlay rectangle of a lightening or darkening color, set at a specific opacity. This design aimed to make the CSS color-mix() method more tangible for designers who may not be familiar with it. By visually layering base and adjustment colors, the frame was intended to serve as both a functional source for CSS export and an educational aid that reveals the underlying blending logic.
However, this visual structure is not what is saved into the variable collection. Instead, the plugin calculates the blended result of the fill colors in each group. The resulting color is then saved to Figma’s variable collection KOLIBRI SYNC under its respective group.
Figure 44 demonstrates how this effect is achieved in Figma.
Component Frame
As part of the generated frame, Kolibri Sync provides example UI components that demonstrate how the color variants can be applied in design. The component frame includes elements such as buttons, input fields, checkboxes, radio buttons, and toggle switches.
The primary goal of these components is to provide immediate visual feedback, helping users evaluate whether the generated colors are suitable for their design. These examples are intended as suggestions; the final decision on how to apply the palette remains with the user.
To maintain consistency, the plugin applies the same subset of variants (100, 200, 500, and 900) regardless of the total number of variants in the palette. This selection ensures a balanced representation of light, mid, and dark tones.
Last updated