Color Kitchen

About this plugin

Create recipes for working with colors, color variables and styles systematically, directly on the canvas where you can see what's happening.

Demo file

How to

1. Run Create components to create a page with components needed for the Color Kitchen plugin
2. Place instances of the Color Kitchen Recipe component on your canvas.
3. Select a color, color variable or a color style as source by applying it to the first ⚪️ Swatch Layer on the left side.
4. Change the ⚙️ Modifier components and the modifiers 🎚 Value as you please. You can also detach the recipe to be able to move things around more freely within the recipe. Add as many ⚙️ Modifiers and ⚙️Color Swatches as you want.
5. Select one or more recipes and Run recipes to see the modifiers changing all the color swatches on their right. Or run all recipes on the page by not selecting anything before running the command.
6. If you want to link two or more variables or styles create or apply existing variables or styles to one or more ⚪️ Swatch Layers on the right side.

Additional features

1. Add ⚙️Print instances to the recipe to see color values, contrast ratios, variable and style names or descriptions printed on the canvas.
2. Change the variant properties of ⚙️Color Swatch layers to override specific color values in styles with multiple fills, effects and gradients. You need to specify which of the effects, fills or color stops in a gradient you want to override by providing the coordinates as a number. 0 is the first fill/effect. In the case of gradients you need to provide two numbers, the number of the fill and the number of the color stop, like that: 0:1

Use cases

1. Variation: Link multiple variables or styles with varying opacity or luminance to one main variable or style.
2. Inheritance: I.e. link colors in shadows or gradients to your main color variables or styles.
3. Exploration: Try different treatments and color models to create palettes.
4. Documentation & Collaboration: Make color choices traceable and reproducible.
5. Theming: Make all colors dependent on a few accent colors.

Available color transformations

1. Brighten/darken
2. Saturate/desaturate
3. Channels: Set or modify a value of a single channel (i.e. red or hue or lightness)
4. Opacity: Set or add to/subtract from opacity
5. Luminance: Set to make contrasts work
6. Mix two colors
7. Blend two colors using different blend modes
8. Contrast Minimum: Darken or brighten, until the given contrast ratio in relation to a given second color is met. (Ignores opacity)

Sources

1. Most color functions are using chroma-js, check the docs for more information.
2. Built with Create Figma Plugin by Yuan Qing Lim
3. Node Decoder by Gavin Mc Farland was a huge help

Roadmap

1. Modifiers to work with additional useful color models like HSLuv or Material Designs' HCT
2. Generate new styles in addition to syncing existing ones
3. Cooking with noodles: Use prototyping links or maybe FigJam's connectors to connect color swatches
4. Add support for variables
5. Additional guidance within the component descriptions.
6. More comfortable ways to use a color for multiple shadows
7. Add demo file
8. Modifiers that ensure a certain contrast threshold minimum against a selected background color.
9. Add label elements that print color values and style names to the canvas for readability