DeMol

Color utilities for molecular visualization and styling.

Color Schemes

Element Colors

Standard colors for chemical elements

Custom Schemes

User-defined color schemes and gradients

Color Configuration

interface ColorConfig {
  scheme: 'element' | 'custom';    // Color scheme type
  colors?: {                       // Custom color mapping
    [key: string]: string;        // Element/feature to color
  };
  gradient?: {                     // Gradient settings
    start: string;                // Start color
    end: string;                  // End color
    steps?: number;               // Number of gradient steps
  };
  opacity?: number;               // Global opacity
}

Color Functions

getElementColor

Get color for chemical element

function getElementColor(element: string): string {
  const colors = {
    'C': '#909090',  // Carbon
    'N': '#0000FF',  // Nitrogen
    'O': '#FF0000',  // Oxygen
    'H': '#FFFFFF',  // Hydrogen
    'P': '#FFA500',  // Phosphorus
    'S': '#FFFF00',  // Sulfur
    // ... more elements
  };
  return colors[element] || '#808080';
}

createGradient

Create color gradient

function createGradient(start: string, end: string, steps: number): string[] {
  const startRGB = hexToRGB(start);
  const endRGB = hexToRGB(end);
  const gradient = [];
  
  for (let i = 0; i < steps; i++) {
    const t = i / (steps - 1);
    const r = Math.round(startRGB.r + (endRGB.r - startRGB.r) * t);
    const g = Math.round(startRGB.g + (endRGB.g - startRGB.g) * t);
    const b = Math.round(startRGB.b + (endRGB.b - startRGB.b) * t);
    gradient.push(rgbToHex(r, g, b));
  }
  
  return gradient;
}

adjustOpacity

Adjust color opacity

function adjustOpacity(color: string, opacity: number): string {
  const rgb = hexToRGB(color);
  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
}

Example

// Create color scheme
const colors = new ColorScheme({
  scheme: 'custom',
  colors: {
    'protein': '#4CAF50',
    'ligand': '#FFC107',
    'water': '#2196F3'
  },
  gradient: {
    start: '#FF0000',
    end: '#00FF00',
    steps: 10
  },
  opacity: 0.8
});

// Get element color
const carbonColor = colors.getElementColor('C');

// Create gradient
const gradient = colors.createGradient('#FF0000', '#00FF00', 5);

// Adjust opacity
const transparentColor = colors.adjustOpacity('#FF0000', 0.5);

Colors