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

[Anonymous]

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

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

.tone1 { fill: oklch(from currentColor calc(.9 - .6 * l) .1 .000turn); }
.tone2 { fill: oklch(from currentColor calc(.9 - .6 * l) .1 .618turn); }
.tone3 { fill: oklch(from currentColor calc(.9 - .6 * l) .1 .236turn); }
.tone4 { fill: oklch(from currentColor calc(.9 - .6 * l) .1 .854turn); }
.tone5 { fill: oklch(from currentColor calc(.9 - .6 * l) .1 .472turn); }
.tone6 { fill: oklch(from currentColor calc(.9 - .6 * l) .1 .090turn); }
.tone7 { fill: oklch(from currentColor calc(.9 - .6 * l) .1 .708turn); }
.tone8 { fill: oklch(from currentColor calc(.9 - .6 * l) .1 .326turn); }
.tone9 { fill: oklch(from currentColor calc(.9 - .6 * l) .1 .922turn); }

.tone1 { stroke: oklch(from currentColor calc(.4 + .5 * l) .2 .000turn); }
.tone2 { stroke: oklch(from currentColor calc(.4 + .5 * l) .2 .618turn); }
.tone3 { stroke: oklch(from currentColor calc(.4 + .5 * l) .2 .236turn); }
.tone4 { stroke: oklch(from currentColor calc(.4 + .5 * l) .2 .854turn); }
.tone5 { stroke: oklch(from currentColor calc(.4 + .5 * l) .2 .472turn); }
.tone6 { stroke: oklch(from currentColor calc(.4 + .5 * l) .2 .090turn); }
.tone7 { stroke: oklch(from currentColor calc(.4 + .5 * l) .2 .708turn); }
.tone8 { stroke: oklch(from currentColor calc(.4 + .5 * l) .2 .326turn); }
.tone9 { stroke: oklch(from currentColor calc(.4 + .5 * l) .2 .922turn); }

rect {
stroke: currentColor;
fill-opacity: 100%;
}

path {
stroke-width: 2px;
fill: none;
fill-opacity: 0%;
}

text {
stroke: none;
fill: currentColor;
}

svg {
dominant-baseline: middle;
text-anchor: middle;
}
svg .filltone {
fill-opacity: 100%;
stroke: currentColor;
}
svg .stroketone {
fill: none;
}

div {
display: flex;
align-items: center;
justify-content: center;
}< /code>







box



 
 
 
 





🍌banana for scale

 
🍌banana for scale

 
🍌banana for scale

 
🍌banana for scale

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