Back to Plugins
Modyo Color Palette

Modyo Color Palette

Generate Modyo-style color palettes with AAA/AA contrast

web accessibilitycolor generatoraccessibilitydesignhex codescontrast ratiodesign toolscolor paletteuxuicolor picker

Plugin Preview

Modyo Color Palette preview

About this plugin

The Modyo Color Palette Generator is a powerful tool designed to help you create comprehensive color palettes in the Modyo style. This plugin not only generates a series of tints and shades based on a selected base color but also provides crucial contrast information to ensure accessibility compliance.


Features:


  • Color Picker: Easily select your base color using a convenient color picker.
  • Color Variations: Generate a palette with multiple shades and tints from your base color.
  • Accessibility Compliance: Automatically calculate and display contrast ratios for each color against white and black backgrounds. The plugin also indicates whether each color meets AAA or AA standards for large and small text as well as graphics.
  • Hex Codes and Identifiers: View the hex codes and identifiers (e.g., color-25, color-50) for each generated color.


How to Use:


  • Open the Plugin: Launch the Modyo Color Palette Generator from your Figma plugins menu.
  • Enter Color Details: Input a color name and select your base color using the color picker.
  • Generate Palette: Click the "Generate Palette" button to create a comprehensive palette.
  • Review Results: The plugin will display a vertical layout of the generated colors, each with its hex code, identifier, and contrast ratio details.


Limitations:


  • Single Base Color: The palette is generated based on a single base color. For multiple base colors, you need to run the plugin separately for each color.
  • Static Contrast Values: The contrast calculations are based on standard white and black backgrounds only.
  • Manual Adjustments: Any additional adjustments to the generated palette must be done manually in Figma.


This plugin is an essential tool for designers looking to maintain color consistency and accessibility in their projects, ensuring that all color choices are both aesthetically pleasing and compliant with accessibility standards.

Plugin Details

Version1
CreatedJune 3, 2024
Last UpdatedJune 3, 2024
Categoryshapes-colors
CreatorMatías Calderón
Stats18 installs, 5 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none

More Like This

Discover other plugins in the shapes-colors category.