Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/eoconline/css-system-colors

Visual demonstration of all CSS System Colors
https://github.com/eoconline/css-system-colors

Last synced: 5 days ago
JSON representation

Visual demonstration of all CSS System Colors

Awesome Lists containing this project

README 

        
# CSS System Colors Visual Demonstration



CSS System Colors are derived from the user's operating system's color scheme.

They are useful for creating a consistent look and feel that matches the user's

preferences.



This page is a nice visual reference to the system-colors - but **specific to

this browser/operating System**!



> Avoid specifying different colors for light or dark mode: let the browser & OS

> handle it for you!



This page demonstrates the CSS System Colors in action. You can view the colors

(and their change the light/dark mode and contrast settings to see how the

colors adapt to different environments.



We uniquely display the actual color's

[RGBA](https://drafts.csswg.org/css-color/#rgb-functions) values for the current

environment. Note that the values are likely to change when switching from light

to dark mode.



Hovering over each card displays the same text as in the card,and allows copying

it to your clipboard if desired. At the bottom to the two system color grids is

a download button which will download a simple json files with the current RGBA

values for the environment.



## System Colors Introduction



[CSS System Colors](https://drafts.csswg.org/css-color/#css-system-colors) are a

set of 17 color keywords that are derived from the user's operating system's

color scheme. They are useful for creating a consistent look and feel that

matches the user's preferences.



CSS System Colors are a new ![W3C](W3C.png) standard (under development since

[2017](https://www.w3.org/standards/history/css-color-4/) as part of CSS Color

Module Level 4), but still in proposal status as of 2024) -- but well adopted by

modern browsers. The colors and descriptions are current as of November 2024.



The colors are defined in the CSS Color Module Level 4 specification and can be

used in any property that accepts a color value. They are prefixed with the

system- keyword, such as system-highlight or system-buttonface.



The colors are designed to adapt to different light/dark modes and contrast

settings, making them ideal for creating accessible and user-friendly

interfaces. They can be used in combination with other color values to create a

harmonious color palette.



> Note: System colors' actual RGBA values may vary depending on the user's

> operating system and browser settings!



A nice feature of CSS System Colors is that they can be used in combination with

other color values to create a harmonious color palette.



Some colors are

[deprecated](https://drafts.csswg.org/css-color/#typedef-deprecated-color) as

they enable mimicking system colors too well, and could be used for fake, evil

phishing sites. Don't go there!



For more information on CSS System Colors, check out:



- Jim Nielsen's blog post 

- MDN Web Docs 

- CSS Color Module Level 4 specification

  ([~2024](https://www.w3.org/standards/history/css-color-4/))

  



 Tests

    


   



## License



©2024 eoc.online under the permissive MIT License. Please note our contributions

though!



: Open source tooling for Emergency Operation Centers



Source & details at