كيفية توليد لوحة ألوان كاملة من لون واحد

Every color palette, no matter how sophisticated, starts with a single decision: the first color. Whether that is a brand color pulled from a logo, a hex code picked from a photograph, or a carefully chosen hue that matches a particular mood — one color is all you need to build an entire design system.

This guide covers the complete process: starting from a single hex code, expanding it into complementary and analogous relationships, generating a full shade scale, and exporting a palette that is ready to use in your CSS, Tailwind config, or design tool. ColorFYI's Palette Generator and Shade Generator handle the heavy lifting at each step.

Starting With One Color: The Philosophy

A strong color palette is not arbitrary — it is derived. Grounding your entire palette in a single starting color creates visual coherence because all the colors share a mathematical relationship. When colors are related, the eye reads them as belonging together, which is what gives well-designed UIs their sense of calm intentionality.

The alternative — picking colors independently — is how you end up with palettes that feel chaotic: colors that all look fine individually but clash when placed side by side.

Your starting color (often called the primary or brand color) will become the foundation for:

1. Complementary colors — opposite on the color wheel, for contrast and emphasis
2. Analogous colors — adjacent on the wheel, for harmony and supporting tones
3. Shade scales — lighter and darker variations of each color, for backgrounds, hover states, text, and borders
4. Neutral/semantic colors — grays and functional colors (success, warning, error) that complement the primary

Choosing Your Starting Color

If you are starting from scratch, the hue you choose sets the emotional temperature of the entire design:

Once you have a hue in mind, consider saturation and lightness. A good primary color for a design system is usually:

• Medium-high saturation (60–90%) — vivid enough to be distinctive but not overwhelming
• Medium lightness (40–60%) — versatile enough to have both light and dark shades

A color like #3B82F6 (Tailwind blue-500) is a classic example: HSL 217°, 91%, 60% — clearly blue, clearly saturated, neither too dark nor too pale.

Complementary Color Pairs

A complementary color sits directly opposite your starting color on the color wheel — 180° away in hue. Complementary pairs create the highest contrast between two hues and are naturally attention-grabbing.

Calculating the complement

If your starting color is hsl(217, 91%, 60%) (blue), the complement is at hue 217 + 180 = 397 → 37°, which is an orange-yellow.

Using complementary colors wisely

Complementary colors work best when one dominates and the other accents. Using them at equal weight creates visual tension that is hard to sustain across an entire interface. The classic ratio is 70/30 or even 90/10 — your primary color carries the design, and the complement appears in small doses for emphasis, highlights, or CTAs.

The Palette Generator at ColorFYI calculates complementary, analogous, triadic, and other harmonies automatically from any hex code you input.

Analogous Colors: Expanding the Family

Analogous colors are neighbors on the color wheel — typically within 30° to 60° of your primary hue on each side. They are naturally harmonious because they share visible color relationships.

Building an analogous group

Starting from hsl(217, 91%, 60%) (blue):

• 60° left: hsl(157, 91%, 60%) — a teal/cyan → #3BF6C6
• 30° left: hsl(187, 91%, 60%) — a sky blue → #3BC0F6
• Primary: hsl(217, 91%, 60%) — blue → #3B82F6
• 30° right: hsl(247, 91%, 60%) — indigo → #5D3BF6
• 60° right: hsl(277, 91%, 60%) — violet → #9B3BF6

An analogous group gives you a family of colors that can serve different roles without fighting each other:

• Teal for success states
• Sky blue for information/link states
• Blue (primary) for CTAs and primary actions
• Indigo for active/selected states
• Violet for decorative accents

Adjusting saturation and lightness within the group

Reducing saturation in the analogous colors while keeping the primary vivid creates a natural hierarchy — the supporting colors feel like part of the same family but do not compete with the primary.

Shade Generation: From One Color to Ten

A shade scale takes a single color and generates a range of lighter and darker variants, typically numbered from 50 to 950 (following the Tailwind CSS convention) or 100 to 900.

The scale allows you to use the same color at different weights for different purposes:

How shade generation works

A naive approach to generating shades — simply adjusting the L value in HSL — produces results that look perceptually uneven because HSL is not perceptually uniform. Better shade generators use OKLCH or OKLab color spaces to produce steps that look visually consistent.

ColorFYI's Shade Generator produces a full 50–950 scale from any input color, using a perceptually uniform algorithm so the steps look even to the human eye.

For example, starting from #3B82F6 (blue-500), you get:

Generating shades for every color in your palette

You need a shade scale for at least:

• Primary color — your brand/main action color
• Neutral/gray — for backgrounds, borders, text, and surfaces
• Semantic colors — typically success (green), warning (yellow/amber), error (red), info (blue)

Many teams generate a neutral gray that is slightly tinted toward the primary hue, which creates a warmer or cooler gray that feels intentional rather than generic.

Assembling the Complete Palette

Once you have generated complementary/analogous colors and shade scales for each, your complete palette structure looks like this:

palette/
├── primary/     blue-50 through blue-950
├── accent/      orange-50 through orange-950  (complementary)
├── teal/        teal-50 through teal-950       (analogous)
├── neutral/     gray-50 through gray-950       (slightly tinted)
└── semantic/
    ├── success/ green-50 through green-950
    ├── warning/ amber-50 through amber-950
    ├── error/   red-50 through red-950
    └── info/    sky-50 through sky-950

This structure gives you hundreds of specific, named color values — all derived from your original single color — while keeping everything coherent.

Exporting Your Palette

For Tailwind CSS

ColorFYI's Shade Generator can export your generated scales directly as a Tailwind CSS configuration object:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#EFF6FF',
          100: '#DBEAFE',
          200: '#BFDBFE',
          300: '#93C5FD',
          400: '#60A5FA',
          500: '#3B82F6',
          600: '#2563EB',
          700: '#1D4ED8',
          800: '#1E40AF',
          900: '#1E3A8A',
          950: '#172554',
        },
      },
    },
  },
}

For CSS custom properties

:root {
  --color-brand-50:  #EFF6FF;
  --color-brand-100: #DBEAFE;
  --color-brand-200: #BFDBFE;
  --color-brand-300: #93C5FD;
  --color-brand-400: #60A5FA;
  --color-brand-500: #3B82F6;
  --color-brand-600: #2563EB;
  --color-brand-700: #1D4ED8;
  --color-brand-800: #1E40AF;
  --color-brand-900: #1E3A8A;
  --color-brand-950: #172554;
}

For design tools

ColorFYI's Palette Generator displays all generated colors with their hex codes, making it straightforward to manually add them to Figma's color styles or any other design tool's swatch library.

Validating Your Palette for Accessibility

Before shipping a palette, verify that the key contrast pairs meet WCAG requirements. The most important combinations to check:

• Primary-700 text on primary-50 background — for tinted text areas
• White text on primary-600 — for filled buttons
• Neutral-700 text on white — for body text
• Error-700 text on error-50 — for inline error messages

Use ColorFYI's Contrast Checker to verify each pair. A well-generated shade scale will make this easier because the numeric steps give you a predictable relationship between lightness levels.

As a general guideline for a shade scale generated with perceptual uniformity: - A 600 shade on white typically achieves 4.5:1+ for normal text (WCAG AA) - A 700 shade on white typically achieves 7:1+ for WCAG AAA - A 100 shade as a background with 700 shade text typically passes AA for normal text

Key Takeaways

• Every complete color palette can be derived from a single starting color using mathematical color relationships.
• Complementary colors (180° away on the wheel) create high-contrast accent pairs — use them sparingly for emphasis.
• Analogous colors (30–60° neighbors) create harmonious families suitable for supporting roles in a UI.
• Shade generation expands each hue into a numbered scale (50–950) suitable for backgrounds, borders, hover states, text, and more.
• Use a perceptually uniform algorithm (like the one in ColorFYI's Shade Generator) to ensure steps look visually even across the scale.
• Generate shade scales for your primary, neutral/gray, and semantic colors (success, warning, error, info).
• Export generated palettes as Tailwind config or CSS custom properties for immediate use in your project.
• Always validate key contrast pairs using a Contrast Checker before finalizing your palette.