Mastodawn

I like having nicely documented colors and color combinations in my design system.
Here are my 2 go to Figma plugins for that:

1. Variable color style guide takes your color variables and creates nice documentation cards.
I usually work my color scheme to make sure I can always use the darkest shade, with the lightest shade, and they have sufficient contrast to be used as text
Plugin: https://www.figma.com/community/plugin/1270740078273146018/variable-color-style-guide

Stef Walter Apr 4

2. Contrast Grid: feed your colors to the plugin, and it will create a grid of colors that you can combine, or not, depending on their accessibility contrast ratio when used together.
https://www.figma.com/community/plugin/993414361395505148/contrast-grid

Stef Walter Apr 4

For more on color and accessibility, you can check:
- Color accessibility: tools and resources to help you design inclusive products https://stephaniewalter.design/blog/color-accessibility-tools-resources-to-design-inclusive-products/
- Color Theory & Palette – Resources and Tools: https://stephaniewalter.design/blog/color-theory-palette-resources-tools-for-designers/#color-accessibility

cuan_knaggs Apr 4

@stephaniewalter was it you who shared these 2?
- https://oklch.com/#0.7,0.1,222,100
- https://thegoodcolors.com/?FO78141000

OKLCH Color Picker & Converter

OKLCH is a new way to encode colors (like hex, RGBA, or HSL)

Stef Walter Apr 4

@mensrea might be, the first one at last

cuan_knaggs Apr 4

@stephaniewalter well, if it was, thank you. they're coming in quite handy

creohn 💥Apr 4

@stephaniewalter I love colour swaps like in your first image 🖤