Sep 28, 2024
by
Dmitriy Bunin
Best practices for UI color palettes in Figma
How to create a color palette for web design in Figma
Learn how to create UI color palettes in Figma with our definitive guide and free color variables library
This guide will teach you how to create UI color palettes for your project using Figma. It will also include tips on color accessibility and color psychology best practices.
Creating a color palette is always an essential step when starting a new project. Numerous tools and features in Figma can help us create a palette that reflects our brand and idea identity in digital and real-world products.
A professionally designed color palette will support our project's scalability, making it easier to grow as a design system as needs change.
This is particularly valuable for ensuring accessibility, as it establishes a solid base for creating color palettes that meet complex UI requirements.
On this page, we'll cover everything you need to create color palettes and share our practical FramesX: Color Variables System for your web and app design projects in Figma.
Get the free UI color palette for Figma
At Frames X we've created the smartest color variables system to help in your designs. Get FramesX: color variables palette now for free — Download and get started with our perfectly organized color and brand foundation.
Duplicate the FramesX UI color palette on the Figma community.
Getting started with UI colors
Colors are at the foundation of every visual system. Colors allow us to differentiate design elements, understand what’s important, and how we consume our content.
When choosing and combining colors, one should consider different screens, lighting conditions, color perception, and many other factors that may affect color contrast.
Frames X color system covers a wide range of accessibility entry points and considers everything about the practical use of colors in UI design.
Our framework offers a great foundation and will help you:
Define color for every element in your project.
Modify multiple color themes with multiple color modes (light and dark).
Predict how color changes will appear and how accessible they could be for your project branding.
Help to have fewer debates over color names and usage purposes.
You can start working with the Frames color variables palette as you read this guide, so feel free to duplicate our FramesX UI colors variables palette file.
Note: You can change the default colors in the File by clicking on the corresponding color variable from the “Local Variables” menu that is accessible from the right sidebar.
Choosing UI colors to fit your branding
When starting a project with new branding, the key challenges include maintaining brand consistency across interfaces and balancing brand presence with user-centric design (or stake-holders centric design).
The technical aspects of your color palette will be crucial, as branding elements can impact performance and load times. The styling system's scalability is essential for brand growth.
So the ideal color palette for a UI design project should include certain important groups of colors every UI project should have. Such as:
Neutral colors (usually grey or alpha transparency colors).
Primary and accent colors for call-to-action clickable elements.
Feedback colors to show interface feedback states, such as green for confirmation and red for error messages.
Neutral UI colors palettes
Neutral colors dominate in user interface design, used for backgrounds, text, icons, and vector shapes. These typically comprise grayscale and are used as base hues in design systems.
Our system employs distinct neutral palettes that include semantics for solid colors and alpha-transparency colors optimized for accessible visibility in interfaces. One concept we think is important to become familiar with is — using value-based (semantic) names for UI colors.
For example, you can use "colorName-500" as the base color. Lighter shades are represented by lower numbers (e.g., color-400, color-300), while darker shades are represented by higher numbers (e.g., color-600, color-700).
This numbering range indicates the total number of shades in your color palette and helps you scale or shrink color groups as needed.
For the neutral colors group used in UI backgrounds and design systems, we suggest establishing the required amount of surface colors, which could be named background-1, 2 or foreground-1, 2, etc.
Brand UI colors palettes
Primary colors that point users to focal points and represent brand identity across your interface. Ideally, it would be best if you had from one to three primary colors easily associated with your brand or project.
Using brand colors as primary colors for UI elements will strengthen your brand awareness. Yet, using exact brand colors for buttons is not always a good idea since such styling do not always have enough contrast.
Try to avoid this mistake. If your brand font lacks contrast or is too pale, pick a more vibrant variant as a primary color. This will ensure that your text labels have enough contrast for CTA elements and buttons.
Accent UI colors palettes
Accent or secondary colors help grab user attention and support the primary colors. Use the secondary colors group sparingly to make the UI elements stand out. You can apply them to elements such as chips, badges, and labels.
Usually, a project may have one to six secondary colors. Limiting it to only one or two colors would bring more consistency to your palette. If your project has multiple sub-products, each could have its own primary and secondary palette.
Note: Frames X Color Variables Palette has 44 color palettes, but you aren't required to use or keep all of them if your project doesn't need them.
Feedback UI color palettes
Feedback colors translate common interface states (such as "good," "bad," or "warning"), helping users understand interface messages.
For example, the green color has a positive connotation. People have the muscle memory to associate it with success and confirmation status. And red is present in our brain to warn us about something that went wrong.
You should use feedback colors whenever:
You want to highlight a vital UI status, positive or alert info.
You want to validate text fields or controls like toggles and checkboxes.
You want to give fast visual feedback, like a new in-app message.
Note: Don't apply feedback colors if they have no purpose and are used only for decoration. For example, if you need a green shade, consider using a Teal color group instead of Green since it is reserved for interface state purposes.
Validating your UI color palettes
After identifying each group of colors, it is important to validate them by making sure they meet accessibility standards. To do this, select primary UI elements such as text and buttons and check their contrast when placed on neutral surface colors.
For example, you can place the primary color button on the default background to ensure it has enough contrast for the message.
Our top-pick tools to help you validate color contrast:
Contrast plugin for Figma by WillowTree.
Color contrast plugin by Aleksandra Walczak.
Intro to Frames X's UI color system
Frames X palette is focused on easy scaling and seamless customization. All Included colors utilize current web content accessibility guidelines (WCAG 2.4) with post-processing of the APCA model, which is an ideal combination for calculating perfect contrast balance for every available UI color.
In Frames X, each color group includes ten shades to display the full spectrum of UI-applicable colors powered by the Figma features such as Variables and Color Styles.
Frames X UI color palette ensures consistent contrast within and between each group, with every color name index corresponding to its saturation level (contrast ratio).
This way, Frames X's palette allows colors to reflect elevation and hierarchy through the interface and helps to achieve consistent results when combined with custom branding.
Precise color contrast ratio
When utilizing the Frames X color palette, you can expect a similar or nearly equal contrast between color groups when using color variables from the same saturation range. This is unique to our palette features and allows you to confidently and efficiently set your primary and brand colors that will scale as your project grows.
Tip: We recommend using a range of 500-600 for primary active elements and 50-100 for backgrounds and surfaces for optimal UI accessibility.
Optimized dark mode for UI design
Frames X's dark mode uses a less saturated color palette to maintain accessibility and increase eye comfort in a dim interface environment. The dark color palette communicates hierarchy using desaturated fill colors instead of only reversing the values from light colors as most design palettes do.
Tip: You can switch between color modes anytime and expect the same accessibility levels. To switch from one color mode to another, you can select any elements with color variables applied and use the appearance control from the right sidebar.
Tailwind and Bootstrap compatible
Frames X colors can help you easily transition your designs to Tailwind or Bootstrap. The Frames X color palette is fully compatible with Tailwind and Bootstrap naming conventions and provides the same number of pre-set colors.
Frames X UI palette shares the same number of color steps and saturation levels while providing a better contrast ratio compared to the popular frameworks.
Tips on working with Frames X UI colors
Frames X color pallete aims to help you solve the most common design system scenarios, such as finding the right primary, secondary, and accent colors, updating your colors globally, sorting, grouping, and naming your colors, as well as sharing your colors with your team.
To help you choose and communicate colors more effectively — our palette includes guidelines explaining "where" and "why" certain colors are used. This will visually demonstrate the reasoning behind the color choice of each element in the project.
Note: Proper communication is the key in all of these scenarios. However, it's common to reshape, rename, and rearrange your colors throughout the project lifespan. So, the way you translate your decisions can become more crucial as your project grows.
Using colors from a team library
When starting a new project, you could add Frames X as your Team library and save yourself a massive amount of time adding colors or using third-party tools to generate them manually.
Using an external color palette will allow you to quickly populate your new project with a broad and thoughtful range of colors. Colors could become a separate library your team access without cracking your ongoing work, helping everyone be on the same page regarding the project/file they are working on.
Note: the Team library feature will require a proffesional Figma plan.
Is it worth it? Absolutely. A separate color or "brand colors" library/file will help you better communicate your design decisions while staying consistent across prominent projects and organizations.
Finding UI colors faster
Tagging color variables is a great practice to speed up your workflow in Figma. This practice could be applied not only when working with color variables but also with components and styles.
Tagging your colors will help you to quickly reveal the needed color or group of colors through Figma menus by typing a special symbol or an included "tag" name.
Note: Frames X, by default, uses a '$' tag to prioritize the most frequently used colors/styles used for primary purposes, such as text and active elements.
Understanding color models
Color modes are predefined sets of color values with numeric combinations used to accurately represent colors in digital or print design, such as RGB and Hex for digital screens and CMYK for printing.
As designers, we tend to feel comfortable working with the Hex colors because of how compact they are. However, Hex values are tough to read, and it's unlikely you would be able to guess the color of an element by reading them, except if you are an expert designer.
HSL is another color model that stands for Hue, Saturation, and Lightness. It is considered to be more intuitive than RGB in understanding colors from a non-technical perspective. In HSL, the Hue determines the color displayed on a 360-degree color wheel. One of the significant advantages of the HSL color wheel over RGB is that complementary (same saturation) colors are placed opposite each other.
For instance, by adjusting the lightness numeric values, we can obtain darker or lighter variants of the color, or by modifying the saturation value, we can achieve a completely different color with the same amount of saturation. This approach is a more convenient way to interpret how our eyes perceive colors compared to RGB or Hex models.
The advantage of HSL over RGB is that it is easier to create pallets of matching colors by keeping their hue values at the same range and adjusting only the lightness and saturation values, which is much easier than adjusting the amount of green, red, or blue.
Thank you for the read!
Learn how to create UI color palettes in Figma with our definitive guide and free color variables library
This guide will teach you how to create UI color palettes for your project using Figma. It will also include tips on color accessibility and color psychology best practices.
Creating a color palette is always an essential step when starting a new project. Numerous tools and features in Figma can help us create a palette that reflects our brand and idea identity in digital and real-world products.
A professionally designed color palette will support our project's scalability, making it easier to grow as a design system as needs change.
This is particularly valuable for ensuring accessibility, as it establishes a solid base for creating color palettes that meet complex UI requirements.
On this page, we'll cover everything you need to create color palettes and share our practical FramesX: Color Variables System for your web and app design projects in Figma.
Get the free UI color palette for Figma
At Frames X we've created the smartest color variables system to help in your designs. Get FramesX: color variables palette now for free — Download and get started with our perfectly organized color and brand foundation.
Duplicate the FramesX UI color palette on the Figma community.
Getting started with UI colors
Colors are at the foundation of every visual system. Colors allow us to differentiate design elements, understand what’s important, and how we consume our content.
When choosing and combining colors, one should consider different screens, lighting conditions, color perception, and many other factors that may affect color contrast.
Frames X color system covers a wide range of accessibility entry points and considers everything about the practical use of colors in UI design.
Our framework offers a great foundation and will help you:
Define color for every element in your project.
Modify multiple color themes with multiple color modes (light and dark).
Predict how color changes will appear and how accessible they could be for your project branding.
Help to have fewer debates over color names and usage purposes.
You can start working with the Frames color variables palette as you read this guide, so feel free to duplicate our FramesX UI colors variables palette file.
Note: You can change the default colors in the File by clicking on the corresponding color variable from the “Local Variables” menu that is accessible from the right sidebar.
Choosing UI colors to fit your branding
When starting a project with new branding, the key challenges include maintaining brand consistency across interfaces and balancing brand presence with user-centric design (or stake-holders centric design).
The technical aspects of your color palette will be crucial, as branding elements can impact performance and load times. The styling system's scalability is essential for brand growth.
So the ideal color palette for a UI design project should include certain important groups of colors every UI project should have. Such as:
Neutral colors (usually grey or alpha transparency colors).
Primary and accent colors for call-to-action clickable elements.
Feedback colors to show interface feedback states, such as green for confirmation and red for error messages.
Neutral UI colors palettes
Neutral colors dominate in user interface design, used for backgrounds, text, icons, and vector shapes. These typically comprise grayscale and are used as base hues in design systems.
Our system employs distinct neutral palettes that include semantics for solid colors and alpha-transparency colors optimized for accessible visibility in interfaces. One concept we think is important to become familiar with is — using value-based (semantic) names for UI colors.
For example, you can use "colorName-500" as the base color. Lighter shades are represented by lower numbers (e.g., color-400, color-300), while darker shades are represented by higher numbers (e.g., color-600, color-700).
This numbering range indicates the total number of shades in your color palette and helps you scale or shrink color groups as needed.
For the neutral colors group used in UI backgrounds and design systems, we suggest establishing the required amount of surface colors, which could be named background-1, 2 or foreground-1, 2, etc.
Brand UI colors palettes
Primary colors that point users to focal points and represent brand identity across your interface. Ideally, it would be best if you had from one to three primary colors easily associated with your brand or project.
Using brand colors as primary colors for UI elements will strengthen your brand awareness. Yet, using exact brand colors for buttons is not always a good idea since such styling do not always have enough contrast.
Try to avoid this mistake. If your brand font lacks contrast or is too pale, pick a more vibrant variant as a primary color. This will ensure that your text labels have enough contrast for CTA elements and buttons.
Accent UI colors palettes
Accent or secondary colors help grab user attention and support the primary colors. Use the secondary colors group sparingly to make the UI elements stand out. You can apply them to elements such as chips, badges, and labels.
Usually, a project may have one to six secondary colors. Limiting it to only one or two colors would bring more consistency to your palette. If your project has multiple sub-products, each could have its own primary and secondary palette.
Note: Frames X Color Variables Palette has 44 color palettes, but you aren't required to use or keep all of them if your project doesn't need them.
Feedback UI color palettes
Feedback colors translate common interface states (such as "good," "bad," or "warning"), helping users understand interface messages.
For example, the green color has a positive connotation. People have the muscle memory to associate it with success and confirmation status. And red is present in our brain to warn us about something that went wrong.
You should use feedback colors whenever:
You want to highlight a vital UI status, positive or alert info.
You want to validate text fields or controls like toggles and checkboxes.
You want to give fast visual feedback, like a new in-app message.
Note: Don't apply feedback colors if they have no purpose and are used only for decoration. For example, if you need a green shade, consider using a Teal color group instead of Green since it is reserved for interface state purposes.
Validating your UI color palettes
After identifying each group of colors, it is important to validate them by making sure they meet accessibility standards. To do this, select primary UI elements such as text and buttons and check their contrast when placed on neutral surface colors.
For example, you can place the primary color button on the default background to ensure it has enough contrast for the message.
Our top-pick tools to help you validate color contrast:
Contrast plugin for Figma by WillowTree.
Color contrast plugin by Aleksandra Walczak.
Intro to Frames X's UI color system
Frames X palette is focused on easy scaling and seamless customization. All Included colors utilize current web content accessibility guidelines (WCAG 2.4) with post-processing of the APCA model, which is an ideal combination for calculating perfect contrast balance for every available UI color.
In Frames X, each color group includes ten shades to display the full spectrum of UI-applicable colors powered by the Figma features such as Variables and Color Styles.
Frames X UI color palette ensures consistent contrast within and between each group, with every color name index corresponding to its saturation level (contrast ratio).
This way, Frames X's palette allows colors to reflect elevation and hierarchy through the interface and helps to achieve consistent results when combined with custom branding.
Precise color contrast ratio
When utilizing the Frames X color palette, you can expect a similar or nearly equal contrast between color groups when using color variables from the same saturation range. This is unique to our palette features and allows you to confidently and efficiently set your primary and brand colors that will scale as your project grows.
Tip: We recommend using a range of 500-600 for primary active elements and 50-100 for backgrounds and surfaces for optimal UI accessibility.
Optimized dark mode for UI design
Frames X's dark mode uses a less saturated color palette to maintain accessibility and increase eye comfort in a dim interface environment. The dark color palette communicates hierarchy using desaturated fill colors instead of only reversing the values from light colors as most design palettes do.
Tip: You can switch between color modes anytime and expect the same accessibility levels. To switch from one color mode to another, you can select any elements with color variables applied and use the appearance control from the right sidebar.
Tailwind and Bootstrap compatible
Frames X colors can help you easily transition your designs to Tailwind or Bootstrap. The Frames X color palette is fully compatible with Tailwind and Bootstrap naming conventions and provides the same number of pre-set colors.
Frames X UI palette shares the same number of color steps and saturation levels while providing a better contrast ratio compared to the popular frameworks.
Tips on working with Frames X UI colors
Frames X color pallete aims to help you solve the most common design system scenarios, such as finding the right primary, secondary, and accent colors, updating your colors globally, sorting, grouping, and naming your colors, as well as sharing your colors with your team.
To help you choose and communicate colors more effectively — our palette includes guidelines explaining "where" and "why" certain colors are used. This will visually demonstrate the reasoning behind the color choice of each element in the project.
Note: Proper communication is the key in all of these scenarios. However, it's common to reshape, rename, and rearrange your colors throughout the project lifespan. So, the way you translate your decisions can become more crucial as your project grows.
Using colors from a team library
When starting a new project, you could add Frames X as your Team library and save yourself a massive amount of time adding colors or using third-party tools to generate them manually.
Using an external color palette will allow you to quickly populate your new project with a broad and thoughtful range of colors. Colors could become a separate library your team access without cracking your ongoing work, helping everyone be on the same page regarding the project/file they are working on.
Note: the Team library feature will require a proffesional Figma plan.
Is it worth it? Absolutely. A separate color or "brand colors" library/file will help you better communicate your design decisions while staying consistent across prominent projects and organizations.
Finding UI colors faster
Tagging color variables is a great practice to speed up your workflow in Figma. This practice could be applied not only when working with color variables but also with components and styles.
Tagging your colors will help you to quickly reveal the needed color or group of colors through Figma menus by typing a special symbol or an included "tag" name.
Note: Frames X, by default, uses a '$' tag to prioritize the most frequently used colors/styles used for primary purposes, such as text and active elements.
Understanding color models
Color modes are predefined sets of color values with numeric combinations used to accurately represent colors in digital or print design, such as RGB and Hex for digital screens and CMYK for printing.
As designers, we tend to feel comfortable working with the Hex colors because of how compact they are. However, Hex values are tough to read, and it's unlikely you would be able to guess the color of an element by reading them, except if you are an expert designer.
HSL is another color model that stands for Hue, Saturation, and Lightness. It is considered to be more intuitive than RGB in understanding colors from a non-technical perspective. In HSL, the Hue determines the color displayed on a 360-degree color wheel. One of the significant advantages of the HSL color wheel over RGB is that complementary (same saturation) colors are placed opposite each other.
For instance, by adjusting the lightness numeric values, we can obtain darker or lighter variants of the color, or by modifying the saturation value, we can achieve a completely different color with the same amount of saturation. This approach is a more convenient way to interpret how our eyes perceive colors compared to RGB or Hex models.
The advantage of HSL over RGB is that it is easier to create pallets of matching colors by keeping their hue values at the same range and adjusting only the lightness and saturation values, which is much easier than adjusting the amount of green, red, or blue.
Thank you for the read!
Learn how to create UI color palettes in Figma with our definitive guide and free color variables library
This guide will teach you how to create UI color palettes for your project using Figma. It will also include tips on color accessibility and color psychology best practices.
Creating a color palette is always an essential step when starting a new project. Numerous tools and features in Figma can help us create a palette that reflects our brand and idea identity in digital and real-world products.
A professionally designed color palette will support our project's scalability, making it easier to grow as a design system as needs change.
This is particularly valuable for ensuring accessibility, as it establishes a solid base for creating color palettes that meet complex UI requirements.
On this page, we'll cover everything you need to create color palettes and share our practical FramesX: Color Variables System for your web and app design projects in Figma.
Get the free UI color palette for Figma
At Frames X we've created the smartest color variables system to help in your designs. Get FramesX: color variables palette now for free — Download and get started with our perfectly organized color and brand foundation.
Duplicate the FramesX UI color palette on the Figma community.
Getting started with UI colors
Colors are at the foundation of every visual system. Colors allow us to differentiate design elements, understand what’s important, and how we consume our content.
When choosing and combining colors, one should consider different screens, lighting conditions, color perception, and many other factors that may affect color contrast.
Frames X color system covers a wide range of accessibility entry points and considers everything about the practical use of colors in UI design.
Our framework offers a great foundation and will help you:
Define color for every element in your project.
Modify multiple color themes with multiple color modes (light and dark).
Predict how color changes will appear and how accessible they could be for your project branding.
Help to have fewer debates over color names and usage purposes.
You can start working with the Frames color variables palette as you read this guide, so feel free to duplicate our FramesX UI colors variables palette file.
Note: You can change the default colors in the File by clicking on the corresponding color variable from the “Local Variables” menu that is accessible from the right sidebar.
Choosing UI colors to fit your branding
When starting a project with new branding, the key challenges include maintaining brand consistency across interfaces and balancing brand presence with user-centric design (or stake-holders centric design).
The technical aspects of your color palette will be crucial, as branding elements can impact performance and load times. The styling system's scalability is essential for brand growth.
So the ideal color palette for a UI design project should include certain important groups of colors every UI project should have. Such as:
Neutral colors (usually grey or alpha transparency colors).
Primary and accent colors for call-to-action clickable elements.
Feedback colors to show interface feedback states, such as green for confirmation and red for error messages.
Neutral UI colors palettes
Neutral colors dominate in user interface design, used for backgrounds, text, icons, and vector shapes. These typically comprise grayscale and are used as base hues in design systems.
Our system employs distinct neutral palettes that include semantics for solid colors and alpha-transparency colors optimized for accessible visibility in interfaces. One concept we think is important to become familiar with is — using value-based (semantic) names for UI colors.
For example, you can use "colorName-500" as the base color. Lighter shades are represented by lower numbers (e.g., color-400, color-300), while darker shades are represented by higher numbers (e.g., color-600, color-700).
This numbering range indicates the total number of shades in your color palette and helps you scale or shrink color groups as needed.
For the neutral colors group used in UI backgrounds and design systems, we suggest establishing the required amount of surface colors, which could be named background-1, 2 or foreground-1, 2, etc.
Brand UI colors palettes
Primary colors that point users to focal points and represent brand identity across your interface. Ideally, it would be best if you had from one to three primary colors easily associated with your brand or project.
Using brand colors as primary colors for UI elements will strengthen your brand awareness. Yet, using exact brand colors for buttons is not always a good idea since such styling do not always have enough contrast.
Try to avoid this mistake. If your brand font lacks contrast or is too pale, pick a more vibrant variant as a primary color. This will ensure that your text labels have enough contrast for CTA elements and buttons.
Accent UI colors palettes
Accent or secondary colors help grab user attention and support the primary colors. Use the secondary colors group sparingly to make the UI elements stand out. You can apply them to elements such as chips, badges, and labels.
Usually, a project may have one to six secondary colors. Limiting it to only one or two colors would bring more consistency to your palette. If your project has multiple sub-products, each could have its own primary and secondary palette.
Note: Frames X Color Variables Palette has 44 color palettes, but you aren't required to use or keep all of them if your project doesn't need them.
Feedback UI color palettes
Feedback colors translate common interface states (such as "good," "bad," or "warning"), helping users understand interface messages.
For example, the green color has a positive connotation. People have the muscle memory to associate it with success and confirmation status. And red is present in our brain to warn us about something that went wrong.
You should use feedback colors whenever:
You want to highlight a vital UI status, positive or alert info.
You want to validate text fields or controls like toggles and checkboxes.
You want to give fast visual feedback, like a new in-app message.
Note: Don't apply feedback colors if they have no purpose and are used only for decoration. For example, if you need a green shade, consider using a Teal color group instead of Green since it is reserved for interface state purposes.
Validating your UI color palettes
After identifying each group of colors, it is important to validate them by making sure they meet accessibility standards. To do this, select primary UI elements such as text and buttons and check their contrast when placed on neutral surface colors.
For example, you can place the primary color button on the default background to ensure it has enough contrast for the message.
Our top-pick tools to help you validate color contrast:
Contrast plugin for Figma by WillowTree.
Color contrast plugin by Aleksandra Walczak.
Intro to Frames X's UI color system
Frames X palette is focused on easy scaling and seamless customization. All Included colors utilize current web content accessibility guidelines (WCAG 2.4) with post-processing of the APCA model, which is an ideal combination for calculating perfect contrast balance for every available UI color.
In Frames X, each color group includes ten shades to display the full spectrum of UI-applicable colors powered by the Figma features such as Variables and Color Styles.
Frames X UI color palette ensures consistent contrast within and between each group, with every color name index corresponding to its saturation level (contrast ratio).
This way, Frames X's palette allows colors to reflect elevation and hierarchy through the interface and helps to achieve consistent results when combined with custom branding.
Precise color contrast ratio
When utilizing the Frames X color palette, you can expect a similar or nearly equal contrast between color groups when using color variables from the same saturation range. This is unique to our palette features and allows you to confidently and efficiently set your primary and brand colors that will scale as your project grows.
Tip: We recommend using a range of 500-600 for primary active elements and 50-100 for backgrounds and surfaces for optimal UI accessibility.
Optimized dark mode for UI design
Frames X's dark mode uses a less saturated color palette to maintain accessibility and increase eye comfort in a dim interface environment. The dark color palette communicates hierarchy using desaturated fill colors instead of only reversing the values from light colors as most design palettes do.
Tip: You can switch between color modes anytime and expect the same accessibility levels. To switch from one color mode to another, you can select any elements with color variables applied and use the appearance control from the right sidebar.
Tailwind and Bootstrap compatible
Frames X colors can help you easily transition your designs to Tailwind or Bootstrap. The Frames X color palette is fully compatible with Tailwind and Bootstrap naming conventions and provides the same number of pre-set colors.
Frames X UI palette shares the same number of color steps and saturation levels while providing a better contrast ratio compared to the popular frameworks.
Tips on working with Frames X UI colors
Frames X color pallete aims to help you solve the most common design system scenarios, such as finding the right primary, secondary, and accent colors, updating your colors globally, sorting, grouping, and naming your colors, as well as sharing your colors with your team.
To help you choose and communicate colors more effectively — our palette includes guidelines explaining "where" and "why" certain colors are used. This will visually demonstrate the reasoning behind the color choice of each element in the project.
Note: Proper communication is the key in all of these scenarios. However, it's common to reshape, rename, and rearrange your colors throughout the project lifespan. So, the way you translate your decisions can become more crucial as your project grows.
Using colors from a team library
When starting a new project, you could add Frames X as your Team library and save yourself a massive amount of time adding colors or using third-party tools to generate them manually.
Using an external color palette will allow you to quickly populate your new project with a broad and thoughtful range of colors. Colors could become a separate library your team access without cracking your ongoing work, helping everyone be on the same page regarding the project/file they are working on.
Note: the Team library feature will require a proffesional Figma plan.
Is it worth it? Absolutely. A separate color or "brand colors" library/file will help you better communicate your design decisions while staying consistent across prominent projects and organizations.
Finding UI colors faster
Tagging color variables is a great practice to speed up your workflow in Figma. This practice could be applied not only when working with color variables but also with components and styles.
Tagging your colors will help you to quickly reveal the needed color or group of colors through Figma menus by typing a special symbol or an included "tag" name.
Note: Frames X, by default, uses a '$' tag to prioritize the most frequently used colors/styles used for primary purposes, such as text and active elements.
Understanding color models
Color modes are predefined sets of color values with numeric combinations used to accurately represent colors in digital or print design, such as RGB and Hex for digital screens and CMYK for printing.
As designers, we tend to feel comfortable working with the Hex colors because of how compact they are. However, Hex values are tough to read, and it's unlikely you would be able to guess the color of an element by reading them, except if you are an expert designer.
HSL is another color model that stands for Hue, Saturation, and Lightness. It is considered to be more intuitive than RGB in understanding colors from a non-technical perspective. In HSL, the Hue determines the color displayed on a 360-degree color wheel. One of the significant advantages of the HSL color wheel over RGB is that complementary (same saturation) colors are placed opposite each other.
For instance, by adjusting the lightness numeric values, we can obtain darker or lighter variants of the color, or by modifying the saturation value, we can achieve a completely different color with the same amount of saturation. This approach is a more convenient way to interpret how our eyes perceive colors compared to RGB or Hex models.
The advantage of HSL over RGB is that it is easier to create pallets of matching colors by keeping their hue values at the same range and adjusting only the lightness and saturation values, which is much easier than adjusting the amount of green, red, or blue.
Thank you for the read!
Download Frames X Color Variables Palette for Free — Get started with a perfectly organized and professionally crafted palette that you can use as your brand foundation or a Team library in Figma.
Best Figma plugins for UI design and design systems
WYSIWYG UI: How to design a text editor in Figma
Frames X v2.6: Universal UI kit and component library
Best free UI free icons for web design and development
Frames X v2.5: Largest UI kit in the world updated
Figma tips and tricks to work efficiently
Frames X v2.4: Typography variables, new components and charts
Frames X v2.3: Enhanced tools for data-driven design