CodeKitHubKas yra šis įrankis?
Spalvų parinkiklis vizualų pasirinkimą — šį mėlynos atspalvį, tą tikslų pikselį logotipe — paverčia skaitiniais kodais, kuriuos supranta programinė įranga. Ta pati spalva turi kelis lygiaverčius žymėjimus: HEX (#3b82f6) dominuoja CSS ir dizaino perdavime, RGB (59, 130, 246) atitinka tai, kaip ekranai ir kodas reprezentuoja spalvą, o HSL (217°, 91%, 60%) apibūdina atspalvį, sodrumą ir šviesumą taip, kad žmogui būtų lengva suprasti.
Antra įrankio dalis — nuotraukos pipetė. Įkelkite ekrano nuotrauką, logotipą ar fotografiją ir spustelėkite bet kurį tašką, kad nuskaitytumėte spalvą po žymekliu — standartinis būdas atsakyti į klausimą „kokia tiksliai čia spalva?". Kur naršyklė palaiko EyeDropper API, naudojamas natyvus padidinamas lupas įrankis; kitose naršyklėse įrankis nuskaito pikselio reikšmę iš nuotraukos kopijos drobėje. Abiem atvejais apdorojimas vyksta vietoje: nuotrauka niekada neįkeliama į serverį.
Kodėl jį naudoti?
- Trys formatai vienu metu: kiekviena pasirinkta spalva rodoma kaip HEX, RGB ir HSL vienu metu, kiekviena su kopijavimo mygtuku vienu paspaudimu — atskiro konvertavimo žingsnio nereikia.
- Rinkitės iš nuotraukos: įkelkite bet kokią nuotrauką ir spustelėkite, kad nuskaitytumėte tikslią pikselio spalvą — puikiai tinka prekės ženklo spalvoms ištraukti iš logotipo ar suderinti ekrano nuotraukoje matomą spalvą.
- Naudoja naršyklės natyvų EyeDropper su didinimo lupa, jei prieinamas, o kitur pereina prie tikslaus pikselio nuskaitymo drobėje.
- Gyva peržiūros paletė vienu žvilgsniu rodo dabartinę spalvą, kad galėtumėte patikrinti pasirinkimą prieš kopijuodami.
- Nemokama, akimirksniu ir visiškai vietinė: spalvos skaičiuojamos, o nuotraukos nuskaitomos jūsų naršyklėje — niekas neįkeliama, nesaugoma ir neregistruojama.
Kaip naudoti
- Pasirinkite spalvą spalvos lauke arba įklijuokite/redaguokite reikšmę tiesiogiai.
- Norėdami nuskaityti iš nuotraukos, įkelkite paveikslėlį ir spustelėkite tašką, kurio spalvos norite.
- Peržiūrėkite HEX, RGB ir HSL reikšmes, rodomas kartu su gyva peržiūros paletę.
- Spustelėkite kopijavimo mygtuką šalia reikiamo formato — HEX stilių lapams, RGB ar HSL kodui.
Pavyzdys
Įvestis
Spustelėjus mėlyną įkeltos logotipo srities dalįIšvestis
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Visos trys eilutės apibūdina tą pačią spalvą. Naudokite HEX stilių lapuose ir dizaino įrankiuose, RGB ten, kur kodui reikia kanalų reikšmių, ir HSL, kai norite gauti šviesesnius ar tamsesnius variantus keisdami tik paskutinį skaičių.
Koks spalvos formatas kuriam darbui
Šiuolaikinis CSS priima visus tris formatus visur, kur leidžiama spalva, tad pasirinkimas priklauso nuo darbo eigos, o ne suderinamumo. Komandos dažniausiai standartizuoja HEX dizaino žetonuose, o tyrinėdamos variantus naudoja HSL — pakeitus šviesumą 10–15 punktų gaunama tinkama hover būsena nekeičiant atspalvio.
| Formatas | Pavyzdys | Geriausiai tinka |
|---|---|---|
| HEX | #3b82f6 | CSS, dizaino įrankiai, spalvų dalijimasis pokalbiuose ir specifikacijose |
| RGB | rgb(59, 130, 246) | Kodas, valdantis kanalus, canvas piešimas, rgba() skaidrumas |
| HSL | hsl(217, 91%, 60%) | Šviesesnių/tamsesnių/hover variantų kūrimas, palečių sudarymas |
Nuo parinktos spalvos iki gatavo CSS
Spalvos parinkimas paprastai yra pirmasis stiliaus užduoties žingsnis. Jei tos pačios spalvos reikia kitais žymėjimais — CMYK spausdinimui ar OKLCH reikšme plataus gamos CSS — Spalvų keitiklis tęsia nuo ten, kur baigia šis parinkiklis.
Parinkta spalva dažnai iš karto naudojama vizualiam efektui: Box Shadow generatorius priima HEX reikšmę realistiniams šešėliams, o su Border Radius generatoriumi sukurtos suapvalintos kortelės užbaigia išvaizdą.
→ Spalvų keitiklis · box-shadow generatorius · border-radius generatorius
Dažniausiai užduodami klausimai
Kuo skiriasi HEX, RGB ir HSL?
Tai trys žymėjimai tam pačiam spalvų modeliui. HEX supakuoja raudoną, žalią ir mėlyną kanalus į šešis šešioliktainius skaitmenis (#3b82f6) ir yra dažniausia forma CSS ir dizaino įrankiuose. RGB pateikia tuos pačius tris kanalus kaip dešimtainius skaičius nuo 0 iki 255. HSL perteikia spalvą kaip atspalvį (0–360°), sodrumą ir šviesumą — kur kas intuityviau, kai norite „tos pačios spalvos, tik šviesesnės". Konvertavimas tarp jų niekada nekeičia pačios spalvos.
Kaip veikia spalvos parinkimas iš nuotraukos?
Įkelta nuotrauka nupiešiama nematomoje drobėje jūsų naršyklėje. Kai spustelėjate, įrankis nuskaito raudoną, žalią ir mėlyną to tikslaus taško pikselio reikšmes ir konvertuoja jas į HEX, RGB ir HSL. Naršyklėse, palaikančiose EyeDropper API (Chrome ir Edge kompiuteryje), vietoj to atsidaro natyvus didinamasis lupas įrankis, leidžiantis rinktis su pikselio tikslumu bet kur ekrane.
Ar mano nuotrauka kur nors įkeliama?
Ne. Nuotrauka atveriama tiesiogiai jūsų naršyklėje ir nuskaitoma vietoje iš drobės; joks failas ir jokie spalvų duomenys niekada nesiunčiami ir nesaugomi. Galite įkelti puslapį, atsijungti nuo interneto, ir tiek parinkiklis, tiek nuotraukos pipetė toliau veiks — tai saugu naudoti dar neišleistiems dizainams ir vidinėms ekrano nuotraukoms.
Kodėl parinkta spalva tiksliai neatitinka to, ką matau ekrane?
Dvi dažniausios priežastys. Glotninimas (anti-aliasing): teksto ir figūrų kraštų pikseliai sumaišomi su fonu, todėl spustelėjus vienu pikseliu šalia gaunama tarpinė spalva — vietoj to imkite pavyzdį iš vientisos srities vidurio. Spalvų valdymas: JPG/PNG failai su neįprastais spalvų profiliais gali skirtingai atrodyti skirtinguose ekranuose; įrankis praneša pikselio reikšmę tokią, kokia įrašyta faile — tai ir yra reikšmė, kurios reikia dizaino darbui.
Kurį formatą kopijuoti CSS?
HEX yra saugiausias numatytasis pasirinkimas — jį priima kiekviena naršyklė ir įrankis. Naudokite HSL, kai planuojate kurti hover ar tamsios temos variantus, nes koreguojant tik šviesumo komponentą atspalvis ir sodrumas išlieka nuoseklūs. RGB naudingas daugiausia tada, kai kodas kuria spalvas iš skaitinių kanalų arba pridedant skaidrumą, kur rgba(59, 130, 246, 0.5) skaitosi aiškiau nei aštuonių skaitmenų HEX.