Color Format Converter ማንኛውንም ቀለም በHEX, RGB, HSL, HSV, እና OKLCH መካከል ይተረጉማል። ከnative pickerው ጋር ቀለም ይምረጡ፣ hex እሴት ይተይቡ፣ ማንኛውንም CSS የቀለም ሕብረቁምፊ ይለጥፉ፣ ወይም RGB sliders ያስተካክሉ — እያንዳንዱ ቅርጸት በቀጥታ ይዘምናል እና እያንዳንዱ የራሱ Copy አዝራር አለው።
ዘመናዊ CSS ተመሳሳይ ቀለም ለመፃፍ ደርዘን መንገዶች ይሰጣል፦ #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), በተጨማሪም የእያንዳንዱ alpha ስሪቶች። ብዙ ጊዜ በመካከላቸው መቀየር ያስፈልግዎታል — የFigma ንድፍ OKLCH ይሰጥዎታል፣ codebaseዎ HEXን ይጠቀማል፣ እና የtheme variablesዎ ለhover ማስተካከያዎች HSLን ይመርጣሉ። Color Format Converter ሁሉንም ልወጣዎች በአንድ ፓነል ውስጥ ያደርጋል። ከnative color picker ቀለም ይምረጡ፣ ነባር ቀለም በማንኛውም syntax ይለጥፉ፣ ወይም አንዱን ለማስተካከል RGB slidersን ይጎትቱ። እያንዳንዱ የተለመደ ቅርጸት በአንድ ጊዜ ይታያል፦ HEX (ከalpha ጋር)፣ rgb()/rgba()፣ hsl()/hsla()፣ hsv()፣ እና oklch() — በተጨማሪም የCSS variable snippet እና ለፈጣን የንፅፅር ስሌት የተሰላ luminance እሴት። Alpha channel ከጫፍ እስከ ጫፍ ይደገፋል። እያንዳንዱ ቅርጸት ለአንድ-ጠቅታ አጠቃቀም የራሱ Copy አዝራር አለው፣ እና parserው native የቀለም ስሞችን እና CSS የሚደግፈውን ሁሉ ይቀበላል።
HEX, RGB/RGBA, HSL/HSLA, HSV, እና OKLCHን በአንድ ጊዜ ያሳያል — እያንዳንዱን እንደገና ሳይቀይሩ ዒላማ ኮድዎ የሚጠብቀውን ቅርጸት ይምረጡ።
HEX (#abc ወይም #aabbcc ወይም #aabbccff)፣ rgb()/rgba()፣ hsl()/hsla()፣ oklch()፣ እና native የቀለም ስሞችን ይቀበላል። CSS የሚደግፈውን ማንኛውንም ነገር ይለጥፉ።
በዘመናዊ CSS ውስጥ ጥቅም ላይ የሚውለውን አዲሱን OKLCH ቅርጸት ያስተናግዳል — አዲሱ የdesign-system ነባሪ እየሆነ ያለ ግንዛቤያዊ ወጥ የቀለም ቦታ።
እያንዳንዱ ውጤት የራሱ Copy አዝራር አለው። ለኮድዎ የሚያስፈልገውን ትክክለኛ ቅርጸት ለመያዝ ይጫኑ፣ በእጅ መምረጥ አያስፈልግም።
ለጥሩ ማስተካከያ Red/Green/Blue/Alpha slidersን ያስተካክሉ። ሲጎትቱ እያንዳንዱ ቅርጸት በእውነተኛ ጊዜ ይዘምናል።
ግልጽነት በእያንዳንዱ ቅርጸት ውስጥ ይስተናገዳል፦ #RRGGBBAA, rgba(...), hsla(...)። አንድ ጊዜ ያዘጋጁ፣ በሁሉም ቦታ ይቀየራል።
Figma OKLCH ወይም HSL ይሰጥዎታል — ይለጥፉ፣ ከአሳሽ ሳይወጡ ለTailwind configዎ ወይም CSS variablesዎ ተመጣጣኙን HEX ይቅዱ።
ጥላዎችን ለመመርመር slidersን ይጎትቱ፣ ለስርዓታዊ የdesign system ፓሌት OKLCH እሴቶችን ይመዝግቡ።
ለhover states hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) መጠቀም እንዲችሉ የብራንድ ቀለምን ወደ HSL ቅርጹ ይቀይሩ።
የluminance መስክ በWCAG contrast ስሌቶች ውስጥ ጥቅም ላይ የሚውለውን ጥሬ እሴት ይሰጥዎታል — ለa11y ስሌት ጠቃሚ።
እያነበቡት ካሉ CSS ፋይል oklch(...) ይለጥፉ እና በትክክል የትኛውን ቀለም እንደሚያመነጭ ወዲያውኑ ይመልከቱ።
በDevSuite Pro dock ውስጥ ያለውን Color Formats አዶ ይጫኑ። Color picker, hex ግቤት, እና RGB sliders ያለው ፓነል ይከፈታል።
Color pickerን ይጠቀሙ፣ hex ይተይቡ፣ ወይም ማንኛውንም CSS የቀለም ሕብረቁምፊ ይለጥፉ (rgb(...), oklch(...), ወዘተ)። ቀለሙ ወዲያውኑ ይታያል።
እያንዳንዱ ቅርጸት ከታች ይታያል፦ HEX, RGB, HSL, HSV, OKLCH, CSS variable, እና luminance። ሲያስተካክሉ ሁሉም ተመሳሳይ ይሆናሉ።
ለጥሩ ማስተካከያዎች R/G/B/A slidersን ይጎትቱ። ከdesign spec ጋር የሚዛመድ የተለየ ጥላ ለማግኘት በጣም ጥሩ ነው።
በሚፈልጉት የቅርጸት ረድፍ ላይ Copyን ይጫኑ — እሴቱ በትክክለኛው syntax ወደ clipboardዎ ይገባል።
DevSuite Pro ን በነፃ ይጫኑ እና 64+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።
