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ā.
RYB vs RGB: 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.
Krāsu 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ā.
Pārveidojiet HEX, RGB, HSL, OKLCH un CMYK: 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.
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.
Atrodiet tuvāko Tailwind CSS krāsu marķieri
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. Noklikšķiniet uz jebkura žetona, lai to nokopētu.
Tas atbild uz jautājumu, kas rodas ikvienā dizaina nodošanā: dizainers man atsūtīja hex kodu — kura Tailwind klase tam atbilst vistuvāk? Atbilstība tiek aprēķināta pret Tailwind CSS 4 paša noklusējuma paleti, tāpēc iegūtais marķieris ir tāds, ko var uzreiz ielīmēt klases nosaukumā.
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)
Kā es pārveidoju OKLCH uz HEX?
Ielīmējietoklch() vērtību OKLCH laukā, un visi pārējie izvades formāti atjaunojas tūlīt, arī HEX. Tas darbojas arī otrādi — ierakstiet HEX kodu un nolasiet atbilstošo oklch() vērtību. Viens brīdinājums: OKLCH var aprakstīt krāsas ārpus sRGB gammas, un tās tiek apgrieztas kanālu pa kanālam līdz tam, ko sRGB spēj parādīt, tāpēc ļoti augstas hromas oklch() un tā HEX forma plaša krāsu diapazona ekrānā neizskatīsies identiskas.
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.