Updating your global color palette helps you maintain consistent branding across your entire website. Setting this up early makes it easier to manage and adapt your design as your business evolves.
⚠️ Important: Always Use Global Colors
When editing your site, you’ll often see color pickers for backgrounds, text, buttons, links, and more.
Always select colors from the Global options, not by entering a custom hex code.
Why this matters:
- Global colors keep your site consistent and on-brand.
- If you update your brand colors later, your whole site updates automatically.
- Manual hex codes create inconsistencies that require manual cleanup.
This applies to:
- Text and headings
- Backgrounds
- Links and buttons
- Block styling
- And more
Pro Tip: If you’re about to pick a color, ask: Can I use a global color instead? The answer is almost always yes.
Step 1: Open Global Styles
How to Get There
- In your Oh My Hi dashboard, go to Settings.
- Click on Global Styles.
- If the styles panel isn’t open yet, click to expand it.
Step 2: Access the Color Palette
- In the styles panel, click on Colors.
- Then expand the Palette section to view your current set of global colors.
Step 3: Understand the Default Color System
Default Color Categories
The Oh My Hi template includes five core base colors:
- Base – Your primary background color (usually white or light)
- Contrast – Used for text and other high-visibility elements
- Action – Used for links, buttons, and calls-to-action
- Accent – A secondary brand color that adds decorative flair or highlights
- Neutral – A foundational system color for layout and contrast
Note: The Neutral color and its shades should not be changed. You’ll always want shades of gray for various highlights and to break up pages.
Built-in Shades for Each Color
Each of the five color categories (except Base) has these five shades:
- Ultra Light
- Light
- Dark
- Ultra Dark
- Hover
These shades give you visual flexibility while keeping everything aligned with your brand.
Step 4: Customize Your Palette
- Click on any color swatch in the palette to edit it.
- Use your brand’s hex codes or the color picker to define each color. Note the HSL values for the main color.
- Repeat for each category and its shades, except for Neutral, which you should leave as-is.
- For the shades, you should only need to enter the H and S values of the main color and leave L as-is or adjust only slightly as desired.
Important: When editing other parts of your site, never enter custom hex color codes directly. Always pick from the Global options to ensure site-wide consistency.
Step 5: Customize Buttons, Links, and Text (Optional)
Buttons and Links
Oh My Hi uses the Action color to style all buttons and links by default.
- If you change the Action color, all buttons and links will update automatically.
- You can also customize button styles in the Block Settings, but it’s best to stick with global colors to keep everything consistent.
Text and Headings
Text uses the Contrast color by default. You can change this in your palette to update all text colors site-wide.
Wrap-Up
You’ve now updated your global color palette in Oh My Hi. This will make future updates easier, keep your design consistent, and help your brand shine through on every page.
What’s Next?
Open a page or post and check how your updated palette applies to buttons, text, and backgrounds. If anything looks off, revisit your palette and adjust the global color settings.