CodeKitHubKas ir šis rīks?
Krāsu maisītājs lineāri interpolē starp divu krāsu sarkano, zaļo un zilo kanālu izvēlētajā proporcijā — tā pati matemātika, ko iekšēji izmanto gradients. Pie 0% rezultāts ir Krāsa A, pie 100% tā ir Krāsa B, un pie 50% tas ir katra RGB kanāla aritmētiskais vidējais.
Tas atšķiras no fizisku krāsu sajaukšanas (kas ir subtraktīva un atkarīga no pigmenta), un tas nav tas pats, kas vidējošana HSL telpā — lineārā RGB interpolācija ir tas, ko izmanto CSS gradienti, dizaina rīki un lielākā daļa "krāsa starp divām krāsām" rīku, tāpēc rezultāts atbilst tam, ko redzētu pārlūka gradientā starp tām pašām divām krāsām.
Kāpēc to izmantot?
- Atrodiet dabiski izskatošos hover vai aktīvā stāvokļa krāsu, kas atrodas starp jūsu bāzes krāsu un akcentu — nevis minot nejaušu pielāgojumu.
- Redziet precīzu HEX kodu jebkurā proporcijā, nevis tikai novērtējiet ar aci gradienta ekrānuzņēmumu.
- 11 soļu skala vienā klikšķī sniedz pilnu paleti no vienas krāsas līdz otrai, noderīga datu vizualizācijai vai daudzpakāpju gradientam.
- Noklikšķiniet uz jebkura soļa, lai nekavējoties nokopētu tā HEX kodu.
- Bezmaksas, tūlītējs un pilnībā lokāls — bez augšupielādes, bez konta.
Kā to lietot
- Izvēlieties Krāsu A un Krāsu B, izmantojot krāsu izvēlētājus vai ierakstot HEX kodu.
- Velciet proporcijas slīdni, lai iestatītu, cik daudz Krāsas B iejaukt.
- Nolasiet iegūtās HEX un RGB vērtības virs parauga.
- Noklikšķiniet uz jebkura parauga zemāk redzamajā 11 soļu skalā, lai nokopētu tā HEX kodu.
Piemērs
Ievade
Krāsa A #3B82F6 (zila), Krāsa B #F59E0B (dzintara), proporcija 50%Izvade
#9B9E7D — rgb(155, 158, 125)Tieši pie 50% katrs RGB kanāls ir abu ievades krāsu kanālu aritmētiskais vidējais.
Biežāk uzdotie jautājumi
Kāpēc tas neatbilst tam, ko iegūtu, sajaucot īstu krāsu?
Krāsu sajaukšana ir subtraktīva (pigmenti absorbē gaismu) un atkarīga no konkrētajiem iesaistītajiem pigmentiem — piemēram, zilas un dzeltenas krāsas sajaukšana dod zaļu. Šis rīks sajauc gaismu (RGB kanālus) adaptīvi/lineāri, tā, kā ekrāni, CSS gradienti un lielākā daļa digitālo dizaina rīku sajauc krāsas. Abas sistēmas apzināti dod patiesi atšķirīgus rezultātus, nevis kļūdas dēļ.
Vai tas ir tas pats, kas CSS linear-gradient starp divām krāsām?
Jā — CSS linear-gradient(colorA, colorB) interpolē RGB kanālus tāpat, kā to dara šis rīks, tāpēc krāsa, ko redzētu šī gradienta vidū, atbilst 50% rezultātam šeit.
Kāpēc sajauktā krāsa dažreiz izskatās duļķaina vai pelēka?
Divu piesātinātu, bet ļoti atšķirīgu toņu (piemēram, zilas un oranžas, kas ir gandrīz komplementāras) sajaukšana RGB telpā bieži rada zema piesātinājuma, pelēcīgi brūnu vidus punktu — tā ir reāla RGB interpolācijas īpašība, nevis kļūda. Ja vēlaties spilgtāku maisījumu, mēģiniet sajaukt krāsas, kas ir tuvāk viena otrai krāsu ritenī, vai sajauciet HSL telpā, pielāgojot toni un saglabājot augstu piesātinājumu (ko šis tiešais RGB maisītājs nedara).
Vai varu vienlaikus sajaukt vairāk nekā divas krāsas?
Ne vienā solī — rīks sajauc tieši divas krāsas. Lai apvienotu trīs, sajauciet pirmās divas izvēlētajā proporcijā, nokopējiet rezultātu un ielīmējiet to kā jauno Krāsu A pret jūsu trešo krāsu. Darot to pa posmiem, jūs iegūstat arī kontroli pār svēršanu, ko vienota trīspusēja vidējošana nedotu.
Vai man vajadzētu izmantot šo vai Krāsu toņu ģeneratoru?
Ja jums nepieciešama krāsa, kas atrodas starp divām dažādām krāsām — teiksim, pārejas tonis starp jūsu zīmola zilo un dzintara akcentu — izmantojiet šo maisītāju. Ja jums nepieciešami gaišāki un tumšāki vienas krāsas varianti (hover stāvokļi, foni, Tailwind stila 50–900 skala), tā vietā izmantojiet Krāsu toņu ģeneratoru: tas saglabā fiksētu toni un piesātinājumu un maina tikai gaišumu, tāpēc katrs rezultāts skaidri paliek tajā pašā krāsu saimē.
Kādus krāsu formātus varu ierakstīt ievades laukos?
Teksta lauki pieņem 6 ciparu HEX kodus, ar sākuma # vai bez tā (piem., 3B82F6 vai #3B82F6). Saīsināts 3 ciparu hex, rgb() apzīmējums un CSS krāsu nosaukumi tur netiek atpazīti — bet jūs varat vizuāli izvēlēties jebkuru krāsu, izmantojot iebūvēto krāsu izvēlētāju blakus katram laukam, un HEX lauks attiecīgi atjaunināsies.