Skip to content

Color String Formats

Peakhour supports multiple formats for specifying colors throughout the Image Optimization API.

Supported Color Formats

1. CSS Named Colors

We support over 140 standard color names based on the colors supported by the X Window System and most web browsers. Color names are case-insensitive, so red and Red both specify pure red.

Examples: - red - blue - green - white - black - lightgray - darkblue - transparent

2. Hexadecimal Color Codes

Specified as #rgb or #rrggbb format.

Examples: - #ff0000 - Pure red - #00ff00 - Pure green
- #0000ff - Pure blue - #fff - White (shorthand) - #000 - Black (shorthand) - #f0f0f0 - Light gray

3. RGB Functions

Specified as rgb(red, green, blue) with values ranging from 0 to 255, or as percentages (0% to 100%).

Examples: - rgb(255, 0, 0) - Pure red - rgb(100%, 0%, 0%) - Pure red (percentage) - rgb(240, 240, 240) - Light gray - rgba(255, 0, 0, 0.5) - Semi-transparent red

4. HSL Functions

Specified as hsl(hue, saturation%, lightness%).

Parameters: - Hue: Angle between 0 and 360 (red=0, green=120, blue=240) - Saturation: 0% (gray) to 100% (full color) - Lightness: 0% (black) to 50% (normal) to 100% (white)

Examples: - hsl(0, 100%, 50%) - Pure red - hsl(120, 100%, 50%) - Pure green - hsl(240, 100%, 50%) - Pure blue - hsla(0, 100%, 50%, 0.7) - Semi-transparent red

Usage Examples

In Fill Operations

image.jpg?w=500&h=400&fit=fill&fill_color=lightblue
image.jpg?w=500&h=400&fit=fill&fill_color=#F0F8FF
image.jpg?w=500&h=400&fit=fill&fill_color=rgb(240,248,255)

In Text Overlays

image.jpg?txt=Hello&txt_color=red
image.jpg?txt=Hello&txt_color=#FF0000
image.jpg?txt=Hello&txt_color=rgb(255,0,0)

In Border Colors

image.jpg?border=5&border_color=navy
image.jpg?border=5&border_color=#000080
image.jpg?border=5&border_color=hsl(240,100%,25%)

Best Practices

For Web Compatibility

  • Use hex codes for precise color matching
  • Named colors for common, standard colors
  • RGB/RGBA for transparency effects
  • HSL for color relationships and adjustments

For Design Consistency

  • Document your brand colors in hex format
  • Use consistent color formats across your application
  • Test colors across different devices and displays
  • Consider accessibility and color contrast requirements

Common Color Values

Color Name Hex Code RGB Values
White #FFFFFF rgb(255,255,255)
Black #000000 rgb(0,0,0)
Red #FF0000 rgb(255,0,0)
Green #008000 rgb(0,128,0)
Blue #0000FF rgb(0,0,255)
Gray #808080 rgb(128,128,128)
Light Gray #D3D3D3 rgb(211,211,211)
Dark Gray #A9A9A9 rgb(169,169,169)
Transparent transparent rgba(0,0,0,0)