Color Palette System

OxyMade’s Color Palette System provides comprehensive color management with automatic shade generation, CSS variables, and real-time Oxygen synchronization.

Overview

The color system generates a complete palette from a single primary color:

• 5 semantic colors: Primary, Secondary, Tertiary, Accent, Neutral
• 11 shades per color: From background (50) to dark (950)
• 2 base colors: White and Black with RGB values
• Automatic generation: Secondary, Tertiary, and Accent colors derived from Primary

Color Structure

Semantic Colors

Shade System

Each semantic color includes 11 shade variants:

Using Colors

CSS Variables

Access colors in your CSS:

/* Base colors */
.element {
  color: var(--primary);
  background: var(--bg-primary);
}

/* Shade variants */
.card {
  background: var(--surface-neutral);
  border-color: var(--border-neutral);
}

/* Hover states */
.button:hover {
  background: var(--hover-primary);
}

Oxygen Variables

In Oxygen’s interface, use the {var- prefix:

{var-primary}
{var-bg-secondary}
{var-text-neutral}

These appear in Oxygen’s variable picker after syncing.

RGB Values

For alpha transparency, use RGB value variables:

.overlay {
  background: rgba(var(--primary-rgb-vals), 0.5);
}

Available RGB variables:

• --primary-rgb-vals
• --secondary-rgb-vals
• --tertiary-rgb-vals
• --accent-rgb-vals
• --neutral-rgb-vals
• --base-white-rgb-vals
• --base-black-rgb-vals

Color Panel

Access the color panel in the Oxygen editor toolbar for real-time editing:

1. Open Oxygen Builder
2. Click the OxyMade button in the toolbar
3. Use the color picker to adjust your primary color
4. See shade variants update in real-time
5. Save to sync with Oxygen

Color Picker Features

• Spectrum color picker for precise color selection
• Hex input for exact values
• Real-time preview of all generated shades
• Import/Export palette configurations

Syncing with Oxygen

Manual Sync

1. Go to OxyMade settings
2. Click Sync Colors with Oxygen
3. Wait for confirmation
4. Variables are now available in Oxygen

Automatic Sync

Enable the “Sync with Oxygen” toggle in settings:

• Changes to your palette automatically update Oxygen variables
• Rate limited to 10 saves per minute for performance

Sync Modes

Best Practices

Choosing a Primary Color

1. Start with your brand’s main color
2. Check that generated shades have sufficient contrast
3. Test on both light and dark backgrounds
4. Verify accessibility of text shades

Using Semantic Names

/* Good - semantic usage */
.button {
  background: var(--primary);
}

/* Avoid - hardcoded colors */
.button {
  background: #6366f1;
}

Dark Mode Considerations

The shade system is designed for light mode. For dark mode:

• Invert the shade scale usage
• bg becomes your darkest background
• dark becomes your lightest element

Color Palette Data

OxyMade stores color data in two formats:

Structured Palette

{
  "primary": {
    "base": "#6366f1",
    "shades": {
      "bg": "#f5f5ff",
      "surface": "#ededff",
      ...
    }
  }
}

Flat Palette

A lookup dictionary for quick access:

{
  "primary": "#6366f1",
  "bg-primary": "#f5f5ff",
  "surface-primary": "#ededff",
  ...
}

Troubleshooting

Colors Not Showing in Oxygen

1. Verify variables are synced (check settings)
2. Clear Oxygen’s cache
3. Refresh the builder page
4. Re-sync variables

Shades Look Wrong

1. Check your primary color’s saturation
2. Very low saturation colors may not generate visible shade differences
3. Consider using a more saturated base color

Sync Conflicts

If other plugins define similar variables:

1. Use OxyMade’s “Add New” sync mode
2. Manually review variable names in Oxygen
3. Consider namespacing custom variables

Related

• CSS Variables Reference
• Typography System
• Design Sets