Figma Colors Palette
Universal UI color palette for web design
File name
Frames X Color Variables Palette
Format
Figma
Features
Color variables
Size
23 MB
Universal UI color palette for Figma
This Figma file provides the best color combinations for websites and application design using Figma variables.
Our color palette utilizes WCAG guidelines with post-processing of the APCA color model to calculate the ideal contrast. This color palette provides an extensive color library you can use as your Team library and project foundation.
Frames X UI color pallete ensures consistent contrast within and between colors. The color palette includes a thoughtful naming convention, with each color name corresponding to its saturation (amount of color) level.
Our color palette helps designers and developers by:
Simplifying the color selection with a consistent naming convention that reflects color hierarchy and saturation volume
Ensuring a predictable contrast ratio for every UI element
Optimized dark mode color. More than just reversed light theme colors
Predictable color contrast ratio
When utilizing the Frames X UI color palette, you can expect a similar or nearly equal contrast between foreground and background elements when using shades from the same color range. This allows you to confidently and efficiently set your primary and brand colors.
For example, For optimal UI accessibility, we recommend using 500-600 for primary active elements and 50-100 for backgrounds and text colors.
Optimized dark mode
Frames X's dark mode uses a less saturated color palette to maintain accessibility and increase eye comfort in a dim environment. The palette communicates hierarchy using desaturated fill colors instead of just reversing the values from light mode.
Tip: You can switch between color modes anytime by selecting elements with color variables applied. Use the control in the right sidebar on the Layer panel to switch modes.
Tailwind & Bootstrap compatible
Our UI color palette is fully compatible with Tailwind and Bootstrap. It shares the same number of color steps, saturation levels, and naming conventions as the Tailwind palette, so transitioning to Tailwind can be seamless when using Frames X colors.
Learn more about Best practices for Figma UI color palettes.
More design resources
Consume great components
— produce great results
Frames X UI Kits help you effortlessly create and manage multiple projects and brands. With pre-built techniques, components, and templates, you'll be able to take on bigger, more profitable projects.