CodeKitHubKas ir šis rīks?
Krāsas tīmeklī tiek rakstītas vairākos ekvivalentos formātos, kas visi definēti CSS Color specifikācijā MDN. HEX (#4f46e5) ir kompaktā forma, ko izmanto visur CSS un dizaina nodošanā. RGB (rgb(79, 70, 229)) tieši norāda sarkano, zaļo un zilo komponenti, ko kods bieži pieprasa. HSL (hsl(243, 75%, 59%)) apraksta toni, piesātinājumu un gaišumu — visintuitīvākais formāts krāsas pielāgošanai, piemēram, padarot to tumšāku vai mazāk piesātinātu.
Visi tie apraksta vienu un to pašu krāsu; šis rīks pārveido tos precīzi un parāda priekšskatījumu, lai tu varētu pārliecināties, ka tā ir tā krāsa, ko biji domājis.
Kāpēc to izmantot?
- Pieņem jebkuru ievades formātu — HEX (3 vai 6 ciparu), RGB vai HSL — un izvada visus formātus.
- Tiešs priekšskatījuma paraugs, lai redzētu krāsu, ne tikai skaitļus.
- Vizuāla krāsu izvēlne, ja vēlies izvēlēties pēc acs.
- Kopēšana ar vienu klikšķi katram formātam, gatavs CSS vai kodam.
- Bezmaksas, tūlītēji, bez augšupielādes.
Kā to lietot
- Ieraksti vai ielīmē krāsu: #4f46e5, rgb(79, 70, 229) vai hsl(243, 75%, 59%) — visi darbojas.
- Vai noklikšķini uz krāsu izvēlnes un izvēlies vizuāli.
- Izlasi visus trīs formātus rezultātos un pārbaudi priekšskatījuma paraugu.
- Noklikšķini "Kopēt" pie vajadzīgā formāta.
Piemērs
Ievade
#4f46e5Izvade
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Trīs pieraksti, viena identiska krāsa.
Kuru formātu izmantot?
Visi trīs apraksta vienu un to pašu krāsu precīzi — izvēle ir par to, kurš ir vieglāk lietojams konkrētajam uzdevumam, nevis par precizitāti.
| Formāts | Vislabāk piemērots | Kāpēc |
|---|---|---|
| HEX (#4f46e5) | CSS, dizaina nodošana, ātra kopēšana un ielīmēšana | Visīsākais rakstīšanai un ielīmēšanai; universāls formāts tādos dizaina rīkos kā Figma. |
| RGB (rgb(79,70,229)) | Kods, kas tieši manipulē ar kanāliem, canvas/attēlu darbs | Atbilst tam, kā grafikas API un attēlu pikseļu dati faktiski glabā krāsu. |
| HSL (hsl(243,75%,59%)) | Krāsas pielāgošana — gaišāka, tumšāka, vairāk/mazāk piesātināta | Gaišums un piesātinājums ir atsevišķi skaitļi, ko vari pielāgot tieši, atšķirībā no HEX/RGB, kur mainās katrs kanāls. |
Biežākie lietošanas gadījumi
- Krāsas vizuāla izvēle dizaina rīkā, tad tās pārveidošana precīzā HEX vai RGB vērtībā, kas nepieciešama CSS vai kodā.
- Saistītu toņu kopas (gaišāku/tumšāku variantu) ģenerēšana, pārveidojot uz HSL, pielāgojot gaišumu un pārveidojot atpakaļ.
- Zīmola krāsas saskaņošana starp dažādiem rīkiem, kas katrs sagaida citu formātu — logo fails RGB, stila ceļvedis HEX, CSS mainīgais, kam nepieciešams HSL tēmošanai.
- Pārbaude, vai no ekrānuzņēmuma vai dizaina faila iegūtā krāsa (bieži norādīta kā RGB) sakrīt ar HEX vērtību stilu failā.
Biežāk uzdotie jautājumi
Kad man vajadzētu izmantot HSL, nevis HEX vai RGB?
Kad vēlies domāt par krāsu loģiski. Padarot krāsu par 10% tumšāku HSL formātā, nozīmē samazināt gaišumu par 10 punktiem; HEX vai RGB formātā tev būtu jāpārrēķina visi kanāli. Dizaina sistēmas bieži definē paletes HSL formātā tieši šī iemesla dēļ.
Vai rīks atbalsta 3 ciparu HEX, piemēram, #fff?
Jā. #fff ir saīsinājums no #ffffff — katrs cipars tiek dubultots. Abas formas tiek pieņemtas, un izvadā parādās pilna 6 ciparu forma.
Kā ar alfa kanālu (caurspīdīgumu)?
Šis rīks pārveido necaurspīdīgas krāsas (RGB/HSL vērtības). Ja tev vajadzīga caurspīdīgums, pievieno alfa kanālu pats: rgba(79, 70, 229, 0.5) vai #4f46e580 — krāsas daļa paliek nemainīga.
Kāpēc manas HSL vērtības atšķiras par 1 no cita rīka?
Noapaļošana. HSL↔RGB pārveide rada daļskaitļus, un dažādi rīki noapaļo atšķirīgi. Atšķirība ±1 tonī vai procentos ir neredzama un normāla.
Vai tiek atbalstīti krāsu nosaukumi, piemēram, 'red'?
Nē pirmajā posmā — rīks koncentrējas uz trim skaitliskajiem formātiem, ko izstrādātāji visbiežāk pārveido. Ievadi krāsas HEX/RGB/HSL vērtību vai izvēlies to vizuāli ar izvēlni.
Kad man vajadzētu izmantot HEX, RGB vai HSL?
Ja vajadzīga caurspīdīgums, izmanto 8 ciparu HEX (#RRGGBBAA) vai rgba() — 6 ciparu HEX nav alfa kanāla. Ja vēlies gaišākus vai tumšākus tās pašas krāsas variantus, HSL ir vienkāršākais risinājums: paturi toni un piesātinājumu nemainīgu un maini tikai gaišuma skaitli. Vienkāršai kopēšanai un ielīmēšanai CSS vai dizaina rīkos 6 ciparu HEX joprojām ir visuniversālākā forma.