Web page color matching example analysis: Green color matching web page analysis

<br />Green is between yellow and blue (cold and warm), and is a more moderate color. This makes green the most peaceful, stable, generous and tolerant color. It is a color of softness, tranquility, contentment, grace and welcome. It is also one of the most widely used colors on web pages.
Green is closely related to human beings. It is the color of nature that represents eternal prosperity. It represents life and hope and is full of youthful vitality. Green symbolizes peace and security, development and vitality, comfort and tranquility, relaxation and rest, and has the effect of relieving eye fatigue.
It itself has a certain feeling related to nature and health, so it is often used in sites related to nature and health. Green is also often used in some companies' public relations sites or educational sites.
Green can make our mood especially bright. Yellow-green represents the psychological feelings of freshness, calmness, comfort, peace, softness, spring, youth, and upgrading.
Below we will make different example analyses based on the color combinations of adjacent colors with different attributes in the green series, high-purity and low-purity colors of the same color, contrasting colors, etc.
Green webpage example: http://www.bacardimojito.com

Green analysis :
From the HSB mode values of the primary and secondary colors in the above picture, we can see that the two colors only differ in brightness, and their displayed hue and saturation are the same. Pure green is 120 degrees. From the RGB value point of view, these two colors are mixed with other colors to varying degrees, so they deviate slightly from pure green. Due to the characteristics of green itself, the entire webpage looks stable and comfortable.
The secondary color only reduces the brightness, giving the page a sense of layering and space.
The white blocks bring out the best of green’s characteristics and enhance the visual rhythm.
The finishing touch color perfectly reflects the wonderful touch of "finishing touch", which is extremely tempting. The whole page suddenly becomes vivid and refreshing, enhancing the expressiveness of the page theme.
in conclusion :
The primary and secondary colors belong to the same green color system. Through changes in different brightness, they can gradually and gently change while also more obviously reflecting the color layering of the page. If we do not use numerical analysis to make judgments, some friends may rely on experience to make the mistake of thinking that the two colors may have different purities in addition to brightness. At this time, the proper use of numerical models will easily lead to the correct conclusion.
The entire page has very few colors: emerald green for the largest area, white for the second area, and dark green for the third area, but the effect is strong and eye-catching, achieving the purpose of fully displaying the product theme.
Dark green gives people a psychological feeling of luxuriance, health, maturity, stability, life, and openness.

Previous Page 1 2 Next Page Read Full Article

<<: Detailed explanation of CSS weight value (cascading) examples

>>: Introduction to Javascript DOM, nodes and element acquisition

Web page color matching example analysis: Green color matching web page analysis

How to deploy FastDFS in Docker

Limit input type (multiple methods)

How to regularly clean up docker private server images

How to simply configure multiple servers in nginx

js canvas realizes random particle effects

Installing the ping tool in a container built by Docker

How to install mysql via yum on centos7

A preliminary study on composite primary key and joint primary key in SQL statements

Detailed explanation of commands to view linux files

HTML implements Double 11 coupon grabbing (set time to open the coupon grabbing page)

Recommend

Web Design Teaching or Learning Program

Tutorial on installing and changing the root password of MySQL 5.7.20 decompressed version

Who is a User Experience Designer?

Website Standard Development Flowchart

Vue implements button switching picture

Meta declaration annotation steps

How to deploy nodejs service using Dockerfile

9 Practical CSS Properties Web Front-end Developers Must Know

How to use Docker-compose to deploy Django applications offline

Summary of Several Methods for Implementing Vertical Centering with CSS

Practical record of vue using echarts word cloud chart

JavaScript to filter arrays

How to detect file system integrity based on AIDE in Linux

Introduction to MySql table, database, sharding and partitioning knowledge points

Steps to install cuda10.1 on Ubuntu 20.04 (graphic tutorial)