What is the 60-30-10 rule in color design?

The 60-30-10 rule is a classic decor and web design principle that helps create a balanced color palette. It states that 60% of the room (or website) should be a dominant color, 30% should be a secondary color or texture, and the last 10% should be an accent color.

How do I ensure my color palette is accessible?

To ensure accessibility, you must check the contrast ratio between your text color and background color. The WCAG guidelines recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text to ensure readability for users with visual impairments.

What is the difference between RGB and CMYK?

RGB (Red, Green, Blue) is an additive color model used for digital screens, where light is added to create color. CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used for printing, where ink subtracts brightness from white paper.

Why do colors look different on different screens?

Colors look different because monitors have different color gamuts, calibration settings, and panel technologies (IPS, TN, OLED). Also, the lighting in your room and your viewing angle can affect how you perceive colors on a screen.

What are complementary colors?

Complementary colors are pairs of colors that are directly opposite each other on the color wheel. When placed next to each other, they create the strongest possible contrast for those two colors, making the design pop.

Free Color Palette Generator

Understanding Color Theory & Palettes

A color palette generator is an essential tool for designers, developers, and artists. It removes the guesswork from selecting colors by using mathematical formulas based on the color wheel to create harmonious combinations. Whether you are designing a website, a logo, or painting a room, understanding how colors interact is key to creating a visually appealing result.

How This Tool Works

This tool uses the HSL (Hue, Saturation, Lightness) color model to calculate palettes. Unlike RGB (Red, Green, Blue), which is better for screen rendering, HSL is more intuitive for color manipulation because it separates the color "family" (Hue) from its intensity (Saturation) and brightness (Lightness).

Here is the breakdown of the calculation logic:

The Math Behind the Magic:
1. Convert Hex Input → RGB → HSL.
2. Apply harmony offsets to the Hue (H) value.
3. Hue is a circle (0-360 degrees).
4. New Hue = (Base Hue + Offset) % 360.
5. Convert back HSL → RGB → Hex for display.

Harmony Rules Explained

Different harmony rules create different emotional responses and visual styles:

Monochromatic: Uses a single base hue but varies the saturation and lightness. This creates a clean, soothing, and unified look. It's the safest bet for professional corporate designs.
Analogous: Uses colors that are next to each other on the color wheel (e.g., Red, Orange, Yellow). Our tool calculates this by adding -30° and +30° to the base hue. This mimics colors found in nature and is pleasing to the eye.
Complementary: Uses two colors directly opposite each other (180° apart). This creates high contrast and high impact. Use this sparingly, typically for call-to-action buttons.
Split-Complementary: A variation of the complementary scheme. It uses the base color plus the two colors adjacent to its complement (180° ± 30°). It offers high contrast but is less aggressive than a direct complementary scheme.
Triadic: Uses three colors evenly spaced around the color wheel (0°, 120°, 240°). This creates a vibrant and balanced palette.
Tetradic (Double Complementary): Uses four colors arranged into two complementary pairs. This is the richest of all schemes but the hardest to balance.

Practical Example: The 60-30-10 Rule

Once you have generated your palette, how do you use it? The most popular guideline in design is the 60-30-10 rule.

60% Primary Color: This should be your neutral or main background color. It sets the tone.
30% Secondary Color: This supports the primary color. Use it for cards, headers, or distinct sections.
10% Accent Color: This is your "pop" of color. Use it for buttons, links, and icons to guide the user's attention.

For example, if this tool generates a palette of Navy Blue, Soft Grey, and Bright Coral: The Grey would be your 60% (backgrounds), Navy Blue your 30% (text and headers), and Coral your 10% (Buy Now buttons).

Frequently Asked Questions

Is this color palette generator free to use? +

Yes, this tool is 100% free. You can generate unlimited color palettes for personal or commercial projects without any cost or attribution required.

How do I copy the color codes? +

Simply click on any of the colored rectangles (swatches) in the results area. The Hex code (e.g., #FF5733) will automatically be copied to your clipboard, and you will see a confirmation message.

What formats are supported (Hex, RGB, HSL)? +

The tool accepts Hex codes (e.g., #1a56db) as input. The output provides Hex codes primarily, as they are the standard for web design (CSS). However, we also display the RGB values for reference.

Can I use these colors for print design? +

While you can use these colors as a starting point, remember that screens use RGB (light) and printers use CMYK (ink). Some bright, neon-like RGB colors cannot be perfectly reproduced in print. It is always best to convert your final palette to CMYK in design software like Adobe Illustrator or Photoshop before sending to print.

Why does my palette look different on my phone vs. my laptop? +

Every screen is calibrated differently. Factors like brightness, contrast settings, and the technology of the panel (OLED vs. LCD) affect color rendering. Professional designers often use calibrated monitors to ensure color accuracy.