1. Logo Brand Colors (Primary Palette)
These colors were extracted directly from the logo and should form the foundation of the brand identity. We’re certainly open to additional complementary colors because we know building a website with only three colors will cause limitations and accessibility issues (because of contrast).
| Color Name | Hex Code | Sample |
|---|---|---|
| Dark Orange (Hammer) | #D0602A | |
| Light Olive Green (Wrench) | #A3AD53 | |
| Cool Gray (Screwdriver) | #A1A1A1 | |
| Black (Outline/Text) | #000000 | |
| White (Background) | #FFFFFF |
The dark orange functions as the primary brand color. We realize these colors are limited, and are open to complementary colors, which we’ll go into more below. You’ll notice how some of the colors are brighter in the current website colors below, and that’s fine.
2. Current Website Colors (Legacy Theme)
These colors were extracted from the existing homepage design.
| Color Name | Hex Code | Sample |
|---|---|---|
| Muted Olive Header | #B9B7A5 | |
| Coral CTA / Accent | #F3743A | |
| Light Tan Section BG | #F6F4EF | |
| Dark Charcoal Footer | #2D2C2A | |
| Pale Olive Footer Bar | #C5C7A0 |
These are functional but include a few contrast issues (especially in the header and for link colors). Small improvements will boost legibility and consistency.
3. Suggested / Complementary Colors
These colors offer better contrast, more versatility, and stronger accessibility—especially for buttons, links, and section backgrounds.
| Color Name | Hex Code | Sample | Suggested Use |
|---|---|---|---|
| Rich Orange (Primary CTA) | #D25A28 | High-contrast buttons and CTAs | |
| Accessible Link Blue | #1D4ED8 | Inline links and navigation | |
| Deep Charcoal | #333333 | Body or heading text | |
| Soft Sand | #F4F1ED | Section backgrounds | |
| Warm Beige | #E8DCC5 | Alternating content areas | |
| Sage Green | #8F9D6A | Secondary CTA or highlights | |
| Brick Red | #B04A2E | Hover states or subtle accents |
Usage Guidelines & Accessibility Notes
- Primary CTA Color:
Use#D25A28for schedule buttons and form submissions for better contrast and consistency across devices. - Link Colors:
Avoid using orange tones for inline links. Use#1D4ED8or similar accessible blues to distinguish clickable text clearly. - Text & Section Contrast:
Be cautious with low-contrast pairings (e.g., light tan with coral or muted olive with white text). Kadence allows section-specific color control to adjust for this. - Kadence Theme Setup Tips:
- Set the brand and complementary colors as your Global Palette in Kadence Theme Pro.
- Define Global Button Styles and Link Color Settings to match these recommendations.
- Use Kadence Blocks to assign background, heading, and text colors per section based on this guide.
Implementing these small visual changes will improve legibility, consistency, and trust while helping convert more visitors into leads.