Color Picker & Converter

Color Picker & Converter

በእይታ ይምረጡ ወይም ማንኛውንም እሴት ይለጥፉ — HEX፣ RGB፣ HSL፣ OKLCH እና OKLAB በተመሳሳይ ይዘመናሉ። WCAG 2.2 ንፅፅር ፈታሽና በOKLCH ላይ የተመሠረተ palette ማመንጫን ያካትታል። ሙሉ በሙሉ በአሳሽዎ ውስጥ ይሰራል።

Color Picker & Converter — TL;DR

በእይታ ይምረጡ ወይም ማንኛውንም እሴት ይለጥፉ — HEX፣ RGB፣ HSL፣ OKLCH እና OKLAB በተመሳሳይ ይዘመናሉ። WCAG 2.2 ንፅፅር ፈታሽና በOKLCH ላይ የተመሠረተ palette ማመንጫን ያካትታል። ሙሉ በሙሉ በአሳሽዎ ውስጥ ይሰራል።

የhex እሴትዎን (ለምሳሌ #ff5722) ወደ HEX መስክ ይለጥፉ — የRGB ረድፍ ወዲያውኑ ይዘመናል። እንዲሁም rgb(255 87 34)ን ወደ RGB መስክ ይለጥፉ እና HEX፣ HSL፣ OKLCH እና OKLAB ሁሉም ይመሳሰላሉ። ለውጥ በሁሉም በሚደገፉ ቅርጸቶች ላይ ሁለት-አቅጣጫዊ ነው።

OKLCH የCSS Color Module Level 4 የቀለም space ሲሆን perceptual lightness (L)፣ chroma (C)፣ እና hue (h) ይጠቀማል — እንደ HSL ግን perceptually uniform ነው። ሁለት ተመሳሳይ L እሴት ያላቸው OKLCH ቀለሞች በተለያዩ hues እንኳ እኩል ብሩህ ይታያሉ። ይህ የንድፍ ቶከኖችን፣ የሚመነጩ palettes እና ተደራሽ የቀለም ramps ከHSL የበለጠ የሚተነበዩ ያደርጋቸዋል። ሁሉም evergreen አሳሾች (Chrome 111+፣ Safari 15.4+፣ Firefox 113+) ይደግፉታል።

የቀለም እሴቶች ፈጽሞ መሣሪያዎን አይለቁም። DevTools → Network ይክፈቱ እና በለውጥ፣ በመምረጥ፣ palette ማመንጨት ወይም ንፅፅር መፈተሽ ጊዜ ዜሮ outbound requests ይታያሉ።

HEX
RGB
HSL
OKLCH
OKLAB
የተሰየመ

Palette

WCAG 2.2 ንፅፅር

ጽሑፍ
ዳራ
—
ቅድመ እይታ
ትልቅ ርዕስ ናሙና
የሰውነት ጽሑፍ ናሙና — the quick brown fox jumps over the lazy dog.

ለእውነተኛ የስራ ፍሰቶች የተነደፈ

ከንድፍ ሲስተሞች እስከ የተደራሽነት ኦዲቶች — የሚያስፈልግዎ እያንዳንዱ ቅርጸትና ፍተሻ፣ በአንድ ቦታ።

ስድስት የቀለም space

በHEX (3 / 4 / 6 / 8 ዲጂት)፣ RGB(A)፣ HSL(A)፣ OKLCH፣ OKLAB እና CSS named colors መካከል ይመላለሱ። የውጤት ሕብረቁምፊዎች ከCSS Color Module Level 4 syntax ጋር ይዛመዳሉ — በቀጥታ ወደ stylesheet ይለጥፉ።

WCAG 2.2 ንፅፅር ፈታሽ

በሁለት ቀለሞች መካከል ያለውን ንፅፅር ሬሾ በአንድ ጠቅታ ለAA (4.5 : 1) እና AAA (7 : 1) በሁለቱም መደበኛና ትልቅ የጽሑፍ መጠን ላይ pass/fail ባጅ ጋር ይመልከቱ። ስሌቱ ከW3C ማጣቀሻ ጋር ይዛመዳል፦ sRGB linearization፣ relative luminance፣ ከዚያም (L1+0.05)/(L2+0.05)።

EyeDropper — ማንኛውንም pixel ናሙና

በማያ ገጽዎ ላይ ማንኛውንም ቀለም ናሙና ለመውሰድ eyedropperን ጠቅ ያድርጉ — ንድፎች፣ ቅፅበታዊ ገጽ ሥዕሎች፣ ፎቶዎች፣ እንዲሁም ሌሎች የአሳሽ ትሮች። በChromium አሳሾች ላይ native EyeDropper API ይጠቀማል።

በOKLCH የተመሠረተ palette

9-ደረጃ tints እና shades በተጨማሪ complementary፣ triadic እና analogous harmonies ያመነጩ — በOKLCH የተገኙ ስለሆነ እያንዳንዱ ደረጃ በስሜት እኩል ነው (ከHSL በተለየ፣ lightness ያለማቋረጥ ይለዋወጣል)።

ግላዊነት በንድፍ

እያንዳንዱ ለውጥ በመሣሪያዎ ላይ በJavaScript ይሰራል። ምንም አይሰቀልም፣ አይመዘገብም፣ ወይም ለሶስተኛ ወገን አይላክም — ራስዎ ለማረጋገጥ DevTools → Network ይክፈቱ።

ለፍጥነት የተነደፈ

ንጹህ JavaScript፣ የframework runtime የለም። ቀዝቃዛ ጭነት ከ50 KB gzipped በታች ነው፤ ለውጦችና palette ማመንጨት በአምስት ዓመት እድሜ ላፕቶፕ ላይ ከአንድ ሚሊሰከንድ በታች ይጠናቀቃሉ።

የቀለም መራጭ እንዴት እንደሚጠቀሙ

ለመጀመር አራት መንገዶች፣ እያንዳንዱ ቅርጸት በተመሳሳይ።

  1. 1

    በእይታ ይምረጡ

    ጥላውን ለመምረጥ በsaturation/value ካሬ ውስጥ ይጎትቱ፣ መሰረታዊ ቀለሙን ለመለወጥ ከታች ያለውን hue bar ያንሸራትቱ፣ እና ለግልጽነት alpha slider ይጠቀሙ። በቀኝ በኩል ያለ እያንዳንዱ ቅርጸት ወዲያውኑ ይዘመናል።

  2. 2

    ማንኛውንም እሴት ይለጥፉ

    HEX (#4f46e5)፣ RGB (rgb(79 70 229))፣ HSL (hsl(244 76% 59%))፣ OKLCH (oklch(53% 0.22 277)) ወይም CSS named color (tomato) እንኳ ወደ ተዛማጅ input ይለጥፉ — መራጩና ሌሎች ቅርጸቶች ሁሉም ይመሳሰላሉ።

  3. 3

    በeyedropper ናሙና ይውሰዱ

    በማያ ገጽዎ ላይ ማንኛውንም pixel ለመያዝ eyedropper ቁልፍን ጠቅ ያድርጉ — ሌላ ትር፣ ቅፅበታዊ ገጽ ሥዕል፣ ፎቶ፣ አዶ። በChrome፣ Edge እና Opera ላይ native EyeDropper API ይጠቀማል።

  4. 4

    ይቅዱ ወይም ንፅፅር ይፈትሹ

    በማንኛውም ቅርጸት አጠገብ ያለውን copy አዶ ጠቅ ያድርጉ ወደ clipboardዎ ለማስቀመጥ። ወይም የእርስዎ foreground / background ጥምረት በመደበኛና በትልቅ የጽሑፍ መጠን AA ወይም AAA እንደሚያልፍ ለማረጋገጥ ወደ WCAG 2.2 ንፅፅር ክፍል ይሸብልሉ።

ለንድፍ አውጪዎች፣ ለገንቢዎች እና ለተደራሽነት ኦዲተሮች የተሠራ

ከአራት የተለመዱ የስራ ፍሰቶች ጋር የሚስማማ የቀለም መሣሪያ።

የንድፍ ሲስተም token ድርሰት

በbrand HEX እሴቶችን ወደ OKLCH ይቀይሩ ስለዚህ በtoken ramp ውስጥ ያለ እያንዳንዱ ጥላ ተመሳሳይ perceptual lightness ደረጃ አለው። የOKLCH ውጤትን በቀጥታ ወደ CSS ይለጥፉ — preprocessor አያስፈልግም።

WCAG የተደራሽነት ኦዲቶች

Foreground / background ጥንዶችን ይጥሉ እና የንፅፅር ሬሾውን ከAA / AAA ባጅ ጋር ያንብቡ። ከመቅረባቸው በፊት የሚወድቁ ጥምረቶችን ይያዙ — የW3C-የተሰጠውን 4.5 : 1 መደበኛ / 7 : 1 enhanced ገደቦችን ያሟላል።

የFront-end CSS ለውጥ

ከንድፍ አውጪ mockup HEX አለዎት ግን ለTailwind config HSL ወይም ለዘመናዊ stylesheet OKLCH ያስፈልግዎታል? አንዴ ይለጥፉ፣ በማንኛውም ቅርጸት ይቅዱ። የውጤት ሕብረቁምፊዎች ትክክለኛ የCSS Color Module Level 4 syntax ናቸው።

Palette ምርምር

መሰረታዊ ቀለም ይምረጡ እና ዘጠኝ perceptually-spaced tints እና shades ከcomplementary፣ triadic እና analogous harmonies ጋር ወዲያውኑ ይመልከቱ — በOKLCH የተመነጩ ስለሆነ እያንዳንዱ ደረጃ እኩል ብሩህ ይመስላል።

100% ግላዊ — በአሳሽዎ ውስጥ ይሰራል

የቀለም እሴቶች ፈጽሞ መሣሪያዎን አይለቁም። DevTools → Network ይክፈቱ እና በለውጥ፣ በመምረጥ፣ palette ማመንጨት ወይም ንፅፅር መፈተሽ ጊዜ ዜሮ outbound requests ይታያሉ።

  • እያንዳንዱ ለውጥ (HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB) በማሽንዎ ላይ እንደ JavaScript ይሰራል — ቀመሮቹ በገጽ source ውስጥ ይታያሉ።
  • EyeDropper API በግልጽ ጠቅ ያደረጓቸውን ቀለሞች ብቻ ይመልሳል፤ አሳሹ ፈቃዱን ይይዛል እና ገጹ ማንኛውንም pixel እንዲያይ ፈጽሞ አይፈቅድም።
  • ምዝገባ የለም፣ በቀለም እሴቶች ላይ telemetry የለም፣ የሶስተኛ-ወገን የቀለም API የለም። ጣቢያው ከሳጥን ውጭ GDPR-compliant ነው።

ተዛማጅ መመሪያዎች

ለንድፍ አውጪዎች፣ ለገንቢዎች እና ለተደራሽነት ቡድኖች በእጅ የተመረጡ tutorials።

ተደጋግሞ የሚጠየቁ

HEXን ወደ RGB እንዴት ልቀይር?

የhex እሴትዎን (ለምሳሌ #ff5722) ወደ HEX መስክ ይለጥፉ — የRGB ረድፍ ወዲያውኑ ይዘመናል። እንዲሁም rgb(255 87 34)ን ወደ RGB መስክ ይለጥፉ እና HEX፣ HSL፣ OKLCH እና OKLAB ሁሉም ይመሳሰላሉ። ለውጥ በሁሉም በሚደገፉ ቅርጸቶች ላይ ሁለት-አቅጣጫዊ ነው።

OKLCH ምንድነው እና ለምን መጠቀም አለብኝ?

OKLCH የCSS Color Module Level 4 የቀለም space ሲሆን perceptual lightness (L)፣ chroma (C)፣ እና hue (h) ይጠቀማል — እንደ HSL ግን perceptually uniform ነው። ሁለት ተመሳሳይ L እሴት ያላቸው OKLCH ቀለሞች በተለያዩ hues እንኳ እኩል ብሩህ ይታያሉ። ይህ የንድፍ ቶከኖችን፣ የሚመነጩ palettes እና ተደራሽ የቀለም ramps ከHSL የበለጠ የሚተነበዩ ያደርጋቸዋል። ሁሉም evergreen አሳሾች (Chrome 111+፣ Safari 15.4+፣ Firefox 113+) ይደግፉታል።

የWCAG ንፅፅር ውጤት አስተማማኝ ነው?

አዎ። ከWCAG 2.2 §1.4.3 ያለውን algorithm እንጠቀማለን፦ እያንዳንዱን sRGB ቻናል linearize ያድርጉ፣ relative luminance ስሉ (0.2126·R + 0.7152·G + 0.0722·B)፣ ከዚያም (L_lighter + 0.05) / (L_darker + 0.05)። AA በ4.5 : 1 ለመደበኛ ጽሑፍ እና በ3 : 1 ለትልቅ ጽሑፍ (18 pt+ ወይም 14 pt+ bold) ያልፋል። AAA በቅደም ተከተል በ7 : 1 እና በ4.5 : 1 ያልፋል።

ከምስሎች ወይም ከሌሎች መተግበሪያዎች ቀለሞችን ናሙና መውሰድ እችላለሁ?

አዎ — የአሳሹን ውስጠ-ግንባታ EyeDropper API ለማስነሳት Eyedropper ቁልፍን ጠቅ ያድርጉ። በማያ ገጽ ላይ ማንኛውንም pixel ናሙና መውሰድ ይችላሉ፦ ሌላ የአሳሽ ትር፣ Figma ንድፍ፣ የቪዲዮ ፍሬም፣ እንዲሁም ቅፅበታዊ ገጽ ሥዕል። በአሁኑ ጊዜ በChrome፣ Edge እና Opera ላይ ይደገፋል፤ Firefox እና Safari በቆንጆ ሁኔታ ይመለሳሉ (ቁልፉ ይሰናከላል)።

ወደ አገልጋይዎ የሚላክ ነገር አለ?

የለም። መራጩ፣ እያንዳንዱ ለውጥ፣ palette ማመንጫው እና የንፅፅር ፈታሹ ሁሉም በአሳሽዎ ውስጥ ይሰራሉ። ምንም የቀለም እሴቶች፣ የምስል ናሙናዎች ወይም ጽሑፍ ፈጽሞ አይተላለፍም። DevTools → Network መክፈት እና በአጠቃቀም ጊዜ ዜሮ outbound requests መኖራቸውን ማረጋገጥ ይችላሉ።