Farveblandingsgenerator
Generér lysere blandinger af en farve ved at blande den med hvid i jævne trin. Indtast én farve i et vilkårligt CSS-format, vælg 2 til 20 trin og et blandingsfarverum, og få en tabel med HEX-, RGB-, HSL- og OKLCH-værdier for hver blanding, begyndende med den oprindelige farve. Blanding i sRGB svarer til klassiske værktøjer til farveblandinger og Sass, mens OKLab giver perceptuelt jævne trin. Ideelt til baggrunde, svævetilstande og farveskalaer.
Ofte stillede spørgsmål
Hvad er en farveblanding?
En farveblanding er en farve blandet med hvid. Den beholder sin farvetone og bliver lysere og blegere, i modsætning til en nuance, der blandes med sort, eller en tone, der blandes med grå.
Hvordan fordeles trinnene?
Med N trin blandes farven i række k med (k - 1) / N hvid, så 10 trin giver 0 %, 10 %, 20 % og så videre op til 90 %. Den første række er altid den oprindelige farve, og ren hvid indgår aldrig i listen.
Hvad er forskellen på blanding i sRGB og OKLab?
Blanding i sRGB beregner gennemsnittet af de gammakodede kanalværdier, hvilket Sass mix() gør med hvid, ligesom de fleste klassiske farveblandingsgeneratorer. Blanding i OKLab foregår i et perceptuelt farverum, så lyshedstrinnene ser mere jævne ud, og den lyse ende bliver ikke udvasket så hurtigt.
Hvilke inputformater kan jeg bruge?
Hexkoder med eller uden #, CSS-farvenavne, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() og cmyk(). Indtast én farve pr. kørsel.
Hvor mange farveblandinger kan jeg generere?
Mellem 2 og 20 pr. kørsel, som standard 10. Antallet inkluderer den oprindelige farve i første række.
Hvilke værdier viser tabellen?
For hvert trin vises andelen af hvid, hexkoden, rgb(), hsl() og oklch() i moderne CSS-syntaks. RGB-kanaler er hele tal, HSL-procenter har op til to decimaler, og OKLCH-lyshed og -kroma har op til fire.
Hvad sker der med gennemsigtige farver?
Inputtets alfaværdi bevares for hver blanding, fordi hvid blandes i med samme alfaværdi. Hexkoderne har derfor 8 cifre, og CSS-funktionerne slutter med alfaværdien efter en skråstreg.
Hvad sker der med farver uden for sRGB?
Blandingen bruger hele farven, men HEX, RGB og HSL kan kun vise sRGB, så trin uden for farverummet tilpasses sRGB med CSS Color 4-algoritmen i disse kolonner. OKLCH-kolonnen beholder den ikke-tilpassede værdi.
Hvordan bruger jeg farveblandingerne i CSS?
Kopiér hex- eller oklch()-værdierne til brugerdefinerede egenskaber som --brand-100 og --brand-200. Hvis du vil blande i browseren i stedet, giver color-mix(in oklab, var(--brand) 80%, white) den samme blanding med 20 % som OKLab-indstillingen.
Kan jeg bruge hvid tekst på en lys farveblanding?
Som regel ikke, fordi lyse farveblandinger har lav kontrast mod hvid. Brug mørk tekst på lyse farveblandinger, og kontrollér hvert par med et kontrastværktøj; normal tekst kræver mindst 4.5:1 for WCAG AA.