colo r-a
Open Studio
User Guides & Docs

How to Use color-a

A step-by-step user manual to format, validate, convert, and visualize config payloads client-side.

1. Generate Coordinated Color Palettes

Open the Workspace Studio. The studio starts in Palette Studio mode by default. You can design custom color schemes easily:

  • Base Generation: Pick a primary color using the color picker or type a Hex value directly. Select a harmony formula (Analogous, Complementary, Triadic, Monochromatic, Split Complementary) and click Apply Harmony to automatically update the palette swatches!
  • Override Swatches: Fine-tune individual swatches (Primary, Secondary, Accent, Background, Text) directly using the picker controls to craft custom combinations.
  • Copy and Use: Hover over any swatch card in the center canvas to copy the Hex, RGB, or HSL values instantly.

2. Build Premium CSS & Tailwind Gradients

Switch to the Gradient Builder tab to create custom visual flows:

  • Flow Style: Select between Linear Directional and Radial Circle Focus styles.
  • Rotation Angle: Adjust the slider to rotate the gradient's vector angle (available for Linear mode).
  • Copy Snippets: Click the copy buttons on the code blocks to instantly get the pure CSS background definition or the Tailwind color stop configuration.

3. Verify WCAG Accessibility Contrast

Under the Contrast Checker tab, ensure your colors meet the W3C WCAG guidelines for accessibility (a11y):

  1. Live Ratio: Check the computed contrast ratio between your selected Foreground Text and Background Panel colors in real time.
  2. Standard Checks: Read the compliance indicators showing whether the ratio passes WCAG AA and WCAG AAA guidelines for both normal and large text sizes.
  3. Readability Check: Type custom text strings in the text area to see how they render visually inside the preview box.

4. Export SEO Metadata Headers

Switch to the SEO Tags tab to prepare your web application's HTML headers:

  • Details Input: Type your website's document title and meta description.
  • Browser Tab Mock: Check how your page title, favicon, and browser address bar highlight look under the selected mobile theme-color.
  • Export Meta Code: Copy the output code block to get HTML metadata tags, MsApplication tile parameters, and mobile status bar color declarations.

5. Export and Save Configs

The workspace keeps a unified serialized representation of your brand settings in the JSON editor:

Note: All operations run client-side in-memory. We never store or transmit your brand data to external databases or servers.

  • JSON Config: Copy the full serialized JSON config structure using the copy buttons in the sidebar footer or JSON editor.
  • Download: Click Export Config to download a local .json backup containing all palette stops, gradients, and metadata.