Resin Casting Mica Powder Pigment Gram to Ounce Ratio Calculator

Overview

A professional-grade, browser-based utility designed for epoxy resin artists. This tool provides precise calculations for pigment dispersion, ensuring consistent color opacity and structural integrity in every cast. It translates complex weight ratios into actionable measurements.

Features

• Live Conversion Engine: Instant calculation between grams, ounces, and percentage-based pigment loads.
• Batch Estimator: Allows users to input the total resin weight (Part A + Part B) to calculate the exact amount of mica powder needed.
• Unit Flexibility: Toggle between Imperial (Ounces) and Metric (Grams) seamlessly.
• Mixing Guidance: Includes dynamic tips for mixing consistency and troubleshooting common issues like sticky spots or brittle cured pieces.
• Print-Friendly View: A clean interface design that allows users to capture a clean screenshot or print their recipe for the studio.

User Interface Layout

• Header: Clean, minimalist title with a subtle decorative icon.
• Input Section: Three primary fields with high-contrast labels:
  1. Total Resin Weight (input field with unit toggle).
  2. Target Pigment Load Percentage (slider with numeric input).
  3. Results Display Area (large, bold typography showing required pigment).
• Guidance Section: A collapsible accordion section explaining best practices for incorporating pigments.

Aesthetic & Design (Light Mode Only)

• Color Palette:
  • Primary Background: #FFFFFF
  • Secondary Surface: #F9FAFB
  • Text: #1F2937 (Dark Gray for readability)
  • Accent: #3B82F6 (Vibrant, professional blue)
  • Border/Dividers: #E5E7EB
• Styling:
  • Soft, modern drop shadows (elevation) on input cards.
  • Rounded corners (border-radius: 8px) for a friendly SaaS aesthetic.
  • Smooth transitions on all inputs and hover states.

Technical Implementation Constraints

• Single File: All HTML, CSS, and Vanilla JavaScript must be contained in one index.html file.
• Storage: NO localStorage, sessionStorage, or cookies. Calculations are transient and held only in memory.
• Security: No alert(), confirm(), or prompt() calls. Use hidden <div> elements as modal overlays for UI feedback.
• Responsive Design: Ensure the layout flows from 1 column on mobile to 2 columns on desktop using CSS Flexbox/Grid.
• External Assets: Use only reliable CDNs (e.g., Tailwind CSS, Google Fonts via link tags).
• Performance: High focus on instant reactivity (oninput events) to ensure the user receives immediate feedback as they adjust values.