CodeKitHubMis see tööriist on?
Veebis kirjutatakse värve mitmes samaväärses vormingus, mis kõik on määratletud CSS Color spetsifikatsioonis MDN-is. HEX (#4f46e5) on kompaktne vorm, mida kasutatakse igal pool CSS-is ja disainiüleandmisel. RGB (rgb(79, 70, 229)) määrab otse punase, rohelise ja sinise komponendi, mida kood tihti vajab. HSL (hsl(243, 75%, 59%)) kirjeldab tooni, küllastust ja heledust — kõige intuitiivsem vorming värvi kohandamiseks, näiteks selle tumedamaks või vähem küllastunuks muutmiseks.
Kõik kirjeldavad sama värvi; see tööriist muudab need täpselt üksteiseks ja näitab eelvaadet, et kinnitada, kas see on soovitud värv.
Miks seda kasutada?
- Aktsepteerib sisendina suvalist vormingut — HEX (3- või 6-numbriline), RGB või HSL — ja annab väljundiks kõik vormingud.
- Elav eelvaatepind, et sa näeksid värvi, mitte ainult numbreid.
- Visuaalne värvivalija, kui eelistad valida silma järgi.
- Ühe klõpsuga kopeerimine iga vormingu jaoks, valmis CSS-i või koodi jaoks.
- Tasuta, kohene, midagi ei laadita üles.
Kuidas kasutada
- Trüki või kleebi värv: #4f46e5, rgb(79, 70, 229) või hsl(243, 75%, 59%) toimivad kõik.
- Või klõpsa värvivalijal ja vali visuaalselt.
- Loe kõik kolm vormingut tulemustest ja kontrolli eelvaatepinda.
- Klõpsa "Copy" vajaliku vormingu kõrval.
Näide
Sisend
#4f46e5Tulemus
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Kolm tähistust, üks identne värv.
Millist vormingut peaksid kasutama?
Kõik kolm kirjeldavad täpselt sama värvi — valik käib selle üle, milline on antud ülesande jaoks kõige mugavam, mitte täpsuse üle.
| Vorming | Sobib kõige paremini | Miks |
|---|---|---|
| HEX (#4f46e5) | CSS, disainiüleandmine, kiire kopeerimine-kleepimine | Kõige lühem trükkida ja kleepida; universaalne vorming disainitööriistades nagu Figma. |
| RGB (rgb(79,70,229)) | Kood, mis manipuleerib kanaleid otse, canvase/pildi töötlus | Vastab sellele, kuidas graafika-API-d ja pikslite andmed värvi tegelikult salvestavad. |
| HSL (hsl(243,75%,59%)) | Värvi kohandamine — heledam, tumedam, rohkem/vähem küllastunud | Heledus ja küllastus on eraldi numbrid, mida saad otse muuta, erinevalt HEX-ist/RGB-st, kus iga kanal muutub. |
Levinud kasutusjuhud
- Värvi visuaalne valimine disainitööriistas ja seejärel selle muutmine täpseks HEX- või RGB-väärtuseks, mida CSS-is või koodis vajad.
- Seotud toonide komplekti (heledam/tumedam variant) genereerimine, muutes HSL-iks, kohandades heledust ja muutes tagasi.
- Brändivärvi ühtlustamine eri tööriistade vahel, mis kõik ootavad erinevat vormingut — logofail RGB-s, stiilijuhis HEX-is, CSS-muutuja, mis vajab teemastamiseks HSL-i.
- Kontrollimine, kas ekraanipildilt või disainifailist saadud värv (sageli RGB kujul) vastab stiililehe HEX väärtusele.
Korduma kippuvad küsimused
Millal kasutada HSL-i, mitte HEX-i või RGB-d?
Kui tahad värvist arutleda. Värvi 10% tumedamaks muutmine HSL-is tähendab heleduse langetamist 10 punkti võrra; HEX-is või RGB-s peaksid kõik kanalid uuesti arvutama. Disainisüsteemid defineerivad paletid tihti just seetõttu HSL-is.
Kas tööriist toetab 3-numbrilist HEX-i nagu #fff?
Jah. #fff on lühend kujust #ffffff — iga number kahekordistatakse. Mõlemad vormid on aktsepteeritud ja väljund näitab täielikku 6-numbrilist vormi.
Kuidas on lood läbipaistvusega (alfa)?
See tööriist muudab läbipaistmatuid värve (RGB/HSL väärtusi). Kui vajad läbipaistvust, lisa alfa ise: rgba(79, 70, 229, 0.5) või #4f46e580 — värviosa jääb samaks.
Miks minu HSL väärtused erinevad teisest tööriistast 1 võrra?
Ümardamine. HSL↔RGB muundamine annab murdarvulisi väärtusi ja tööriistad ümardavad erinevalt. ±1 erinevus toonis või protsendis on nähtamatu ja normaalne.
Kas värvinimed nagu 'red' on toetatud?
Mitte esimeses etapis — tööriist keskendub kolmele numbrilisele vormingule, mida arendajad kõige rohkem muudavad. Sisesta värvi HEX/RGB/HSL väärtus või vali see visuaalselt valijaga.
Millal kasutada HEX-i, RGB-d või HSL-i?
Kui vajad läbipaistvust, kasuta 8-numbrilist HEX-i (#RRGGBBAA) või rgba() — 6-numbrilisel HEX-il alfakanalit pole. Kui tahad sama värvi heledamaid või tumedamaid variante, on HSL kõige lihtsam: hoia toon ja küllastus samana ning muuda ainult heleduse numbrit. Lihtsaks kopeerimiseks-kleepimiseks CSS-i või disainitööriistadesse jääb 6-numbriline HEX kõige universaalsemalt aktsepteeritud vormiks.