Frames X Color Palette — Powered by Variables

$0+
1 rating

Frames X Color Variables

This versatile and flexible color palette is ideal for creating accessible user interfaces. Frames X is powered by Figma variables, providing light and dark color palettes with a consistent and balanced contrast ratio. This free download includes:

Precise color contrast ratio
Frames X utilizes current web content accessibility guidelines (WCAG) with post-processing of the APCA model for each color to calculate the best color contrast based on modern scientific research on color perception. 



Frames X color palette aims to ensure a consistent contrast vs. brightness ratio for each color in the file, with each color name corresponding to their contrast ratio value inside the range. This means you can expect the same or similar level of contrast between foreground and background elements using colors from the same color range. Allowing you to design projects confidently and efficiently set primary and brand colors.



Integrated dark mode
The file contains dark mode colors emphasizing less saturated colors over saturated light mode colors to help you quickly establish light and dark themes for your projects. You can also publish the file to your team library and take advantage of having two modes available simultaneously in any of your projects.


Note: You can switch between modes by selecting any element with color variables applied. You can spot the control in the right sidebar on the Layer panel.

Tailwind-compatible
Frames X color variables are fully compatible with TailwindUI, sharing the same number of colors, brightness levels, and naming convention.

---


Licensed under CC BY 4.0

$
I want this!
75 downloads

Frames X Color Variables

File format
.fig
Size
35.4 MB

Ratings

5.0
(1 rating)
5 stars
100%
4 stars
0%
3 stars
0%
2 stars
0%
1 star
0%
$0+

Frames X Color Palette — Powered by Variables

1 rating
I want this!