Convertor de Format de Culoare traduce orice culoare între HEX, RGB, HSL, HSV și OKLCH. Alegeți o culoare cu selectorul nativ, tastați o valoare hex, lipiți orice șir de culoare CSS sau ajustați glisoarele RGB — fiecare format se actualizează live și are propriul buton Copy.
CSS-ul modern vă oferă zeci de moduri de a scrie aceeași culoare: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), plus variantele alpha ale fiecăreia. Adesea trebuie să convertiți între ele — un design din Figma vă oferă un OKLCH, codebase-ul dvs. folosește HEX, iar variabilele de temă preferă HSL pentru ajustările de hover. Convertor de Format de Culoare face toate conversiile într-un singur panou. Alegeți o culoare din selectorul nativ, lipiți o culoare existentă în orice sintaxă sau trageți glisoarele RGB pentru a o regla. Fiecare format uzual se afișează simultan: HEX (cu alpha), rgb()/rgba(), hsl()/hsla(), hsv() și oklch() — plus un fragment de variabilă CSS și valoarea de luminanță calculată, pentru calcule rapide de contrast. Canalul alpha este suportat integral. Fiecare format are propriul buton Copy pentru utilizare dintr-un clic, iar parser-ul acceptă nume native de culori și tot ce suportă CSS.
Afișează simultan HEX, RGB/RGBA, HSL/HSLA, HSV și OKLCH — alegeți formatul așteptat de codul dvs. țintă, fără a reconverti de fiecare dată.
Acceptă HEX (#abc sau #aabbcc sau #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() și nume native de culori. Lipiți orice suportă CSS.
Gestionează noul format OKLCH folosit în CSS-ul modern — un spațiu de culoare perceptual uniform, care devine noul standard implicit al sistemelor de design.
Fiecare rezultat are propriul buton Copy. Faceți clic pentru a prelua exact formatul de care aveți nevoie în cod, fără selecție manuală.
Ajustați glisoarele Red/Green/Blue/Alpha pentru reglaje fine. Fiecare format se actualizează în timp real în timp ce trageți.
Transparența este gestionată în toate formatele: #RRGGBBAA, rgba(...), hsla(...). Setați o dată, se convertește peste tot.
Figma vă oferă un OKLCH sau HSL — lipiți-l, copiați echivalentul HEX pentru configurația Tailwind sau variabilele CSS, fără a părăsi browser-ul.
Trageți glisoarele pentru a explora nuanțe, notând valorile OKLCH pentru o paletă sistematică de design system.
Convertiți o culoare de brand în forma sa HSL, astfel încât să puteți folosi hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) pentru stările de hover.
Câmpul de luminanță oferă valoarea brută folosită în calculele de contrast WCAG — util pentru calculele de accesibilitate.
Lipiți un oklch(...) dintr-un fișier CSS pe care îl citiți și vedeți instant ce culoare produce de fapt.
Faceți clic pe iconița Color Formats din dock-ul DevSuite Pro. Se deschide un panou cu selector de culoare, câmp hex și glisoare RGB.
Folosiți selectorul de culoare, tastați un hex sau lipiți orice șir de culoare CSS (rgb(...), oklch(...) etc.). Previzualizarea culorii apare instant.
Fiecare format se afișează dedesubt: HEX, RGB, HSL, HSV, OKLCH, variabilă CSS și luminanță. Toate rămân sincronizate pe măsură ce faceți ajustări.
Trageți glisoarele R/G/B/A pentru ajustări fine. Excelent pentru a obține o nuanță exactă, conformă cu o specificație de design.
Faceți clic pe Copy pe rândul formatului dorit — valoarea ajunge în clipboard, în sintaxa corectă.
Instalează DevSuite Pro gratuit și deblochează peste 64 de instrumente pentru dezvoltatori în browserul tău.
