CodeKitHubMis see tööriist on?
Värvivalija muudab visuaalse valiku — selle sinise tooni, selle täpse piksli logol — numbrilisteks koodideks, millest tarkvara aru saab. Samal värvil on mitu samaväärset tähistust: HEX (#3b82f6) domineerib CSS-is ja disainiüleandmisel, RGB (59, 130, 246) vastab sellele, kuidas ekraanid ja kood värvi esitavad, ning HSL (217°, 91%, 60%) kirjeldab tooni, küllastust ja heledust viisil, millest inimene saab aru.
Tööriista teine pool on pildi pipett. Laadi üles ekraanipilt, logo või foto ja klõpsa suvalises punktis, et proovida kursori all olevat värvi — tavaline viis vastata küsimusele "mis värv see täpselt on?". Kui brauser toetab EyeDropper API-t, kasutatakse sisseehitatud suurendavat luupi; teistes brauserites loeb tööriist piksli väärtuse pildi canvas-koopialt. Mõlemal juhul toimub töötlus kohapeal: pilti ei laadita üles.
Miks seda kasutada?
- Kolm vormingut korraga: iga valitud värv kuvatakse HEX-, RGB- ja HSL-kujul samal ajal, igaühel oma kopeerimisnupp — eraldi muundamissammu pole vaja.
- Vali pildilt: laadi üles suvaline pilt ja klõpsa, et proovida täpset piksli värvi — ideaalne brändivärvide logolt kättesaamiseks või ekraanipildil nähtud värvi tabamiseks.
- Kasutab brauseri sisseehitatud EyeDropperit koos suurendajaga, kui saadaval, ja langeb mujal tagasi täpsele canvase piksli lugemisele.
- Elav eelvaatepind näitab hetke värvi ühe pilguga, nii et saad valiku enne kopeerimist üle kontrollida.
- Tasuta, kohene ja täielikult kohalik: värvid arvutatakse ja pildid loetakse sinu brauseris — midagi ei laadita üles, salvestata ega logita.
Kuidas kasutada
- Vali värv värviväljal või kleebi/muuda väärtust otse.
- Pildilt proovimiseks laadi üles pilt ja klõpsa punktil, mille värvi soovid.
- Loe HEX, RGB ja HSL väärtused, mida näidatakse koos elava eelvaatepinnaga.
- Klõpsa vajaliku vormingu kõrval olevat kopeerimisnuppu — HEX CSS-i jaoks, RGB või HSL koodi jaoks.
Näide
Sisend
Klõpsad üleslaaditud logo sinisel alalTulemus
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Kõik kolm rida kirjeldavad identset värvi. Kasuta HEX-i stiilifailides ja disainitööriistades, RGB-d seal, kus kood ootab kanaliväärtusi, ja HSL-i, kui tahad tuletada heledamaid või tumedamaid variante, muutes ainult viimast numbrit.
Milline värvivorming millise töö jaoks
Kaasaegne CSS aktsepteerib kõiki kolme igal pool, kus värv on lubatud, seega on valik pigem töövoo, mitte ühilduvuse küsimus. Meeskonnad standardiseerivad tavaliselt disainitokenites HEX-i ja kasutavad variatsioonide uurimisel HSL-i — muuda heledust 10–15 punkti võrra, et saada kasutatav hover-olek ilma tooni nihutamata.
| Vorming | Näide | Sobib kõige paremini |
|---|---|---|
| HEX | #3b82f6 | CSS, disainitööriistad, värvide jagamine vestluses ja spetsifikatsioonides |
| RGB | rgb(59, 130, 246) | Kanaleid manipuleeriv kood, canvase joonistamine, rgba() läbipaistvus |
| HSL | hsl(217, 91%, 60%) | Heledamate/tumedamate/hover-variantide loomine, palettide koostamine |
Valitud värvist valmis CSS-ini
Värvi proovimine on tavaliselt kujundusülesande esimene samm. Kui vajad sama värvi muudes tähistustes — CMYK trükiks või OKLCH väärtus laia värviruumiga CSS-i jaoks —, jätkab Värvimuundur sealt, kus see valija lõpetab.
Valitud värv liigub sageli otse visuaalsesse efekti: Box Shadow Generator võtab HEX väärtuse realistlike varjude jaoks ja Border Radius Generatoriga loodud ümarad kaardid täiendavad välimust.
→ Värvimuundur · Box Shadow Generaator · Border Radius Generaator
Korduma kippuvad küsimused
Mis vahe on HEX-il, RGB-l ja HSL-il?
Need on kolm tähistust sama värvimudeli jaoks. HEX pakib punase, rohelise ja sinise kanali kuude kuueteistkümnendkoha märki (#3b82f6) ja on levinuim vorming CSS-is ja disainitööriistades. RGB loetleb samad kolm kanalit kümnendarvudena 0 kuni 255. HSL väljendab värvi ümber toonina (0–360°), küllastusena ja heledusena — palju intuitiivsem, kui tahad "sama värvi, ainult heledamana". Nendevaheline muundamine ei muuda kunagi värvi ennast.
Kuidas toimib värvi valimine pildilt?
Üleslaaditud pilt joonistatakse sinu brauseris nähtamatule canvasele. Kui klõpsad, loeb tööriist selle täpse asukoha piksli punase, rohelise ja sinise väärtuse ning muudab need HEX-, RGB- ja HSL-kujuks. Brauserites, mis toetavad EyeDropper API-t (Chrome ja Edge lauaarvutis), avaneb selle asemel sisseehitatud suurendav luup, nii et saad valida pikslitäpsusega mis tahes ekraanilt.
Kas mu pilt laaditakse kuhugi üles?
Ei. Pildi avab brauser otse ja loeb selle kohapeal canvaselt; ühtki faili ega värviandmeid kunagi ei edastata ega salvestata. Sa saad lehe laadida, minna võrguühenduseta ja nii valija kui pildi pipett töötavad edasi — mis teeb selle turvaliseks kasutamiseks avaldamata kujunduste ja sisemiste ekraanipiltide puhul.
Miks valitud värv ei kattu täpselt sellega, mida ekraanil näen?
Kaks tavalist põhjust. Servasiledus (anti-aliasing): teksti ja kujude servadel olevad pikslid on taustaga segunenud, seega annab ühe piksli mööda klõpsamine vaheldunud värvi — proovi selle asemel ala kindlast keskosast. Värvihaldus: ebatavaliste värviprofiilidega JPG/PNG failid võivad eri ekraanidel veidi erinevalt renderduda; tööriist annab piksli väärtuse nii, nagu see failis salvestatud on, mis ongi disainitöö jaoks õige väärtus.
Millist vormingut peaksin CSS-i jaoks kopeerima?
HEX on kõige turvalisem vaikevalik — iga brauser ja tööriist aktsepteerib seda. Kasuta HSL-i, kui plaanid luua hover- või tumeda režiimi variante, sest ainult heledusosa kohandamine hoiab tooni ja küllastuse samana. RGB on kasulik peamiselt siis, kui kood loob värve arvuliste kanalite põhjal, või läbipaistvuse lisamisel, kus rgba(59, 130, 246, 0.5) on selgem kui kaheksanumbriline HEX.