What's a palette generator?

Color Palette Generator is a tool to automatically generate a set of compatible colours using mathematical and colour algorithms based on the " base colour " you select. It addresses the specific difficulty of how designers “start the first set” in the face of blank canvass. Through the science of colour theory, it ensures that the colour you choose is visually coordinated, professional and emotional.

Core Colour Theory Parsing

Analogous: The next-door colour on the wheel. They usually occur in groups in nature and create a calm, comfortable visual feeling.
Complementarity: A completely relative color on the wheel. They produce a very strong visual comparison and are well suited for use in the CTA button or in focus.
Monochrommatic: Different saturation and brightness changes in the same colour. It's a very simple and absolutely safe coloring scheme that allows UI to... Looks very neat and consistent.
Split Complementary: The advantages of matching and complementarities are not so obscurantistic as many UI designers are the first choice.
Triadic: An equation triangle distribution is shown on the chalk wheel. They are dynamic and can maintain a visual balance even if they are not saturated.

How can you select the right palette for your items?

Define brand emotions: Blue represents trust, red represents passion, purple represents creativity. First select your brand main color.
Determine colour mode: Enterprise-type websites are suitable for monochrome or symmetrical colours; Electricians or game-like websites are suitable for complementary roles or three.
Application of 60-30-10 principles: 60% use the main colour (usually the background), 30% use the auxiliary colour, 10% use the emphasis colour.
Check contrast: Ensure sufficient contrast between text colours and background colours to meet accessibility design (WCAG) standards.

Common issues (FAQ)

Q: Why does the color of the creation look dirty?
A: This is usually due to the fact that the base colour is too low in saturation or light. Try to select a brighter baseline colour or a slightly fine-tuned value in the code generated.

Q: How should the CSS variable be used?
A: Copy generated code and paste to CSS :root Selector, then pass var(--primary-color) That way they are quoted.

Q: What is the use of randomly generated functions?
A: When you lack inspiration, random generation can lead you out of the mindset and find some unexpected but scientifically harmonious colour combinations.