CodeKitHubKas ir šis rīks?
Krāsu izvēlne pārvērš vizuālu izvēli — šo zilā toni, to precīzo pikseli logotipā — skaitliskos kodos, ko saprot programmatūra. Vienai un tai pašai krāsai ir vairāki ekvivalenti pieraksti: HEX (#3b82f6) dominē CSS un dizaina nodošanā, RGB (59, 130, 246) atbilst tam, kā ekrāni un kods attēlo krāsu, un HSL (217°, 91%, 60%) apraksta toni, piesātinājumu un gaišumu tā, lai cilvēks par to var domāt loģiski.
Rīka otra puse ir attēla pipete. Augšupielādē ekrānuzņēmumu, logotipu vai fotogrāfiju un noklikšķini jebkurā punktā, lai paņemtu paraugu no krāsas zem kursora — standarta veids, kā atbildēt uz jautājumu "kāda tieši ir šī krāsa?". Ja pārlūks atbalsta EyeDropper API, tiek izmantota vietējā palielinošā lupa; citos pārlūkos rīks nolasa pikseļa vērtību no attēla canvas kopijas. Abos gadījumos apstrāde ir lokāla: attēls nekad netiek augšupielādēts.
Kāpēc to izmantot?
- Trīs formāti vienlaikus: katra izvēlētā krāsa tiek parādīta kā HEX, RGB un HSL vienlaicīgi, katram ar kopēšanas pogu vienā klikšķī — nav nepieciešams atsevišķs pārveides solis.
- Izvēle no attēla: augšupielādē jebkuru bildi un noklikšķini, lai paņemtu paraugu no precīza pikseļa krāsas — ideāli, lai izgūtu zīmola krāsas no logotipa vai saskaņotu krāsu, kas redzēta ekrānuzņēmumā.
- Izmanto pārlūka iebūvēto EyeDropper ar palielinātāju, kad tas pieejams, un citur atgriežas pie precīzas pikseļu nolasīšanas no canvas.
- Tiešs priekšskatījuma paraugs uzreiz parāda pašreizējo krāsu, lai tu vari pārbaudīt izvēli pirms kopēšanas.
- Bezmaksas, tūlītēji un pilnībā lokāli: krāsas tiek aprēķinātas un attēli nolasīti tavā pārlūkā — nekas netiek augšupielādēts, saglabāts vai reģistrēts.
Kā to lietot
- Izvēlies krāsu ar krāsu lauku vai ielīmē/rediģē vērtību tieši.
- Lai ņemtu paraugu no attēla, augšupielādē to un noklikšķini punktā, kura krāsu vēlies.
- Izlasi HEX, RGB un HSL vērtības, kas parādītas kopā ar tiešu priekšskatījuma paraugu.
- Noklikšķini kopēšanas pogu pie vajadzīgā formāta — HEX priekš CSS, RGB vai HSL priekš koda.
Piemērs
Ievade
Noklikšķinot uz zilā laukuma augšupielādētajā logotipāIzvade
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Visas trīs rindas apraksta identisku krāsu. Izmanto HEX stilu failos un dizaina rīkos, RGB tur, kur kods sagaida kanālu vērtības, un HSL, kad vēlies iegūt gaišākus vai tumšākus variantus, mainot tikai pēdējo skaitli.
Kurš krāsu formāts kuram darbam
Mūsdienu CSS pieņem visus trīs formātus jebkurā vietā, kur krāsa ir atļauta, tāpēc izvēle ir par darba plūsmu, nevis saderību. Komandas parasti standartizē uz HEX dizaina marķieros, pēc tam izmanto HSL, izpētot variācijas — maini gaišumu par 10–15 punktiem, lai iegūtu lietojamu hover stāvokli, nemainot toni.
| Formāts | Piemērs | Vislabāk piemērots |
|---|---|---|
| HEX | #3b82f6 | CSS, dizaina rīki, krāsu koplietošana tērzēšanā un specifikācijās |
| RGB | rgb(59, 130, 246) | Kods, kas manipulē ar kanāliem, canvas zīmēšana, rgba() caurspīdīgums |
| HSL | hsl(217, 91%, 60%) | Gaišāku/tumšāku/hover variantu veidošana, palešu veidošana |
No izvēlētas krāsas līdz gatavam CSS
Krāsas parauga ņemšana parasti ir stila uzdevuma pirmais solis. Ja tev vajadzīga tā pati krāsa citos pierakstos — CMYK druku vajadzībām vai OKLCH vērtība plaša krāsu gammas CSS —, Krāsu pārveidotājs turpina tur, kur šī izvēlne beidz.
Izvēlētā krāsa bieži nonāk tieši vizuālā efektā: Box Shadow ģenerators pieņem HEX vērtību reālistiskām ēnām, un noapaļotas kartes, kas veidotas ar Border Radius ģeneratoru, papildina izskatu.
→ Krāsu pārveidotājs · Box Shadow ģenerators · Border Radius ģenerators
Biežāk uzdotie jautājumi
Kāda ir atšķirība starp HEX, RGB un HSL?
Tie ir trīs pieraksti vienam un tam pašam krāsu modelim. HEX iesaiņo sarkano, zaļo un zilo kanālu sešos heksadecimālos ciparos (#3b82f6) un ir visbiežāk sastopamā forma CSS un dizaina rīkos. RGB uzskaita tos pašus trīs kanālus kā decimālskaitļus no 0 līdz 255. HSL izsaka krāsu no jauna kā toni (0–360°), piesātinājumu un gaišumu — daudz intuitīvāk, kad vēlies "to pašu krāsu, tikai gaišāku". Pārveidošana starp tiem nekad nemaina krāsu.
Kā darbojas krāsas izvēle no attēla?
Augšupielādētais attēls tiek uzzīmēts uz neredzama canvas tavā pārlūkā. Kad tu noklikšķini, rīks nolasa sarkanā, zaļā un zilā kanāla vērtības pikselim tieši šajā pozīcijā un pārveido tās HEX, RGB un HSL formātā. Pārlūkos, kas atbalsta EyeDropper API (Chrome un Edge datorā), tā vietā atveras vietējā palielinošā lupa, lai vari izvēlēties ar pikseļa precizitāti jebkurā ekrāna vietā.
Vai mans attēls tiek kaut kur augšupielādēts?
Nē. Attēlu atver tieši tavs pārlūks un nolasa lokāli no canvas; neviens fails un neviens krāsas dati nekad netiek pārsūtīti vai saglabāti. Tu vari ielādēt lapu, atslēgties no interneta, un gan izvēlne, gan attēla pipete turpina darboties — tas padara to drošu neizlaistiem dizainiem un iekšējiem ekrānuzņēmumiem.
Kāpēc izvēlētā krāsa precīzi nesakrīt ar to, ko redzu ekrānā?
Divi biežākie iemesli. Nogludināšana (anti-aliasing): pikseļi teksta un formu malās tiek sajaukti ar fonu, tāpēc noklikšķinot uz vienu pikseli malā, iegūsi starpkrāsu — tā vietā ņem paraugu no laukuma viendabīga vidus. Krāsu pārvaldība: JPG/PNG faili ar neparastiem krāsu profiliem var atveidoties nedaudz atšķirīgi dažādos displejos; rīks ziņo pikseļa vērtību tā, kā tā saglabāta failā, kas ir vērtība, kas nepieciešama dizaina darbam.
Kuru formātu kopēt CSS?
HEX ir drošākais noklusējums — to pieņem katrs pārlūks un rīks. Izmanto HSL, ja plāno izveidot hover vai tumšā režīma variantus, jo tikai gaišuma komponentes pielāgošana saglabā toni un piesātinājumu nemainīgu. RGB galvenokārt noder, kad kods veido krāsas no skaitliskiem kanāliem, vai pievienojot caurspīdīgumu, kur rgba(59, 130, 246, 0.5) izskatās skaidrāk nekā astoņu ciparu HEX.