Krāsu formāta pārveidotājs pārveido jebkuru krāsu starp HEX, RGB, HSL, HSV un OKLCH. Izvēlieties krāsu ar natīvo izvēlni, ierakstiet heksadecimālo vērtību, ielīmējiet jebkuru CSS krāsas virkni vai pielāgojiet RGB slīdņus — katrs formāts atjauninās reāllaikā, un katram ir sava Kopēt poga.
Mūsdienu CSS piedāvā vairāk nekā desmit veidus, kā uzrakstīt vienu un to pašu krāsu: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), plus katra alfa varianti. Bieži vien nepieciešams konvertēt starp tiem — Figma dizains sniedz jums OKLCH, jūsu kods izmanto HEX, un jūsu tēmas mainīgie priekšroku dod HSL hover pielāgojumiem. Krāsu formāta pārveidotājs veic visas konversijas vienā panelī. Izvēlieties krāsu no natīvās krāsu izvēlnes, ielīmējiet esošu krāsu jebkurā sintaksē vai velciet RGB slīdņus, lai to precīzi noregulētu. Katrs izplatītais formāts tiek atveidots vienlaikus: HEX (ar alfa), rgb()/rgba(), hsl()/hsla(), hsv() un oklch() — plus CSS mainīgā fragments un aprēķinātā spilgtuma vērtība ātriem kontrasta aprēķiniem. Alfa kanāls tiek atbalstīts visur. Katram formātam ir sava Kopēt poga vienkāršai izmantošanai, un parsētājs pieņem natīvos krāsu nosaukumus un visu, ko atbalsta CSS.
Rāda HEX, RGB/RGBA, HSL/HSLA, HSV un OKLCH vienlaikus — izvēlieties jebkuru formātu, ko sagaida jūsu mērķa kods, bez atkārtotas konvertēšanas katru reizi.
Pieņem HEX (#abc vai #aabbcc vai #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() un natīvos krāsu nosaukumus. Ielīmējiet jebko, ko atbalsta CSS.
Apstrādā jauno OKLCH formātu, ko izmanto mūsdienu CSS — uztveres ziņā vienmērīgu krāsu telpu, kas kļūst par jauno dizaina sistēmu noklusējumu.
Katrai izvadei ir sava Kopēt poga. Noklikšķiniet, lai iegūtu tieši to formātu, kas nepieciešams jūsu kodā, bez manuālas atlasīšanas.
Pielāgojiet Sarkanā/Zaļā/Zilā/Alfa slīdņus precīzai regulēšanai. Katrs formāts atjauninās reāllaikā, jums velkot.
Caurspīdīgums tiek apstrādāts visos formātos: #RRGGBBAA, rgba(...), hsla(...). Iestatiet vienreiz, konvertēts visur.
Figma sniedz jums OKLCH vai HSL — ielīmējiet to, nokopējiet HEX ekvivalentu savai Tailwind konfigurācijai vai CSS mainīgajiem, neaizejot no pārlūka.
Velciet slīdņus, lai izpētītu toņus, atzīmējot OKLCH vērtības sistemātiskai dizaina sistēmas paletei.
Pārveidojiet zīmola krāsu tās HSL formā, lai varētu izmantot hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) hover stāvokļiem.
Spilgtuma lauks sniedz jums neapstrādāto vērtību, ko izmanto WCAG kontrasta aprēķinos — noderīgi a11y matemātikai.
Ielīmējiet oklch(...) no CSS faila, ko lasāt, un uzreiz redziet, kādu krāsu tas faktiski rada.
Noklikšķiniet uz Krāsu formātu ikonas DevSuite Pro dokā. Atveras panelis ar krāsu izvēlni, heksadecimālo ievadi un RGB slīdņiem.
Izmantojiet krāsu izvēlni, ierakstiet heksadecimālo vērtību vai ielīmējiet jebkuru CSS krāsas virkni (rgb(...), oklch(...) utt.). Krāsa tiek priekšskatīta nekavējoties.
Katrs formāts tiek atveidots zemāk: HEX, RGB, HSL, HSV, OKLCH, CSS mainīgais un spilgtums. Visi paliek sinhronizēti, jums veicot pielāgojumus.
Velciet R/G/B/A slīdņus smalkiem pielāgojumiem. Lieliski noder, lai atrastu konkrētu toni, kas atbilst dizaina specifikācijai.
Noklikšķiniet Kopēt uz vēlamā formāta rindas — vērtība nonāk starpliktuvē pareizajā sintaksē.
Instalējiet DevSuite Pro bez maksas un atbloķējiet 64+ izstrādātāju rīkus savam pārlūkam.
