CodeKitHubKas yra šis įrankis?
Interneto spalvos rašomos keliais lygiaverčiais formatais, apibrėžtais CSS Color specifikacijoje MDN. HEX (#4f46e5) yra kompaktiška forma, naudojama visur CSS ir dizaino perdavime. RGB (rgb(79, 70, 229)) tiesiogiai nurodo raudonos, žalios ir mėlynos spalvų komponentus, kurių dažnai reikia kodui. HSL (hsl(243, 75%, 59%)) apibūdina atspalvį, sodrumą ir šviesumą — intuityviausią formatą koreguojant spalvą, pavyzdžiui, padarant ją tamsesnę ar mažiau sodrią.
Visi jie apibūdina tą pačią spalvą; šis įrankis tiksliai konvertuoja tarp jų ir rodo peržiūrą, kad galėtumėte patvirtinti, jog tai ta spalva, kurios norėjote.
Kodėl jį naudoti?
- Priima bet kokį formatą — HEX (3 ar 6 skaitmenų), RGB ar HSL — ir pateikia visus formatus.
- Gyva peržiūros paletė, kad matytumėte spalvą, ne vien skaičius.
- Vizualus spalvų parinkiklis, jei norite rinktis akimi.
- Kopijavimas vienu paspaudimu kiekvienam formatui, paruoštam CSS ar kodui.
- Nemokama, akimirksniu, be įkėlimo.
Kaip naudoti
- Įveskite arba įklijuokite spalvą: #4f46e5, rgb(79, 70, 229) ar hsl(243, 75%, 59%) — visi veikia.
- Arba spustelėkite spalvų parinkiklį ir rinkitės vizualiai.
- Perskaitykite visus tris formatus rezultatuose ir patikrinkite peržiūros paletę.
- Spustelėkite „Kopijuoti" prie reikiamo formato.
Pavyzdys
Įvestis
#4f46e5Išvestis
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Trys žymėjimai, viena identiška spalva.
Kokį formatą naudoti?
Visi trys tiksliai apibūdina tą pačią spalvą — pasirinkimas priklauso nuo to, kuris patogiausias konkrečiai užduočiai, o ne nuo tikslumo.
| Formatas | Geriausiai tinka | Kodėl |
|---|---|---|
| HEX (#4f46e5) | CSS, dizaino perdavimas, greitas kopijavimas | Trumpiausias įrašyti ir įklijuoti; universalus formatas dizaino įrankiuose, pvz., Figma. |
| RGB (rgb(79,70,229)) | Kodas, tiesiogiai valdantis kanalus, canvas/vaizdo darbas | Atitinka tai, kaip grafikos API ir vaizdo pikselių duomenys iš tikrųjų saugo spalvą. |
| HSL (hsl(243,75%,59%)) | Spalvos koregavimas — šviesesnė, tamsesnė, sodresnė/blankesnė | Šviesumas ir sodrumas yra atskiri skaičiai, kuriuos galite tiesiogiai koreguoti, kitaip nei HEX/RGB, kur keičiasi kiekvienas kanalas. |
Dažniausi naudojimo atvejai
- Spalvos parinkimas vizualiai dizaino įrankyje, tada konvertavimas į tikslią HEX ar RGB reikšmę, reikalingą CSS ar kode.
- Susijusių atspalvių rinkinio (šviesesnių/tamsesnių variantų) kūrimas konvertuojant į HSL, koreguojant šviesumą ir konvertuojant atgal.
- Prekės ženklo spalvos suderinimas tarp skirtingų įrankių, kurių kiekvienas tikisi kitokio formato — logotipo failas RGB, stiliaus vadovas HEX, CSS kintamasis, kuriam reikia HSL temoms.
- Patikrinimas, ar iš ekrano nuotraukos ar dizaino failo paimta spalva (dažnai pateikta kaip RGB) atitinka HEX reikšmę stilių lape.
Dažniausiai užduodami klausimai
Kada naudoti HSL vietoj HEX ar RGB?
Kai norite mąstyti apie spalvą loginiu būdu. Padaryti spalvą 10 % tamsesnę HSL formate reiškia sumažinti šviesumą 10 punktų; HEX ar RGB formatuose tektų iš naujo perskaičiuoti visus kanalus. Dizaino sistemos dažnai apibrėžia paletes HSL formatu būtent dėl šios priežasties.
Ar įrankis palaiko 3 skaitmenų HEX, pavyzdžiui, #fff?
Taip. #fff yra santrumpa formai #ffffff — kiekvienas skaitmuo padvigubinamas. Abi formos priimamos, o rezultatas rodomas pilna 6 skaitmenų forma.
O kaip su alfa (skaidrumu)?
Šis įrankis konvertuoja nepermatomas spalvas (RGB/HSL reikšmes). Jei reikia skaidrumo, pridėkite alfa patys: rgba(79, 70, 229, 0.5) arba #4f46e580 — spalvos dalis lieka ta pati.
Kodėl mano HSL reikšmės skiriasi 1 vienetu nuo kito įrankio?
Tai apvalinimas. HSL↔RGB konvertavimas duoda trupmenines reikšmes, o įrankiai jas apvalina skirtingai. ±1 skirtumas atspalvyje ar procentuose yra nematomas ir normalus.
Ar palaikomi spalvų pavadinimai, pvz., „red"?
Ne pirmame etape — įrankis sutelktas į tris skaitines formas, kurias programuotojai konvertuoja dažniausiai. Įveskite spalvos HEX/RGB/HSL reikšmę arba pasirinkite ją vizualiai parinkiklyje.
Kada naudoti HEX, RGB ar HSL?
Jei reikia skaidrumo, naudokite 8 skaitmenų HEX (#RRGGBBAA) arba rgba() — 6 skaitmenų HEX neturi alfa kanalo. Jei norite šviesesnių ar tamsesnių tos pačios spalvos variantų, lengviausia su HSL: palikite atspalvį ir sodrumą fiksuotą, keiskite tik šviesumo skaičių. Paprastam kopijavimui į CSS ar dizaino įrankius 6 skaitmenų HEX išlieka universaliausiai priimama forma.