CSS » Naming Colors

A good starting point is to break things down into your primary color, secondary colors, and neutral colors.

Primary color: This is where the user’s attention goes. Calls-to-action, buttons, and any other important information should utilize the primary color.
Secondary color: The secondary colors are used to highlight less important elements. Secondary action buttons, less important text, and anything else that doesn’t need immediate attention should be presented in a secondary color.
Neutral/Additional colors: Neutrals are typically used for text, backgrounds, or anything else that does not need to compete for attention.  

Ovde je takođe lep spisak: https://public.3.basecamp.com/p/ZJqqFSGFKPnkUPMTckhH98rj

Best article: How To Decide Color Schemes For Websites And Brand?

Color Scheme / Color Swatches

Swatches are a predefined collection of colors that are easily accessible in media editing tools.

Number of Colors in Scheme - Three Recommended: The 60-30-10 rule is an old designer’s rule on how you can use colors in your design. Which describes as you should use primary color 60% referred to as slack & jacket, 30% usage of secondary color, which may include two secondary colors 15% each, which is the shirt and 10% for the accent color as a tie, all in a business suit.

Primary Color

The primary color is a color that dominates your design means the great stuff will use your primary color, including logo. Your primary color is the color associated with your brand.

Primary colors help consumers to quickly identify a brand. These are the core colors of the brand. Commonly, primary colors are incorporated into a company’s logo. A company has between 1-3 primary colors but there can be more if desired.

Usually brand colors. Primary colors is the dominant color that user most see in your product. One or 2 colors maximum is ideal.

Secondary Color(s)

The color you will be using less often than the primary color is secondary.

Secondary colors highlight and compliment the primary color or colors. They usually have a range of 1-6 colors. Companies can decide to have an infinity of secondary colors but we suggest to limit the color palette as it helps with recognition and consistency.

Besides primary color, upon the need of particular situation, the designer can made up secondary color set. Example of Atlassian

Accent Color

or: Contrast Color

The color that you will use at least 10% is the accent color.

Be playful and crazy here but don’t forget that accent color should just be around 10% of color of the whole product. The ideal model as mentioned in this article is 60–30–10: 60% is primary color, 30% is sub-primary and 10% is accent color.

Use to emphasize actions and highlighted information: text, call-to-action, floating button ( see material design ), progress bars, selection controls, special buttons, slider, links

Neutral Colors: White, Black, Gray

Neutral means without color, which includes beige, ivory, taupe, black, gray, and shades of white. Be careful using these colors, White, Black, and Gray you will be using for Text, to create contrast for elements or as background-color.

And what is a neutral color? Generally speaking, neutral colors are hues (or colors) that don’t appear to have color. White, black, grey, beige. Usually considered for the background.

White, black or gray schemes. These colors are usually made for text and/over background.

Semantic Colors

Error, success, warning, information. These color are based on very firm research about psychology of signal:

Red for error, danger, wrong.
Green for success, safe, right.
Yellow for alert, caution, warning.
Blue for information.

Places where you use a particular color

How do you apply the selected color palette on your website, which color to use where, and why?

• Primary Color utilized on the “hot spot/important space” on the website, for CTA buttons, headlines, benefits icons, download forms, and to highlight other relevant information using primary colors.
• Secondary Color used to highlight the less critical information, such as subheadings, supporting contents, testimonials, secondary buttons, and FAQs.
• Neutral Color will most likely use for text and background but particularly in colorful sections of the site to help tone it down and refocus the eye.

Accent? An accent color is a contrasting color used to draw attention to key pieces of a web page.

Sources:

• Basic UI color guide with Atlassian example
• How to write company brand guidelines
• Prioritize your website NEUTRAL color, not primary color
• The color system in Material Design

Many people choose colors in this manner:

Primary colors – usually their logo or main brand color.
Secondary colors – usually accent colors or secondary brand colors.
Neutral colors – usually considered “the background color” in web design.

Their primary color is usually a hue of red or blue. Secondary color is typically a sharper or dulled version of their primary color. And then neutral is white or black.

1. Primary (1-3), Secondary (1-6)
2. Accent
3. Neutrals
4. Semantic (?)

Great HSL Color System

Game Changing Global Color Management in Oxygen

--primary
--secondary
--accent
--base

Higher percentages are lighter and lower are darker.

--ult: 95%; /* --ultra-light */
--lt:  85%; /* --light */
--dk:  25%; /* --dark */
--udk: 10%; /* --ultra-dark */

•   -lightest   -
  

-pale -lighter -ultra-light -light -light -light -mid - - -dim -dark -dark -dark -darker -ultra-dark

•   -darkest    -