Color plays a crucial role in how users perceive and interact with your project. The Color Palette feature gives you complete control over the visual design of the Bill Explainer, allowing you to customize colors for different UI components. A well-structured color scheme enhances user experience, reinforces branding, and ensures clear readability of important financial information.
Choosing Colors
While customizing your colors, you have multiple options:
Scroll the Color Bar: This allows you to manually browse and select the right shade from a spectrum of colors.
Use Color Input Fields: If you prefer precision, you can enter exact color values using one of these formats:
RGB (Red, Green, Blue): Enter numeric values (0-255) for each color component.
For Example - (255, 87, 51) for a bright orange.
HEX Code: A six-character alphanumeric code prefixed with #, representing the RGB values.
For Example - #FF5733.
HSV (Hue, Saturation, Value): Adjust the intensity of the color by modifying its hue, saturation, and brightness value.
Hue (H): Represents the color itself, ranging from 0 to 360 degrees, where 0° is red, 120° is green, and 240° is blue.
Saturation (S): Determines the purity or intensity of the color, ranging from 0% to 100%. 0% saturation is grayscale, while 100% is the most vibrant color.
Value (V): Represents the brightness or lightness of the color, also ranging from 0% to 100%. 0% value is black, and 100% is the brightest.
For Example - (H=60°, S=50%, V=80%) This HSV value represents a moderately saturated, fairly bright shade of yellow.
Main Colors – Defining the Core Theme
The Main Colors are the foundation of your visual identity. These affect primary design elements and key financial indicators within the Bill Explainer.
Primary: The dominant brand color used across the interface. It represents your brand identity.
Neutral: A balance color used for backgrounds, borders, and secondary elements to maintain a clean and structured design.
Promotional: Highlights special offers, deals, or marketing content.
Bill Higher: Indicates when a bill amount has increased compared to the previous cycle.
Bill Lower: Represents a decrease in the bill amount, helping users identify savings.
Past Due: A warning color for overdue balances, ensuring visibility of unpaid bills.
Credit: Displays when a user has a credit balance on their account.
Charts: Adjusts the colors used in graphical data representations.
Assigned Colors – Fine-Tuning the UI
The Assigned Colors section allows you to define colors for different UI components, ensuring a cohesive and branded experience.
Custom colors are applied to certain styles. If you want to revert back to the default colors, you can click the Reset All Styles button.
Backgrounds
Global Background: The main background color of the interface, affecting the overall look and feel.
Text
Core Text: The primary text color used throughout the interface.
Muted Text: A softer, less prominent text color for secondary information.
Highlight Text: A color used for drawing attention to key information.
What Changed Button
Background & Text: Adjusts the color scheme for changes in What’s Changed? button.
Summary
Background (Faded & Regular): Affects the summary section background, differentiating it from other areas.
Text & Muted Text: Controls readability within the summary area.
Pay Button
Text & Background: Defines the appearance of the Pay button, ensuring it stands out for user actions.
Promotional
Background, Text & Highlight: Customizes colors for promotional messages, making them engaging without overwhelming the interface.
Card Backgrounds
Card Background: The primary color for cards displaying bill information.
What Changed Background: Color variations for tracking changes between current and previous billing cycles.
Dividers: Adjusts the separators between sections for improved clarity.
Card Icons
Card Icon & Background: Defines the look of icons used inside cards.
Card Actions
Action Foreground & Background: Colors used for interactive elements inside cards.
Expand Icon & Background: Defines colors for expandable sections within the UI.
Past Due & Credit Indicators
Text, Divider, Background: Ensures overdue amounts and credits are clearly distinguishable.
Footer
Text & Hover Text: Affects the footer’s typography.
Background: Defines the footer’s background color for consistency.
Bill Indicators (Higher vs. Lower Amounts)
Foreground, Background, & Text: Helps differentiate when a bill is higher or lower than before.
Charts
Faint, Muted, Strong: Customizes the color intensity for graphical data representations.
Balance Zero
Background, Text, Divider: A color scheme for when the bill balance is zero, ensuring a distinct but non-intrusive display.