CSS » Color System

See also

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

meodai/color-names: Large list of handpicked color names 🌈 a tu ima pomenutih i projekata koji koirste, kao i odličan superhighfives/pika: An open-source colour picker app for macOS

–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

Super caka sa bojama:

/* Easier to maintain! */ :root { –primary-color: #000; –gray-dark: color-mix(in srgb, var(–primary-color), #fff 25%); –gray-medium: color-mix(in srgb, var(–primary-color), #fff 40%); –gray-light: color-mix(in srgb, var(–primary-color), #fff 60%); –gray-lighter: color-mix(in srgb, var(–primary-color), #fff 75%); }

A Few Ways CSS Is Easier To Write In 2023 — Smashing Magazine

Example of color names:

https://codyhouse.co/ds/globals/colors

HSL color space

–color-primary –color-accent (similar to my as secondary)

Named Colors Wheel is an interactive wheel for exploring named CSS colors.