Articles in this section
Category / Section

How to Access and Use HEX and RGB Color Modes in the Bold Reports Designer

Published:
Updated:

Bold Reports Designer provides flexible options for customizing colors in report elements such as charts, text color, and all report items backgrounds and borders. You can set colors using a built-in color picker, which supports both HEX codes (e.g., #FF0000 for red) and decimal RGB values (e.g., 255, 0, 0).

This article explains how to access these color modes and apply them effectively.

Step 1: Access the Color Picker

The color picker is available in the properties panel for report items that support color customization, including chart legends, series, borders, backgrounds, and fonts.

  1. In the design canvas, click on the report item where you want to apply the color.
  2. Open the Properties Panel (click the Settings icon if it is not already visible).
  3. Navigate to Color Properties under Basic Settings, Advanced Options, or Appearance to locate the relevant color properties such as:
    • Background Color
    • Border Color
    • Font Color
    • Series Color (for charts)
  4. Click the color dropdown next to the properties to open the color picker.
    image.png
  • Color Picker
    image.png

Step 2: Use HEXADECIMAL Color Mode

HEX codes specify colors precisely using a six-digit hexadecimal value prefixed with a #.

  • In the Color Picker, switch to the HEX input mode.
    image.png
  • Adjust the color using the spectrum slider or hue wheel for visual selection—the HEX value will update automatically or directly enter the HEX code in the provided HEX field (e.g., #479d9c for a specific green).
  • Click Apply to set the color.
    image.png

Step 3: Using Decimal (RGB) Color Mode

Decimal RGB mode lets you define colors using Red, Green, and Blue values ranging from 0 to 255.

  • Switch to RGB mode in the color picker.
  • Enter the decimal values directly or use the RGB sliders to fine-tune the color components.
  • Optionally, adjust the Alpha (A) value to control transparency.
  • Click Apply to confirm your selection.
    image.png

Step 4: Preview and Adjust

  • Preview your report to verify that the applied color meets your design requirements. If adjustments are needed, reopen the Color Picker and modify the settings as desired.
    image.png

Download a sample report here for additional reference.

Related Articles

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied