---

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 a palette for your project.

---

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.
• Change a control and choose Generate Palette to generate another 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 a palette for your project now! 🚀

---

How to Implement Your Color Palette in CSS

Now that you’ve created the selected 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; /* Verify this exact text/background pair before use */
}

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

Choosing colors for a digital planner

This generator creates color combinations, not contrast scores. Keep the Default variation to retain your base color; Dark and Light variations change generated swatches. For worked navy color pairs and a practical reading test, read Dark or Light Digital Planner? Compare Contrast and Workflow. Browse the digital planner collection when you are ready to compare layouts.