Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

flexcodelabs/rangi-figma

Repository files navigation

rangi

A Figma plugin to help generate hues, tints, and/or shades

Features

  • Generate hues from a given color.

  • Generate tints from a given color

  • Generate shades from a given color

How it works

Generating Hues

rangi takes a color input and an interval value. It converts the color to HSL(Hue, Saturation, Light) value and plus or minus the interval value from the H value until it's either greater or equal to 0 or less or equal to 359. The max is set to 359 because some color values would give a black color when they hit 360.

Generating Tints

To generate Tints, rangi takes the initial color, converts it to HSL(Hue, Saturation, Light) value adds the interval value to the L value until the L value is less or equal to 100.

Generating Shades

Shades generation is similar to tints generation except instead of adding the interval value to the L value, rangi substracts it until the L value is less or equal to 0.

Todo & Roadmap

If the plugin gains traction, the plan is to do the following:

  • Refactor code
  • Add ability for users to configure the generated frames, things like size, frame orientation, shape, naming, etc.

Assets & Links

UI design of the plugin: https://www.figma.com/community/file/1157058671138458897

Plugin in Figma community: https://www.figma.com/community/plugin/1153959136228678599

Built and maintained with ❤ by Flexcode Labs

About

A Figma plugin to help generate hues, tints, and/or shades

Topics

Resources

Stars

Watchers

Forks

Packages

Contributors

AltStyle によって変換されたページ (->オリジナル) /