Krāsu ritenis

Izvēlieties krāsu uz riteņa, precizējiet to piesātinājuma un spilguma laukumā un nolasiet to jebkurā formātā, ko prasa jūsu projekts, no #RRGGBB līdz oklch(). Šis rīks dara arī to, ko citi krāsu atlasītāji izlaiž: trīs riteņa veidus, tostarp tradicionālo gleznotāja RYB riteni, harmonijas, 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 jūsu pārlūkprogrammā.

RYB vai RGB? Trīs krāsu riteņi viena vietā

Pārslēgs Riteņa režīms maina toņu izkārtojumu ritenī:

• HSV un HSL ir digitālie riteņi. Toņi novietoti tā, kā ekrānā tos sajauc gaisma. Tie atšķiras ar kvadrātveida laukumu: HSV spilgtākais stūris ir tīrs tonis, HSL tīros toņus liek pusceļā uz gaišumu, ar baltu virs tiem.
• RYB (gleznotāja) izkārto toņus tā, kā tos mācās mākslinieki: sarkans, dzeltens un zils kā pamatkrāsas, ar oranžu, zaļu un violetu starp tām (RYB krāsu modelis, angliski). Atšķirību pamanīsiet galvenokārt harmonijās. RYB ritenī sarkanās komplementārā krāsa ir zaļa, bet zilās, oranža, klasiskie pigmentu pāri. Digitālais ritenis sarkano sapāro ar ciānu. Ja “komplementārā” palete no parasta krāsu atlasītāja jums kādreiz šķitusi nepareiza, tagad zināt, kāpēc.

Krāsu harmonijas: palete, kas izveidojas pati

Laukā Krāsu harmonija izvēlieties noteikumu. Ritenis atzīmē pavadošās krāsas, un zem tā parādās gatava palete:

• Komplementāra: viena pretēja krāsa. Spēcīgākais kontrasts, der vienam akcentam blakus galvenajai zīmola krāsai.
• Sadalīta komplementāra: divi komplementārās krāsas kaimiņi. Gandrīz tikpat liels kontrasts, bet vieglāk sabalansējams.
• Triāde: trīs vienmērīgi izvietoti toņi. Dzīvīga, tomēr stabila kombinācija, ja viens dominē un pārējos divus izmantojat ekonomiski.
• Tetrāde (kvadrāts): četri toņi. Bagātas shēmas ilustrācijām un grafikiem, lietotāja saskarnē grūti sabalansējamas.
• Analogā: tuvākie kaimiņi. Mierīga kombinācija foniem un pārejām.
• Monohromatiska: viens tonis vairākos gaišuma līmeņos. Drošākā izvēle pogu stāvokļiem (hover, aktīvs, izslēgts).

Visu paleti nokopējat vienā klikšķī jūsu izvēlētajā formātā: vienkāršs HEX, RGB, HSL, OKLCH, ielīmēšanai gatavi CSS mainīgie (--color-1: …), SCSS mainīgie vai JSON kodam. Vai palete saglabā kontrastu arī cilvēkiem, kam grūtāk atšķirt toņus, ātri pārbaudīsiet ekrānuzņēmumā pēc pārveidošanas pelēktoņos.

Pārveidojiet HEX, RGB, HSL, OKLCH un CMYK: ielīmējiet jebko, saņemiet visu

Ievades lauki pieņem gandrīz jebkuru krāsas pierakstu: #f80, #ff8800, astoņu ciparu heksadecimālu ar alfa kanālu, rgb() un rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, kā arī nosauktas CSS krāsas, piemēram, rebeccapurple. Lai ko ievadītu, saņemsiet septiņus saskaņotus izvades formātus: HEX, RGB, HSL, HSV, LCH, OKLCH un CMYK, katru ar savu kopēšanas pogu.

Slīdnis Caurspīdīgums (alfa) zem priekšskatījuma pārslēdz izvades uz to caurspīdīgajām formām, #RRGGBBAA, rgba() un hsla(). Priekšskatījums tiek zīmēts uz rūtainā fona, tāpēc caurspīdīgumu redzat uzreiz.

Tuvākais Tailwind CSS marķieris jebkurai krāsai

Divi žetoni zem priekšskatījuma nosauc krāsu: tuvākā nosauktā CSS krāsa (noderīga ātriem prototipiem) un tuvākais Tailwind marķieris, piemēram, orange-500. Tā paliekat savas dizaina sistēmas ietvaros un jums nav jāizdomā vienreizējas vērtības. Noklikšķiniet uz žetona, lai to nokopētu.

Tas atbild uz jautājumu, kas rodas katrā dizaina nodošanā: dizainers atsūtīja hex kodu, kura Tailwind klase tam atbilst vistuvāk? Atbilstība tiek aprēķināta pret noklusējuma Tailwind CSS 4 paleti (sk. Tailwind dokumentāciju, angliski), tāpēc marķieri var uzreiz izmantot klases nosaukumā.

Kuru krāsu formātu izvēlēties?

Formāts	Pilns nosaukums	Kad to izmantot
HEX	Hexadecimal	Tīmekļa noklusējums. Īss, atbalstīts visur, viegli kopējams. Astoņi cipari pievieno caurspīdīgumu.
RGB	Red, Green, Blue	Tā domā ekrāni. Trīs gaismas kanāli no 0 līdz 255. Formāts, ko sagaida lielākā daļa API un canvas koda.
HSL	Hue, Saturation, Lightness	Pielāgošanai pēc acs. “Nedaudz gaišāku” vai “mazāk piesātinātu” nozīmē mainīt vienu skaitli.
HSV	Hue, Saturation, Value	Grafikas programmas. Modelis, uz kura balstās krāsu atlasītāji Photoshop un GIMP.
LCH	Lightness, Chroma, Hue	Uztverē vienmērīgs. Vienādi skaitliski soļi izskatās kā vienādi vizuāli soļi, ko HSL tikai izliekas darām.
OKLCH	OK Lightness, Chroma, Hue	Mūsdienīga izvēle CSS. Labo toņa nobīdes zilajos toņos, kas traucē LCH. Atbalsta visas pašreizējās pārlūkprogrammas, der dizaina marķieriem.
CMYK	Cyan, Magenta, Yellow, Key	Orientieris drukāšanai. Aptuvena pārvēršana sarunām ar tipogrāfiju, galīgās vērtības nosaka tās krāsu profils.

Kāpēc OKLCH ir uztverē vienmērīgāks nekā vecāki modeļi, skaidro Oklab telpas autors Bjorns Otsons (Björn Ottosson) oriģinālajā rakstā (angliski). Sintaksi un pārlūkprogrammu atbalstu apkopo MDN (angliski). Kā darbojas drukas modelis, apraksta Vikipēdijas raksts par CMYK krāsu modeli.

Sīkumi, kas ietaupa laiku

• Vēsture saglabājas pati. Pēdējās 24 krāsas pārdzīvo lapas atsvaidzināšanu. Tās paliek tikai jūsu pārlūkprogrammas krātuvē un nekur netiek nosūtītas.
• Pipete. Pārlūkprogrammās ar EyeDropper API (Chrome un Edge) izvēlaties krāsu no jebkuras vietas ekrānā, pat ārpus pārlūkprogrammas loga. Krāsu no fotoattēla vai logotipa faila uzzināsiet tiešsaistes krāsu pipetē.
• Vadība ar tastatūru. Ritenis un piesātinājuma laukums reaģē uz bulttaustiņiem, tāpēc krāsu var precizēt pa maziem soļiem.
• Priekšiestatījumi piedāvā izplatītākās pamatkrāsas, ja vajag tikai ātru sākumpunktu.

Biežāk uzdotie jautājumi

Kā pārveidot OKLCH uz HEX?

Ielīmējiet oklch() vērtību OKLCH laukā, un visi pārējie izvades formāti, arī HEX, uzreiz pārrēķinās. Darbojas arī otrādi: ierakstiet HEX un nolasiet atbilstošo oklch(). Viena atruna: OKLCH var aprakstīt arī krāsas ārpus sRGB diapazona, un tās tiek apgrieztas līdz tam, ko sRGB spēj parādīt. Ļoti piesātināts oklch() tāpēc plaša krāsu diapazona displejā neizskatīsies tāds pats kā tā HEX versija.

Vai oklch() drīkst izmantot produkcijas CSS?

Jā. Visas pašreizējās Chrome, Edge, Firefox un Safari versijas oklch() atbalsta, un tas kļuvis par iecienītu pierakstu dizaina marķieriem (Tailwind CSS 4 tajā definē visu savu paleti). Ļoti vecām pārlūkprogrammām pirms tā ielieciet HEX rezerves variantu. Šis rīks dod abas vērtības.

Kāpēc harmonijas mainās, pārslēdzoties uz RYB riteni?

Tāpēc, ka tas, kas ir "pretējs", ir atkarīgs no toņu izkārtojuma ap apli. RYB ritenis vienmērīgi izkārto pigmentu pamatkrāsas, tāpēc komplementārie pāri atbilst tam, ko zina mākslinieki: sarkans un zaļš, zils un oranžs, dzeltens un violets. HSV un HSL riteņi izkārto toņus pēc tā, kā sajaucas gaisma, tāpēc tie sapāro sarkano ar ciānu. Neviens no tiem nav nepareizs: RYB atbilst mākslas izglītībai, HSV un HSL atbilst tam, ko dara ekrāni.

Vai CMYK vērtībām var uzticēties drukāšanai?

Uztveriet tās kā orientējošas. Reālā pārvēršana drukāšanai ir atkarīga no printera, papīra un tintes ICC profila (angliski). Tā pati RGB krāsa uz krītota un nekrītota papīra iznāk citāda. Vērtības šeit rēķina pēc standarta formulas, kas tuvina rezultātu, bet galīgo nospiedumu nosaka tipogrāfija.

Kur Firefox vai Safari atrodas pipetes poga?

Tā ir paslēpta ar nolūku. EyeDropper API (MDN, angliski), uz kura poga balstās, pagaidām atbalsta tikai Chromium bāzētas pārlūkprogrammas (Chrome, Edge, Opera). Visas pārējās rīka funkcijas darbojas visur, trūkst tikai krāsas izvēle no ekrāna. Ja jums vajadzīga krāsa no attēla, izmantojiet tiešsaistes krāsu pipeti, kas darbojas visās pārlūkprogrammās.

Vai mana krāsu vēsture ir privāta?

Jā. Vēsture ir saglabāta jūsu pārlūkprogrammas localStorage jūsu ierīcē. Nekas, ko izvēlaties, ielīmējat vai kopējat, netiek nekur nosūtīts. Viss rīks darbojas kā JavaScript jūsu pārlūkprogrammā, ko varat pārbaudīt izstrādātāja rīku cilnē Tīkls.