Customizing Colors

Colors shape your site's personality and brand. This guide covers the color system and how to customize your palette.

Color System Overview

New Salon uses a semantic color system:

Accessing Color Settings

1. Click Settings > Theme
2. Select Colors tab
3. See all color options

Core Colors

Background Color

The base color of your pages.

Options:

• Pure white (#FFFFFF)
• Off-white (#F8F8F8)
• Light gray (#F0F0F0)
• Custom color

Tips:

• Pure white can be harsh; try off-white
• Ensure contrast with text
• Consider your images

Foreground Color

Main text color.

Options:

• Pure black (#000000)
• Dark gray (#1A1A1A)
• Charcoal (#333333)
• Custom color

Tips:

• Pure black can be too stark
• #1A1A1A is softer, still readable
• Match warmth to background

Primary Color

Your brand/accent color.

Used for:

• Buttons
• Links
• Active states
• Highlights

Choosing:

• Use your brand color
• Ensure contrast with background
• Test against both light/dark modes

Setting Colors

Using the Color Picker

1. Click any color swatch
2. Color picker opens
3. Choose color using:
   • Color spectrum
   • Hue slider
   • Hex input
   • RGB values

Entering Specific Values

For precise colors:

1. Click the color field
2. Enter hex code: #FF5733
3. Or RGB: rgb(255, 87, 51)
4. Press Enter to apply

Using Brand Colors

If you have brand guidelines:

1. Get hex codes from your guide
2. Enter primary brand color as Primary
3. Use complementary colors for Secondary
4. Maintain your brand palette

Color Palette Tips

Creating Harmony

Build a cohesive palette:

1. Start with Primary - Your main brand color
2. Derive Secondary - Lighter or complementary
3. Choose Background - Works with both
4. Set Text - Readable on background

Color Relationships

Tools for Palettes

External resources:

• Coolors.co
• Adobe Color
• ColorHunt
• Muzli Colors

Contrast and Accessibility

Why Contrast Matters

Good contrast ensures:

• Text is readable
• Buttons are visible
• All users can access content
• WCAG compliance

Checking Contrast

Testing Contrast

1. Use browser dev tools
2. Or online contrast checkers
3. Check text on all backgrounds
4. Test buttons and links

Dark Mode Colors

Separate Palettes

Dark mode needs different values:

Setting Dark Mode Colors

1. Go to Colors > Dark Mode
2. Configure each color for dark
3. Test the dark mode toggle

Tips for Dark Mode

• Don't use pure black (#000)
• Reduce white brightness
• Adjust primary for dark backgrounds
• Test buttons and links

Color Variables

How Variables Work

Colors are stored as CSS variables:

--color-background: #ffffff;
--color-foreground: #1a1a1a;
--color-primary: #3b82f6;

Benefits

• Change once, update everywhere
• Easy theme switching
• Consistent styling
• Dark mode support

Advanced Color Options

Gradient Backgrounds

For gradient backgrounds:

1. Go to Advanced > Custom CSS
2. Add gradient CSS
3. Override background variable

Color Opacity

Create transparent versions:

• Use RGBA: rgba(59, 130, 246, 0.5)
• Or hex with alpha: #3b82f680

Semantic Colors

Additional semantic colors:

Testing Your Colors

Preview Checklist

After changing colors:

• Text readable on all backgrounds
• Buttons clearly visible
• Links distinguishable
• Images look good
• Dark mode works
• Mobile looks right

Common Issues

Text hard to read:

• Increase contrast
• Darken text or lighten background

Colors clash with images:

• Use more neutral backgrounds
• Consider image editing

Primary too subtle:

• Increase saturation
• Adjust brightness

Next Steps

• Typography Settings - Font configuration
• Dark Mode - Light/dark toggle
• Choosing a Theme - Theme presets