格 千格 KiloCell

Palette Generator Palette Palette Palette

A scientific-based colour theory algorithm produces a harmonious, professional UI colour scheme in a instant.

Hint: Click on a box to copy the HEX colour code.

Solving specific issues: Why does your web page look dirty?

Colours are the most easily error-prone link when designing web pages or mobile applications. Many newcomer designers tend to choose colours randomly, often resulting in a disordered image of the page, a mismatch of contrasts, or an unprofessional “cheap feeling”. Palette Generator Palette Palette Palette To use mathematical algorithms to utilise the theory of colour to help you solve the scientific problems of colour matching.

1. What is a harmonious coloring scheme?

Harmonious colours are not genres, but are based on color rings (Color). Weeel's geometry. With our tools, you can try the following classic algorithms:

  • Complementarity: Select the two colours of the color ring that are completely relative. This program has a very strong visual impact and is very suitable for the Action-Oriented Button. (CTA)”。
  • Similar colour: Select the colour of the adjacent colour of the ring. This mix is very natural, peaceful and often used for background and assistive decorations.
  • Triadic: Take three vertexes of the equation triangle. It keeps a rich sense of colour and balance.
  • Monochrommatic: Based on the same colour, changes are made by adjusting the visibility and saturation. This is the most safe and highly advanced UI colouring method.

2. Resolution of the colour balance in UI design: 60-30-10 Code

Even with a perfect palette, how to allocate the ratio is crucial:

  • 60% Main colour: For the usual use of background or large areas, a colour of lower saturation should be selected.
  • 30% Supplementary colour: For navigation columns, cards, subheadings, etc., to add a sense of hierarchy.
  • 10% emphasis on colour: For the most important interactive points. The colours generated by the complementary color algorithm are best suited to play this role.

3. Colour psychology and branding

The different color algorithms convey a very different emotion:

  • Blues: The conveyance of professionalism, trust and stability is the preferred option for the financial and scientific industries.
  • Green tune: It symbolizes health, growth and nature, and applies to medical or environmental products.
  • Red/Turkish: Vibrant, creative and enthusiastic, it can effectively stimulate the desire of users to buy.

4. How can the resulting colour be applied in CSS?

Click the Export Colour button to get a set of CSS custom attributes (variables). It is recommended that these variables be placed in :root in order to maintain colour consistency throughout the project: 

:root {
  --color-primary: #7fbf4a;
  --color-secondary: #...;
  /* ... */
}