HCT Palette

About this plugin

Create accessible color palettes for your design system in no time, with the help of HCT, a perceptual uniform color space.

How to Use:

1. Input Your Base Color: Enter a color in HEX, RGB, or HSL format, and the plugin will automatically generate the corresponding HCT color.
2. Name Your Palette: Give your palette a descriptive name such as “primary,” “success,” or “danger.”
3. Customize Tones: The tool generates tones from 0 to 100 by default, in increments of 10. To add custom tones, simply input the desired value and press enter.
4. Remove Tones: Hover over any tone and click the “X” to remove it from the palette.
5. Add to Canvas: Click the "Add to Canvas" button to place the color palette directly onto your Figma canvas.
6. Add to Variables: Click the "Add to Variables" button to add the colors palette as Figma's variables.

Check out the article Building an Accessible Color System to learn more about creating and refining color palettes, and building an accessible color system out of it.

HCT Color Space:

HCT (Hue, Chroma, Tone) is a perceptually uniform color space developed by Google. It combines the CAM16 model for hue and chroma with the CIELAB (D65) color space's tone (lightness), ensuring consistent visual representation across hues. By converting complex contrast ratios into simple tonal differences, HCT makes it easy to meet accessibility standards—just select colors with enough tonal contrast!

Explore More on HCT:

1. The Science Behind HCT and Color Design
2. Handbook of Color Psychology