Palette Designer

Palette Designer

The Palette Designer is a color management tool built for comic and series production. Generate palettes from a single seed color, extract colors from reference images, check contrast ratios, and apply palettes to your series.

Accessing the Palette Designer

• From the sidebar: click Palette
• From a series detail: click the Palette tab

Designer Tab

The main designer view lets you generate palettes from a seed color:

1. Pick a seed color using the color picker or enter a hex value directly
2. Choose a color theory — Select from multiple harmony types:
   • Complement
   • Analogous
   • Triadic
   • Split-Complement
   • Tetradic
   • Monochromatic
3. The Generated Palette preview shows the full color set with role labels (primary, secondary, tertiary, etc.)
4. Toggle Tints & Shades to see the full tonal range of your seed color
5. Color Harmonies expandable section shows all harmony variations with contrast ratios

Saving a Palette

1. Enter a name in the Palette name field
2. Click Save to add it to your saved palettes

My Palettes Tab

View, manage, and apply your saved palettes:

• Expand a palette to see full details and editing options
• Edit any color swatch by clicking it
• Duplicate or Delete palettes
• Apply a palette to a series — this replaces the series’ current palette
• Export palettes in multiple formats (CSS, SCSS, JSON, etc.)
• Paper & Print Settings — Adjust palette colors for different paper types:
  • Newsprint
  • Coated Gloss
  • Uncoated
  • Recycled
  • Standard Binder
  • Digital Screen

The paper adjustment simulates how your palette colors shift on different print media.

Saving to Database

Click Save to Database to persist palette changes to the series. This creates or updates a Palette record linked to your series.

Export Formats

The Palette Designer supports exporting in:

• CSS Variables — Ready to drop into a stylesheet
• SCSS Variables — For Sass-based workflows
• JSON — For programmatic use
• Figma Tokens — Design token format
• ASE — Adobe Swatch Exchange for Photoshop/Illustrator
• CLR — Apple Color List format

Extract from Image Tab

Pull colors directly from reference artwork:

1. Upload an image file (JPG, PNG, WebP)
2. Set the number of colors to extract (default: 8)
3. Click to extract — colors are analyzed and presented with hex values and prominence percentages
4. Select specific colors to use or deselect unwanted ones
5. Click Use as Seed to feed extracted colors into the Designer tab
6. Click Save as Palette to create a palette from the extracted colors

Contrast Check Tab

Verify that your color combinations meet accessibility standards:

• Add any number of hex colors
• The tool checks all pairs and displays WCAG contrast ratios
• Each pair shows a rating: AAAA (7:1+), AAA (4.5:1+), AA (3:1+), or Fail
• Results show both normal and large text compliance

How to Use

1. Add colors by entering hex values (e.g., #0F1113)
2. Each pair is checked automatically
3. Use the results to ensure your character text on background, or UI foreground on surface, meets accessibility thresholds