CodeKitHubMis see tööriist on?
Värvisegisti interpoleerib lineaarselt kahe värvi punase, rohelise ja sinise kanali vahel valitud suhte alusel — sama matemaatika, mida gradient sisemiselt kasutab. 0% juures on tulemus värv A, 100% juures värv B ja 50% juures iga RGB kanali aritmeetiline keskmine.
See erineb füüsilise värvi segamisest (mis on subtraktiivne ja sõltub pigmendist) ega ole sama, mis keskmistamine HSL ruumis — lineaarne RGB interpolatsioon on see, mida CSS-gradiendid, disainitööriistad ja enamik "värv kahe värvi vahel" tööriistu kasutavad, nii et tulemus vastab sellele, mida näeksid brauseri gradiendis samade kahe värvi vahel.
Miks seda kasutada?
- Leia loomulik hover- või aktiivse oleku värv, mis jääb sinu põhivärvi ja aktsendi vahele — selle asemel, et arvata juhuslik kohandus.
- Näe täpset HEX koodi mis tahes suhte juures, mitte ainult silmaga hinnata gradiendi ekraanipilti.
- 11-astmeline redel annab sulle ühe klõpsuga täieliku palett ühest värvist teiseni, kasulik andmete visualiseerimiseks või mitmeastmeliseks gradiendiks.
- Klõpsa mis tahes astmel, et selle HEX kood kohe kopeerida.
- Tasuta, kohene ja täielikult kohalik — ei üleslaadimist ega kontot vaja.
Kuidas kasutada
- Vali värv A ja värv B värvivalijate abil või sisestades HEX koodi.
- Lohista suhte liugurit, et määrata, kui palju värvi B sisse segada.
- Loe värvinäidise kohal olevaid tulemuse HEX ja RGB väärtusi.
- Klõpsa allpool oleval 11-astmelisel redelil mis tahes näidisel, et selle HEX kood kopeerida.
Näide
Sisend
Värv A #3B82F6 (sinine), värv B #F59E0B (merevaigukollane), suhe 50%Tulemus
#9B9E7D — rgb(155, 158, 125)Täpselt 50% juures on iga RGB kanal kahe sisendvärvi kanalite aritmeetiline keskmine.
Korduma kippuvad küsimused
Miks see ei vasta sellele, mida saaksin päris värviga segades?
Värvi segamine on subtraktiivne (pigmendid neelavad valgust) ja sõltub konkreetsetest pigmentidest — sinise ja kollase värvi segamine annab näiteks rohelise. See tööriist segab valgust (RGB kanaleid) aditiivselt/lineaarselt, mis on viis, kuidas ekraanid, CSS-gradiendid ja enamik digitaalseid disainitööriistu värve segavad. Kaks süsteemi annavad kavatsuslikult erinevaid tulemusi, mitte vea tõttu.
Kas see on sama, mis CSS linear-gradient kahe värvi vahel?
Jah — CSS linear-gradient(colorA, colorB) interpoleerib RGB kanaleid samamoodi nagu see tööriist, nii et värv, mida näeksid selle gradiendi keskel, vastab siinsele 50% tulemusele.
Miks segatud värv mõnikord näeb hägune või hall välja?
Kahe küllastunud, kuid väga erineva tooni (nagu sinine ja oranž, mis on peaaegu komplementaarsed) segamine RGB ruumis annab sageli madala küllastusega hallikaspruuni vahepunkti — see on RGB interpolatsiooni tegelik omadus, mitte viga. Kui soovid elavamat segu, proovi segada värve, mis on värviratta peal üksteisele lähemal, või sega HSL ruumis, reguleerides tooni ja hoides küllastust kõrgena (midagi, mida see otsene RGB segisti ei tee).
Kas saan korraga segada rohkem kui kaks värvi?
Mitte ühe sammuga — tööriist segab täpselt kaks värvi. Kolme kombineerimiseks sega esimesed kaks valitud suhte juures, kopeeri tulemus ja kleebi see uue värvina A kolmanda värvi vastu. Etapiviisiline tegemine annab ka kontrolli kaalude üle, mida ühekordne kolmepoolne keskmistamine ei annaks.
Kas peaksin kasutama seda või värvitoonide generaatorit?
Kui vajad värvi, mis jääb kahe erineva värvi vahele — näiteks üleminekutooni brändi sinise ja aktsendi merevaigukollase vahel — kasuta seda segistit. Kui vajad ühe värvi heledamaid ja tumedamaid variante (hover-olekud, taustad, Tailwind-stiilis 50–900 redel), kasuta hoopis värvitoonide generaatorit: see hoiab tooni ja küllastuse fikseerituna ning muudab ainult heledust, nii et iga tulemus jääb selgelt samasse värviperekonda.
Milliseid värviformaate saan sisestusväljadele sisestada?
Tekstiväljad aktsepteerivad 6-kohalisi HEX koode, koos või ilma juhtiva #-ita (nt 3B82F6 või #3B82F6). Lühendatud 3-kohalist hex-koodi, rgb() süntaksit ja CSS värvinimesid seal ei tunnistata — kuid saad valida iga värvi visuaalselt iga välja kõrval oleva sisseehitatud värvivalija abil ning HEX väli uueneb vastavalt.