Last active
June 15, 2026 06:41
-
-
Save TorstenC/410620bd4235d9f6dcac9e178c9a4d9f to your computer and use it in GitHub Desktop.
CSS Color Level 4 Systemfarben
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="de"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>CSS Systemfarben-Matrix</title> | |
| <style> | |
| :root { | |
| --p: 2px; | |
| color-scheme: light dark; | |
| font-family: system-ui, sans-serif; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 1rem; | |
| background: Canvas; | |
| color: CanvasText; | |
| } | |
| a:visited { | |
| color: LinkText; | |
| } | |
| h1 { | |
| margin-top: 0; | |
| margin-bottom: 0.5rem; | |
| font-size: 1.3rem; | |
| } | |
| p { | |
| margin-top: 0; | |
| margin-bottom: 1rem; | |
| max-width: 90ch; | |
| } | |
| .table-wrap { | |
| overflow: auto; | |
| border: 1px solid ButtonBorder; | |
| background: Canvas; | |
| margin-bottom: 1.5rem; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| font-size: 12px; | |
| line-height: 1.25; | |
| min-width: max-content; | |
| } | |
| caption { | |
| caption-side: top; | |
| text-align: left; | |
| padding: 0.75rem; | |
| font-weight: 700; | |
| color: CanvasText; | |
| background: Canvas; | |
| position: sticky; | |
| left: 0; | |
| } | |
| th, | |
| td { | |
| border: 1px solid ButtonBorder; | |
| padding: var(--p); | |
| text-align: center; | |
| white-space: nowrap; | |
| } | |
| thead th { | |
| position: sticky; | |
| top: 0; | |
| z-index: 2; | |
| background: Field; | |
| color: FieldText; | |
| } | |
| tbody th { | |
| position: sticky; | |
| left: 0; | |
| z-index: 1; | |
| text-align: left; | |
| background: Field; | |
| color: FieldText; | |
| font-weight: 700; | |
| } | |
| thead th.corner { | |
| left: 0; | |
| z-index: 3; | |
| } | |
| td { | |
| font-weight: 600; | |
| } | |
| .legend { | |
| margin-top: 0.75rem; | |
| font-size: 0.9rem; | |
| color: CanvasText; | |
| } | |
| .legend code { | |
| background: Field; | |
| color: FieldText; | |
| padding: 0.1rem 0.35rem; | |
| border: 1px solid ButtonBorder; | |
| border-radius: 0.25rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Alle aktuellen <a href="https://www.w3.org/TR/css-color-4/#css-system-colors" target="_blank">CSS Color Level 4 Systemfarben</a> als Matrix | |
| (<a href="https://gist.github.com/TorstenC/410620bd4235d9f6dcac9e178c9a4d9f">Gist<a>)</h1> | |
| <ul> | |
| <li>Spalten = <code>background-color</code>, Zeilen = <code>color</code>.</li> | |
| <li>Wenn dein Browser/OS Theme wechselt, ändern sich die dargestellten Farben automatisch.</li> | |
| <li>Klicke auf eine Zelle, um die CSS-Eigenschaften in die Zwischenablage zu kopieren.</li> | |
| </ul> | |
| <div id="matrices"></div> | |
| <p class="legend"> | |
| Tipp: Du kannst testweise auch <code>:root { color-scheme: light; }</code> oder | |
| <code>:root { color-scheme: dark; }</code> setzen, um gezielt einen Modus zu prüfen. | |
| </p> | |
| <script> | |
| const systemColors = [ | |
| // Hintergründe | |
| "AccentColor", | |
| "ButtonBorder", | |
| "ButtonFace", | |
| "Canvas", | |
| "Field", | |
| "Highlight", | |
| "Mark", | |
| "SelectedItem", | |
| // Textfarben | |
| "AccentColorText", | |
| "ActiveText", | |
| "ButtonText", | |
| "CanvasText", | |
| "FieldText", | |
| "GrayText", | |
| "HighlightText", | |
| "LinkText", | |
| "MarkText", | |
| "SelectedItemText", | |
| "VisitedText", | |
| ]; | |
| function buildMatrix(scheme) { | |
| const wrap = document.createElement("div"); | |
| wrap.className = "table-wrap"; | |
| wrap.style.colorScheme = scheme; | |
| const table = document.createElement("table"); | |
| const thead = table.createTHead(); | |
| const tbody = table.createTBody(); | |
| const caption = table.createCaption(); | |
| caption.textContent = `color-scheme: ${scheme}`; | |
| const headRow = thead.insertRow(); | |
| const corner = document.createElement("th"); | |
| corner.className = "corner"; | |
| corner.textContent = "color ↓ / bg →"; | |
| headRow.appendChild(corner); | |
| for (const bg of systemColors) { | |
| const th = document.createElement("th"); | |
| th.textContent = bg; | |
| headRow.appendChild(th); | |
| } | |
| for (const fg of systemColors) { | |
| const tr = tbody.insertRow(); | |
| const rowHeader = document.createElement("th"); | |
| rowHeader.scope = "row"; | |
| rowHeader.textContent = fg; | |
| tr.appendChild(rowHeader); | |
| for (const bg of systemColors) { | |
| const td = tr.insertCell(); | |
| td.style.color = fg; | |
| td.style.backgroundColor = bg; | |
| td.textContent = "txt"; | |
| td.title = `color: ${fg}; background-color: ${bg};`; | |
| td.addEventListener("click", () => navigator.clipboard.writeText(td.title)); | |
| } | |
| } | |
| wrap.appendChild(table); | |
| return wrap; | |
| } | |
| const container = document.getElementById("matrices"); | |
| for (const scheme of ["light", "dark"]) { | |
| container.appendChild(buildMatrix(scheme)); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://gistpreview.github.io/?410620bd4235d9f6dcac9e178c9a4d9f/Color_Level_4_Systemfarben.html
