Beispiel:Color-mix-4.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css" >
<title>Farbkontraste mit relativer Syntax</title>
<style>
aside {
border: medium solid;
border-radius: 1rem;
padding: 0;
display: flex;
flex-flow: column nowrap;
color: var(--tone);
background-color: oklch(from var(--tone) calc(l + 45) calc(c * 0.5) h);
box-shadow: 0.3em 0.6em 1em
color-mix(in oklch, var(--tone) 90%, black 10%);;
h2 {
margin: 0 0 1rem;
border-radius: .8rem .8rem 0 0;
text-align:center;
background-color: var(--tone);
color: oklch(from var(--tone) calc(l + 40) c h);
}
p {
padding: 0 1em;
}
p:last-of-type {
margin-top:auto;
}
}
.info {
--tone: var(--color-primary);
}
.warning {
--tone: var(--color-secondary);
}
.success {
--tone: var(--color-tertiary);
}
button {
background-color: var(--color-accent);
color: oklch(from var(--color-accent) calc(l - 50) c h);
padding: 0.2em 0.5em;
border-radius: 0.5em;
}
button:hover,
button:focus {
background-color: oklch(from var(--color-accent) calc(l * 1.1) c h);
}
/* GLOBAL */
:root {
--color-primary: oklch(50% 0.1 240);
--color-secondary: oklch(50% 0.2 30);
--color-tertiary: oklch(50% 0.2 120);
--color-accent: oklch(75% 0.2 90);
}
.not-supported {
background: #600;
border-radius: 8px;
color: #fff;
font-size: 0.9rem;
padding: 0.5rem 1rem;
position: fixed;
@supports (background: oklch(from var(--color-tertiary) calc(l + 45) calc(c *0.5) h)) {
display: none;
}
}
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
gap: 3em;
font-family: sans-serif;
max-width: 50em;
margin: 1em auto;
}
h1 {
grid-column: 1 / -1;
}
</style>
</head>
<body>
<aside class="card info">
<h2>Farben mischen</h2>
<p>Ausgehend von unserer Grundfarbe <code> oklch(50% 0.1 240)</code> erzeugen wir drei weitere Farben mit anderen Werten für hue.</p>
<p> <button class="button__primary">→ mehr</button>
<button class="button__secondary">überspringen!</button>
</p>
</aside>
<aside class="card success">
<h2>Info aktualisiert</h2>
<p>Mehr Sicherheit mit 2-Faktor-Authentifizierung.</p>
<p> <button class="button__primary">→ weiter</button>
<button class="button__secondary">Später!</button>
</p>
</aside>
<aside class="card warning">
<h2>Session unterbrochen</h2>
<p>Ihr Account war seit mehr als 10min inaktiv.</p>
<p> <button class="button__primary">→ Einloggen</button>
<button class="button__secondary">Schließen!</button>
</p>
</aside>
<p class="not-supported">Die hier verwendeten Farb-Funktionen werden in diesem Browser nicht unterstützt.</p>
<p>Öffne Deine Console, um einen Überblick über alle custom properties zu bekommen.</p>
<script>
(() => {
const root = document.documentElement;
const styles = getComputedStyle(root);
const vars = new Set();
// 1. Collect custom properties from stylesheets
for (const sheet of document.styleSheets) {
let rules;
try {
rules = sheet.cssRules;
} catch {
continue; // CORS-protected stylesheet
}
for (const rule of rules) {
if (!rule.style) continue;
for (const prop of rule.style) {
if (prop.startsWith('--')) {
vars.add(prop);
}
}
}
}
// 2. Helper: detect color
const isColor = value => {
const s = new Option().style;
s.color = '';
s.color = value;
return s.color !== '';
};
console.group('%cCSS Custom Properties', 'font-weight:bold');
// 3. Output
[...vars].sort().forEach(name => {
const value = styles.getPropertyValue(name).trim();
if (!value) return;
if (isColor(value)) {
console.log(
`%c ${name} %c ${value} `,
'color:#888;',
`
background:${value};
color:${getContrast(value)};
padding:2px 8px;
border-radius:1em;
font-weight:bold;
`
);
} else {
console.log(`%c ${name}: %c${value}`,
'color:#888;',
'color:inherit'
);
}
});
console.groupEnd();
// --- contrast helper ---
function getContrast(color) {
const ctx = document.createElement('canvas').getContext('2d');
ctx.fillStyle = color;
const rgb = ctx.fillStyle.match(/\d+/g).map(Number);
const luminance = (0.299*rgb[0] + 0.587*rgb[1] + 0.114*rgb[2]) / 255;
return luminance > 0.6 ? '#000' : '#fff';
}
})();
</script>
</body>
</html>
