Конвертор формата боја преводи било коју боју између HEX, RGB, HSL, HSV и OKLCH формата. Изаберите боју native бирачем, укуцајте hex вредност, налепите било који CSS стринг боје или подесите RGB клизаче — сваки формат се ажурира уживо и сваки има своје дугме Copy.
Модеран CSS вам даје десетак начина да запишете исту боју: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), плус alpha варијанте сваке од њих. Често вам је потребна конверзија између њих — Figma дизајн вам даје OKLCH, ваш кодна база користи HEX, а ваше theme променљиве преферирају HSL за hover подешавања. Конвертор формата боја обавља све конверзије у једном панелу. Изаберите боју native бирачем боја, налепите постојећу боју у било којој синтакси, или превуците RGB клизаче да је прецизно подесите. Сваки уобичајени формат приказује се истовремено: HEX (са alpha каналом), rgb()/rgba(), hsl()/hsla(), hsv() и oklch() — плус исечак CSS променљиве и израчуната вредност осветљености за брзу рачуницу контраста. Alpha канал је подржан од почетка до краја. Сваки формат има своје дугме Copy за коришћење једним кликом, а parser прихвата native називе боја и све што CSS подржава.
Приказује HEX, RGB/RGBA, HSL/HSLA, HSV и OKLCH истовремено — изаберите формат који очекује ваш циљни код без поновне конверзије сваки пут.
Прихвата HEX (#abc или #aabbcc или #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() и native називе боја. Налепите било шта што CSS подржава.
Обрађује нови OKLCH формат који се користи у модерном CSS-у — перцептивно уједначен простор боја који постаје нови стандард design system-а.
Сваки излаз има своје дугме Copy. Кликните да узмете тачно формат који вам треба за ваш код, без ручног означавања.
Подесите Red/Green/Blue/Alpha клизаче за фино подешавање. Сваки формат се ажурира у реалном времену док их превлачите.
Провидност је подржана у сваком формату: #RRGGBBAA, rgba(...), hsla(...). Подесите једном, конвертује се свуда.
Figma вам даје OKLCH или HSL — налепите га, копирајте HEX еквивалент за ваш Tailwind config или CSS променљиве без напуштања прегледача.
Превуците клизаче да истражите нијансе, бележећи OKLCH вредности за систематску палету design system-а.
Конвертујте боју бренда у HSL облик тако да можете користити hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) за hover стања.
Поље осветљености даје вам сирову вредност коришћену у WCAG прорачунима контраста — корисно за a11y рачуницу.
Налепите oklch(...) из CSS фајла који читате и тренутно видите коју боју заправо производи.
Кликните на Color Formats икону у DevSuite Pro доку. Отвара се панел са бирачем боја, hex пољем и RGB клизачима.
Користите бирач боја, укуцајте hex или налепите било који CSS стринг боје (rgb(...), oklch(...), итд.). Боја се тренутно приказује.
Сваки формат се приказује испод: HEX, RGB, HSL, HSV, OKLCH, CSS променљива и осветљеност. Сви остају усклађени док подешавате.
Превуците R/G/B/A клизаче за фина подешавања. Одлично за прецизно постизање нијансе која одговара дизајн спецификацији.
Кликните Copy на реду формата који желите — вредност стиже у clipboard у исправној синтакси.
Instalirajte DevSuite Pro besplatno i otključajte 64+ alata za programere za svoj pretraživač.
