Color scheme sense is decided by "Logic"! Color palette usage techniques for non-designers

Is there a "correct answer" for color selection?

There are unexpectedly many opportunities to design, such as creating Web sites, presentation materials, and SNS images. However, are you worried that "I don't know what color to use" or "Colors I chose look cheesy"?

Actually, it is not only natural sense that professional designers can create beautiful color schemes. It is because they know the rule called "Color Theory". If you keep this rule, even non-designers can choose "correct" colors without hesitation.

Let's get a beautiful color scheme based on theory using the tool below.

Color Palette GeneratorExtract striking dominant colors from images to build your palette.

---

Golden Ratio of Color Scheme that does not fail "70:25:5"

This is the most basic and powerful rule. If you compose the entire screen with the following 3 roles and ratios, the balance will be beautifully arranged.

1. Base Color (70%)

Color occupying the largest area such as background and margins.

• Recommended: White, light gray, black or dark gray if dark background
• Role: Create margins and complement other colors

2. Main Color (25%)

"Protagonist" color that determines the impression of the design. Use brand color or logo color.

• Recommended: Corporate theme color, color preferred by target demographic
• Role: Create overall identity

3. Accent Color (5%)

Color used only for the part you want to stand out most, such as "Application Button" or "Attention Point".

• Recommended: Color contrasting with main color (Complementary color), warm colors such as red and orange
• Role: Guide line of sight, tighten screen

---

Magic of "Color Wheel" to find compatible colors

"I want to decide main color to be blue, but what color is good for accent color?" What you can rely on at such times is "Color Wheel". If you use this diagram arranged in a circle, you can logically derive compatible colors.

Complementary

Combination of colors located exactly opposite on the color wheel. Because they complement each other (complement), contrast is strongest and impactful.

• Example: Blue × Orange, Red × Green
• Use case: When you want to decide accent color

Analogous

Combination of colors adjacent on the color wheel. It blends well and creates a calm and harmonious impression.

• Example: Blue × Light Blue, Orange × Yellow
• Use case: When you want to decide background color or sub color

Triad

3 colors located at equilateral triangle on the color wheel. You can create a color scheme with changes while maintaining balance.

• Example: Red, Blue, Yellow

---

"Accessibility" often overlooked

"Stylish color scheme" alone is not enough. It is necessary to consider "Is it easy to see for everyone (Readability)".

Ensure Contrast Ratio

If the difference in brightness (contrast) between background color and text color is low, text becomes difficult to read.

• NG: Light gray text on white background, Red text on blue background
• OK: Dark gray text on white background, White text on dark blue background

Consideration for Color Vision Diversity

About 1 in 20 Japanese men has the characteristic that it is difficult to distinguish some colors. Since it may be difficult to distinguish "red and green", consideration (universal design) is necessary so that important information can be understood not only by color but also by "icon" or "text".

---

Jenee's Color Tool Utilization Guide

I understood the theory, but it is hard to find colors myself... At such times, leave it to Jenee's free tools.

1. Color Palette Generation

Just by deciding one main color, it automatically generates color patterns that match it. Since you can choose rules such as "Complementary" and "Analogous", you will definitely find a palette that suits your purpose.

Color Palette GeneratorExtract striking dominant colors from images to build your palette.

2. CSS Gradient Creation

You can easily create beautiful gradients which are recent trends. If used for background or buttons of Web site, it will be instantly modern impression. Completed CSS code can be used immediately by copy and paste.

CSS Gradient GeneratorVisually generate beautiful CSS linear and radial gradients.

3. Color Conversion Tool

Convenient when you want to know "RGB value of this color" or "Convert to CMYK for printing". You can convert mutually from HEX code for Web (#RRGGBB) to all formats.

Color Code ConverterConvert between HEX, RGB, HSL, and CMYK color codes instantly.

---

Psychological Effect of Color (Color Marketing)

Colors manipulate human emotions unconsciously. Let's choose main color according to purpose.

• Blue: Trust, Sincerity, Intelligence
  • Often used in banks, IT companies, hospitals.
• Red: Passion, Energy, Buying Motivation
  • Effective for sales, food, sports related.
• Green: Security, Nature, Peace
  • For environment, health food, relaxation services.
• Black: Luxury, Dignity, Sophistication
  • High brands, luxury cars, products for men.

---

FAQ: Frequently Asked Questions about Color Scheme

Q. Up to how many colors can I use for color scheme?

A. While you are a beginner, we strongly recommend narrowing down to 3 colors (Base, Main, Accent). If colors are absolutely insufficient, adding color with changed "Brightness" of main color (Dark Blue / Light Blue) increases variations without breaking sense of unity.

Q. Can I use White (#FFFFFF) and Black (#000000)?

A. Of course there is no problem, but on screen, "Pure Black (#000000)" has too strong contrast and may burden eyes. Using dark gray such as "#333333" mixed with a little gray gives a gentle and sophisticated impression to eyes.

---

Summary

Color scheme is not "Sense" but "Logic" that anyone can learn. Just by keeping 70:25:5 rule and Color Wheel rule, materials and Web sites you create become dramatically easier to see.

After that, just find colors according to logic using tools. Let's graduate from "Colors chosen somehow" from today.

Color Palette GeneratorExtract striking dominant colors from images to build your palette.