---

How to Use the Color Palette Generator

This Color Palette Generator helps you create beautiful, harmonious color schemes for your designs, websites, and branding. Follow these simple steps to generate, customize, and export your perfect palette.

---

Step 1: Choose a Base Color

🎨 Pick your starting color:

• Click the color picker (default: blue #4285F4) to select any base color.
• You can manually enter a HEX code or choose visually.

---

Step 2: Select a Color Harmony Rule

🔄 Choose how colors relate to each other:

• Monochromatic – Shades of the same hue (great for minimal designs).
• Analogous – Colors next to each other on the wheel (smooth transitions).
• Complementary – Opposite colors (high contrast, bold look).
• Triadic – Three evenly spaced colors (vibrant and balanced).
• Tetradic – Four colors in a rectangle (rich, complex schemes).
• Split Complementary – A base color + two adjacent to its complement.

---

Step 3: Apply a Variation (Optional)

✨ Adjust the mood of your palette:

• Default – Original saturation & lightness.
• Pastel – Soft, muted colors.
• Vibrant – High saturation for bold looks.
• Dark – Deeper, moodier tones.
• Light – Brighter, airy colors.

🔹 Click “Generate Palette” to apply your settings.

---

Step 4: Explore & Customize

🎨 Your generated palette appears below:

• Each color shows its name, HEX code, and preview.
• Hover over swatches to enlarge them.
• Click “Random Pair” anytime to generate a new palette.

---

Step 5: Save or Export

💾 Copy or download your palette:

• 📋 Copy Palette – Copies all HEX codes to your clipboard.
• 🖼️ Export as PNG – Downloads a styled image of your palette (great for sharing).

---

Bonus: Saved Palettes

🔖 Your recent palettes appear at the bottom:

• Click any saved palette to reload it instantly.
• (Automatically stores your last 6 palettes.)

---

Pro Tips for Best Results

✔ For websites: Use complementary/triadic for buttons & accents.
✔ For branding: Monochromatic/analogous creates cohesion.
✔ Test accessibility: Ensure enough contrast for readability.

Ready to design? Start generating your perfect palette now! 🚀

---

How to Implement Your Color Palette in CSS

Now that you’ve created your perfect color palette, here’s how to use it in your website’s CSS:

1. Defining Your Colors as CSS Variables

The best way to use your palette is by defining CSS variables (custom properties) for easy reuse:

:root {
  /* Paste your generated colors here */
  --primary: #4285f4;
  --secondary: #34a853;
  --accent: #ea4335;
  --highlight: #fbbc05;
  --dark: #202124;
  --light: #f8f9fa;
}

2. Applying Colors to Elements

Use your variables throughout your stylesheet:

/* Text colors */
body {
  color: var(--dark);
}

h1, h2, h3 {
  color: var(--primary);
}

a {
  color: var(--accent);
}

/* Background colors */
.header {
  background-color: var(--primary);
}

.button {
  background-color: var(--accent);
  color: white;
}

.highlight-box {
  background-color: var(--highlight);
}

3. Creating Color Variations

Use CSS functions to create lighter/darker versions:

.button-primary {
  background-color: var(--primary);
}

.button-primary-light {
  background-color: color-mix(in srgb, var(--primary), white 20%);
}

.button-primary-dark {
  background-color: color-mix(in srgb, var(--primary), black 15%);
}

4. Using Google Fonts with Your Palette

Pair your colors with complementary fonts:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">

body {
  font-family: 'Roboto', sans-serif;
  color: var(--dark);
}

h1, h2 {
  font-family: 'Playfair Display', serif;
  color: var(--primary);
}

5. Accessibility Considerations

Ensure proper contrast between text and background:

/* Good contrast */
.high-contrast {
  background-color: var(--dark);
  color: white;
}

/* Check contrast ratios meet WCAG standards */
.button {
  background-color: var(--primary);
  color: white; /* Contrast ratio: 4.5:1 or higher */
}

6. Dark Mode Implementation

Use your palette to create a dark theme:

@media (prefers-color-scheme: dark) {
  :root {
    --dark: #f8f9fa;
    --light: #202124;
  }

  body {
    background-color: var(--light);
    color: var(--dark);
  }
}

7. Creating a Style Guide

Document your palette for your team:

/* Style Guide */
.color-primary {
  background-color: var(--primary);
}

.color-secondary {
  background-color: var(--secondary);
}

.color-accent {
  background-color: var(--accent);
}

8. Using in WordPress

Add your CSS to:

1. Appearance > Customize > Additional CSS (for simple sites)
2. Your theme’s style.css file (for advanced customization)
3. A CSS plugin like “Simple Custom CSS”

---

Pro CSS Tips

• Use HSL format for easier color adjustments: hsl(210, 90%, 60%)
• Create utility classes for common color combinations
• Test your palette on real devices – screens render colors differently
• Consider using CSS frameworks like Tailwind if you work with many colors

---

Now you’re ready to bring your designs to life with your custom color palette! 🎨

Search

Search