Как автоматически вычислять подходящие цвета для диаграмм SVG и графиков? ⇐ CSS

[Anonymous]

Я пытаюсь сделать автономные файлы SVG, которые подходят для внедрения на любую (разумную) веб -страницу, не зная заранее, является ли это легкой темой или темной темой. Затем он ведет себя последовательно с текстом вокруг него. На некоторых страницах необходимы яркие цвета, на других темных цветах. И вообще я должен попытаться соответствовать соотношению контрастности окружающего текста, чтобы не быть слишком высоким или слишком низким контрастом. CurrentColor < /code>? < /p>

Код: Выделить всё

* {
--tint-fg: oklch(from currentColor
calc(.4 + .5 * l)
.2
calc(var(--tint) * 222deg));
--tint-bg: oklch(from currentColor
calc(.9 - .6 * l)
.1
calc(var(--tint) * 222deg));
}

.tint0 { --tint: 0; }
.tint1 { --tint: 1; }
.tint2 { --tint: 2; }
.tint3 { --tint: 3; }
.tint4 { --tint: 4; }
.tint5 { --tint: 5; }
.tint6 { --tint: 6; }
.tint7 { --tint: 7; }
.tint8 { --tint: 8; }

.tintbox {
stroke: currentColor;
fill: var(--tint-bg);
fill-opacity: 100%;
}

.tintline {
stroke: var(--tint-fg);
stroke-width: 2px;
fill: none;
fill-opacity: 0%;
}

text {
fill: currentColor;
stroke: none;
dominant-baseline: middle;
text-anchor: middle;
}

div {
display: flex;
align-items: center;
justify-content: center;
dominant-baseline: middle;
text-anchor: middle;
}< /code>




box



 
 
 
 




🍌banana for scale

 
🍌banana for scale

 
🍌banana for scale

 
🍌banana for scale

Подробнее здесь: https://stackoverflow.com/questions/797 ... and-graphs