Krāsu atlasītājs tiešsaistē
Izvēlieties krāsu uz riteņa, precizējiet to piesātinājuma audeklā un nolasiet to jebkurā formātā, ko prasa jūsu projekts — no #RRGGBB līdz oklch(). Šis atlasītājs dara arī to, ko citi rīki izlaiž: trīs riteņa ģeometrijas, tostarp gleznotāja RYB riteni, harmoniju pārklājumus, kas paši izveido paleti, alfa kanālu un visas paletes eksportu vienā klikšķī kā CSS mainīgos, SCSS vai JSON. Viss tiek aprēķināts lokāli jūsu pārlūkprogrammā.
Trīs riteņi, ne tikai viens
Selektors “Riteņa režīms” maina paša riteņa ģeometriju:
- HSV un HSL ir digitālie riteņi — toņi izvietoti tā, kā RGB ekrāni sajauc gaismu. Tie atšķiras ar to, kā uzvedas kvadrātveida audekls: HSV spilgtākais stūris ir tīrs tonis, HSL tīros toņus novieto pie 50% gaišuma ar baltu virs tā.
- RYB (gleznotāja) izkārto toņus tā, kā mākslinieki tos ir mācījušies: sarkans, dzeltens un zils kā pamatkrāsas, ar oranžu, zaļu un violetu starp tām. Tā praktiskā vērtība parādās harmonijās — RYB ritenī sarkanā komplementārā krāsa ir zaļa, bet zilās — oranža, klasiskie pigmentu pāri, kamēr digitālais ritenis sarkano sapāro ar ciānu. Ja “komplementārā” palete no parasta atlasītāja jums kādreiz ir šķitusi nepareiza, tagad zināt, kāpēc.
Harmonijas, kas paši izveido paleti
Izvēlieties noteikumu zem “Krāsu harmonija”, un ritenis atzīmē pavadošās krāsas, kas parādās kā gatava palete:
- Komplementāra — viena pretēja krāsa. Spēcīgākais kontrasts; izmantojiet to vienam akcentam uz dominējošas zīmola krāsas.
- Sadalīta komplementāra — komplementārās krāsas divi kaimiņi. Gandrīz tikpat liels kontrasts, taču vieglāk sabalansējams.
- Triāde — trīs vienmērīgi izvietoti toņi. Dzīvīga, bet stabila kombinācija; ļaujiet vienam dominēt un pārējos divus izmantojiet ekonomiski.
- Tetrāde (kvadrāts) — četri toņi. Bagātas kombinācijas ilustrācijām un datu vizualizācijai; grūti sabalansēt lietotāja saskarnē.
- Analogā — tiešie kaimiņi. Zems saspīlējums, labi der fonam un gradientiem.
- Monohromatiska — viens tonis pakāpeniski mainīgā gaišumā. Drošākā izvēle saskarnes stāvokļiem (hover, aktīvs, atspējots).
Paletes panelis vienā klikšķī nokopē visu komplektu jūsu izvēlētajā formātā: vienkāršs HEX, RGB, HSL, OKLCH, gatavas ielīmēšanai CSS pielāgotās īpašības (--color-1: …), SCSS mainīgie vai JSON nodošanai kodā.
Ielīmējiet jebko, nolasiet visu
Ievades lauki pieņem gandrīz jebkuru krāsu pierakstu, ko tajos ievadāt: #f80, #ff8800, 8 ciparu heksadecimālu ar alfa kanālu, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 vai CSS krāsu nosaukumus, piemēram, rebeccapurple. Lai kas tiktu ievadīts, atpakaļ nāk septiņi sinhronizēti izvades formāti: HEX, RGB, HSL, HSV, LCH, OKLCH un CMYK, katrs ar savu kopēšanas pogu.
Divi palīgžetoni zem priekšskatījuma nosauc krāsu jūsu vietā: tuvākā CSS nosauktā krāsa (noderīga ātriem prototipiem un krāsu apspriešanai) un tuvākais Tailwind marķieris (piem., orange-500), lai jūs varētu palikt savas dizaina sistēmas ietvaros, nevis izdomāt vienreizējas vērtības.
Pavelciet necaurspīdīguma (alfa) slīdni zem priekšskatījuma, un izvades pārslēdzas uz to caurspīdīgajām formām — #RRGGBBAA, rgba(), hsla() — ar priekšskatījumu uz šaha galdiņa fona, lai varētu novērtēt caurspīdīgumu.
Kuru formātu izvēlēties?
| Formāts | Pilns nosaukums | Kad to izmantot? |
|---|---|---|
| HEX | Heksadecimāls | Tīmekļa noklusējums. Kompakts, universāli atbalstīts, viegli kopējams. 8 cipari pievieno alfa kanālu. |
| RGB | Sarkans, zaļš, zils | Kā domā ekrāni. Trīs gaismas kanāli, 0–255. Formāts, ko sagaida lielākā daļa API un canvas koda. |
| HSL | Tonis, piesātinājums, gaišums | Cilvēkiem, kas rediģē ar roku. “Nedaudz gaišāku” vai “mazāk piesātinātu” ir vienas vērtības izmaiņa. |
| HSV | Tonis, piesātinājums, vērtība | Grafikas programmatūra. Modelis, uz kura balstīti atlasītāji Photoshop un GIMP. |
| LCH | Gaišums, hroma, tonis | Uztverē vienmērīgs. Vienādi skaitliskie soļi izskatās kā vienādi vizuālie soļi — tas, par ko HSL tikai izliekas. |
| OKLCH | OK gaišums, hroma, tonis | Mūsdienīgā CSS izvēle. Novērš LCH toņu nobīdi zilajos toņos; atbalstīts visās pašreizējās pārlūkprogrammās un ideāli piemērots dizaina marķieru sistēmām. |
| CMYK | Ciāns, madženta, dzeltens, melns | Drukas orientācija. Aptuvena konversija sarunām ar poligrāfistiem — gala vērtības vienmēr nāk no printera krāsu profila. |
Sīkumi, kas ietaupa laiku
- Vēsture saglabājas pati. Pēdējās 24 krāsas, ar kurām esat strādājis, pārdzīvo lapas atsvaidzināšanu — tās tiek glabātas tikai jūsu pārlūkprogrammas lokālajā krātuvē un nekad netiek augšupielādētas.
- Pipete. Pārlūkprogrammās ar EyeDropper API (Chrome un Edge) varat izvēlēties krāsu no jebkuras vietas ekrānā, pat ārpus pārlūkprogrammas loga.
- Vadība ar tastatūru. Ritenis un piesātinājuma audekls reaģē uz bulttaustiņiem precīzām, pikseļa līmeņa korekcijām.
- Priekšiestatījumi aptver izplatītākās pamatkrāsas, ja nepieciešams tikai ātrs sākumpunkts.
Biežāk uzdotie jautājumi (BUJ)
Vai oklch() ir droši izmantot produkcijas CSS?
Jā. Visas pašreizējās Chrome, Edge, Firefox un Safari versijas atbalstaoklch(), un tas ir kļuvis par vēlamo pierakstu dizaina marķieriem (Tailwind CSS 4 visu savu paleti definē tieši šajā formātā). Ļoti vecām pārlūkprogrammām nodrošiniet HEX rezerves variantu iepriekšējā rindā — šis rīks jums dod abas vērtības.