CSS » Color System

CSS » Color System

CSS: On Color System

Color system overview in OxyMade How to Setup Oxygen Builder: Best Global Settings (Automatically Responsive!) What do you name color variables? What naming scheme do you use for color variables?

ColorX or Color-Name.com … or completely made up names to disassociate color from semantics: Name that Color

and Colblindor and Color Namer

–primary → the primary color we use through out the website, for buttons, headings, important elements, some backgrounds, etc. –secondary → is a secondary color which might be useful to highlight a few areas where primary is not suitable. –body → the color which we use for paragraph text, not for headings, alt: –paragraph

–bg → is a default background color through out the website, alt: –background –bg-alt → is an alternative background to divide each block in a page.

–dark → the darkest color in the set, Used for headings. –light → is exactly opposite of dark, and light is used for headings on high contrast backgrounds, mostly for primary or secondary color background areas.

–border → is for border color

–placeholder → is for any element that needs to be little highlighted, where primary, secondary colors are overkill.

–body-alt –border-alt –placeholder-alt → is an alternative paragraph color which can be used on high contrast backgrounds. All those can be used on high contrast background areas, like primary, secondary, or black backgrounds.

–bk, –wt, –white, –black → use vars for there as sometimes you could “soften” those colors if used as vars

My past examples:

Primary, Secondary, Mono

–c-pri –c-sec

–c-txt –c-txt-alt

:root {
  --c-pri-yellow-green:    #A8D038; /* Primary, Yellow Green | Android Green | Atlantis */
  --c-pri-flavescent:      #FFEF87; /* Primary, Flavescent | Yellow Crayola | Dolly */
  --c-pri-cool-gray:       #838FAB; /* Primary, Cool Gray | Cool Grey | Bali Hai */

  --c-sec-ivory:           #F6FAEA; /* Secondary, Ivory | Old Lace | Rum Swizzle */
  --c-sec-alabaster:       #FAFAFA; /* Secondary, White | Lotion | Alabaster */
  --c-sec-antiflash-white: #EEEDED; /* Secondary, Anti-flash white | Bright Gray | Gallery */

  --c-txt-delft-blue:      #162E59; /* Text, Delft Blue | Space Cadet | Blue Zodiac */
  --c-txt-cool-gray:       #838FAB; /* Text, Cool Gray | Cool Grey | Bali Hai */
  
  --c-white: #ffffff;
  --c-black: #000000;
}

What is the ugliest color? - Pantone 448 C (#4a412a) What’s the prettiest color in the world? - YInMn blue (#2e5090) What is the rarest color in nature? - blue, plants and animals don’t actually contain blue pigment

Game Changing Global Color Management in Oxygen

Responsive without media queries

h1 { font-size: clamp(2rem, calc(2rem + (7 - 2) * ((100vw - 32rem) / (120 - 32))), 7rem); }

h2 { font-size: clamp(1.6rem, calc(1.6rem + (4 - 1.6) * ((100vw - 32rem) / (120 - 32))), 4rem); }; h3 { font-size: clamp(1.6rem, calc(1.6rem + (3 - 1.6) * ((100vw - 32rem) / (120 - 32))), 3rem); }; h4 { font-size: clamp(1.6rem, calc(1.6rem + (2 - 1.6) * ((100vw - 32rem) / (120 - 32))), 2rem); }; h5 { font-size: clamp(1.6rem, calc(1.6rem + (1.8 - 1.6) * ((100vw - 32rem) / (120 - 32))), 1.8rem); };

CSS Helpers

owl spacing =

Font Stack

Guide to CSS Font Stacks: Techniques and Resources — Smashing Magazine 30+ Best Web Safe Fonts for Your Next Design in 2022 Font Matrix

CSS Modern Font Stacks systemfontstack

/*  CSS Font Weight
    names to numbers conversion

    100	Thin
    200	Extra Light, Ultra Light
    300	Light
    400 Normal, Regular, Book
  * 500	Medium
  * 600	Demi, Demi-Bold, Semi-Bold
  * 700	Bold
  * 800	Extra-Bold, Ultra-Bold
    900	Black, Heavy

    */

Semantic Colors

Best: 7 Practical Color Tips for Cheating at Design | by Nishantjawla | Medium Defining Colors in your Design System | Complete guide to build scalable, harmonious color system | UX Collective Color system – Material Design 3 How to choose a colour palette for your wardrobe (+ 36 sample palettes) — Anuschka Rees Color - Foundations - Atlassian Design System


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.  

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:

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    -
    

Quick Guide on Choosing Artboard and Container Widths for Responsive Website Design Artboard Width / Container Width: Desktop (1440px / 1200px), Mobiles (360px / 320px), Tablets (768px / 728px)

1200px because it scales and divides nicely.


Figma’s does amazing job with SVG Exports: https://www.figma.com/blog/with-figmas-new-svg-exports-less-more/ except when images are included. Still, the simplest editor out there.

Opn-source SVG-Editor for your browser: SVG-Edit/svgedit Boxy SVG is advanced online editor, free to experiment but not free: https://boxy-svg.com/app/ KIYUT - Sketsa SVG Editor is NOT free also, in Java: https://www.kiyut.com/products/sketsa/

  1. Copy-Paste to Figma, ungroup and then export to SVG
  2. Optimize with SVGOMG

It is the same - A Tale of width and max-width

date 11. Apr 2022 | modified 28. Sep 2022
filename: CSS » Color System