Color Functions
Functions for manipulating and transforming colors to create dynamic, responsive visual effects in your indicators. Enhance chart readability and create professional-looking technical analysis tools.
Overview
Brightness Control
Adjust color brightness and luminosity with darken/lighten functions for creating visual hierarchy and emphasis in your indicators.
Transparency Effects
Control opacity and transparency levels to create subtle background effects, overlays, and layered visualizations without overwhelming the chart.
Functions Reference
brightness - adjust color brightness levels
brightness(color: color, amount: number): colorParameters:
- color (color) - Source color to modify
- amount (number) - Brightness adjustment (0-100, where 50 is no change)
Returns:
color (color with adjusted brightness)
Code Example:
darken - reduce color brightness/lightness
darken(color: color, amount: number): colorParameters:
- color (color) - Source color to darken
- amount (number) - Darkening amount (0-100, where 0 is no change, 100 is black)
Returns:
color (darkened color)
Code Example:
lighten - increase color brightness/lightness
lighten(color: color, amount: number): colorParameters:
- color (color) - Source color to lighten
- amount (number) - Lightening amount (0-100, where 0 is no change, 100 is white)
Returns:
color (lightened color)
Code Example:
transparency - set color transparency level
transparency(color: color, amount: number): colorParameters:
- color (color) - Source color to modify
- amount (number) - Transparency level (0-100, where 0 is opaque, 100 is transparent)
Returns:
color (color with specified transparency)
Code Example:
opacity - set color opacity level (inverse of transparency)
opacity(color: color, amount: number): colorParameters:
- color (color) - Source color to modify
- amount (number) - Opacity level (0-100, where 0 is fully transparent, 100 is fully opaque)
Returns:
color (color with specified opacity)
Code Example:
blend - mix two colors together
blend(color1: color, color2: color, amount: number): colorParameters:
- color1 (color) - First color to blend
- color2 (color) - Second color to blend
- amount (number) - Blending ratio (0-1, where 0 = color1, 1 = color2, 0.5 = equal mix)
Returns:
color (blended color result)
Code Example:
Best Practices
Color Psychology
Use green for bullish signals, red for bearish, and neutral colors for informational data. Consistent color schemes improve user experience.
Accessibility
Consider color-blind users by ensuring sufficient contrast and using patterns or shapes in addition to color for important signals.
Function Selection
Use darken() for creating shadows/depth, lighten() for highlights, opacity() for layering effects, and transparency() for subtle backgrounds. Each serves different visual purposes.