Palette

የቀለም ፓሌት ጀነሬተር

በOKLCH የተመሰረቱ የብራንድ ፓሌቶች። መሰረታዊ ይምረጡ፣ እያንዳንዱን ክላሲክ ሃርሞኒ እና የ50–950 የቶን ሚዛን ያግኙ። ይቆልፉ፣ ደግመው ይዙሩ፣ እንደ CSS / Tailwind v4 / SCSS / JSON ይላኩ።

የቀለም ፓሌት ጀነሬተር — TL;DR

በOKLCH የተመሰረቱ የብራንድ ፓሌቶች። መሰረታዊ ይምረጡ፣ እያንዳንዱን ክላሲክ ሃርሞኒ እና የ50–950 የቶን ሚዛን ያግኙ። ይቆልፉ፣ ደግመው ይዙሩ፣ እንደ CSS / Tailwind v4 / SCSS / JSON ይላኩ።

የእኛ Color Picker & Converter በአንድ ጊዜ ለአንድ ቀለም ነው — ይምረጡ / ይቀይሩ / ይቅዱ። ይህ መሣሪያ ለፓሌቶች ነው፦ መሰረታዊ ቀለም ይጣሉ፣ ሙሉ ለብራንድ ዝግጁ ስርዓት (ሃርሞኒዎች + የቶን ሚዛን) በአንድ ጥይት ያግኙ። አንድ ሸሚዝ ከመግዛት እና ሙሉ የልብስ ቁምሳጥን ከማግኘት መካከል ያለው ልዩነት ነው።

HSL hues ያልተስተካከሉ ናቸው (ቢጫ በ60° ሰማያዊ በ240° ላይ ካለው ተመሳሳይ የብሩህነት እሴት ጋር በጣም ብሩህ ይሰማል)። በHSL ውስጥ የሚገኝ triadic ፓሌት ከሌሎቹ ይልቅ በትኩረት ብሩህ ወይም ደብዘዝ ያለ አንድ ናሙና አለው። OKLCH በአስተያየት ተመሳሳይ ነው — በተመሳሳይ የOKLCH ብሩህነት ላይ ሶስት ናሙናዎች ተመሳሳይ ብሩህነት ይታያሉ። ለዚህ ነው እያንዳንዱ ዘመናዊ የንድፍ ስርዓት (Apple HIG፣ Tailwind v4፣ IBM Carbon) ለሃርሞኒዎች እና ሚዛኖች ወደ OKLCH የሚሄደው።

የብራንድ ቀለሞችዎ መሣሪያዎን ፈጽሞ አይለቁም። DevTools → Network ይክፈቱ እና በማንኛውም ሥራ ጊዜ ዜሮ ወጪ ጥያቄዎችን ያያሉ።

ጠቃሚ ምክር፦ ያልተቆለፉ ናሙናዎችን እንደገና ለመዙር Space ይጫኑ።

የቶን ሚዛን (50 → 950)
CSS
Tailwind v4
SCSS
JSON

ለንድፍ ስርዓቶች የተሠራ፣ ለቆንጆ ስዕሎች ብቻ አይደለም

OKLCH ሃርሞኒዎች፣ የቶን ሚዛኖች፣ ቆልፍ-እና-ደግመው-ዙር፣ የdesign-token ላኪዎች — እና በትክክል አስደሳች የሚያደርጉ ጥቂት ትንንሽ ቅንጅቶች።

ስድስት OKLCH ሃርሞኒዎች

Complementary፣ analogous፣ triadic፣ tetradic፣ split-complementary፣ monochromatic — ሁሉም በOKLCH የተሰሉ ናቸው ስለዚህ የሶስት ሙሉ ብሩህ ቀለሞች triadic ፓሌት እኩል ብሩህ ሆኖ ይቆያል። ምንም HSL ጭቃ የለም።

50 → 950 የቶን ሚዛን

የብራንድ ቀለምዎን ይጣሉ፣ በOKLCH ኩርቭ ላይ ብሩህነትን በመራመድ የተፈጠረ የTailwind-ቅርጽ 50, 100, 200, … 900, 950 የቶን ሚዛን ያግኙ። ቀለሞች በsRGB gamut ውስጥ እንዲቆዩ Chroma በጫፎቹ ላይ ይጨመቃል።

ቆልፍ + ደግመው-ዙር (Coolors-ስታይል)

ማንኛውንም ናሙና (የመቆለፊያ አዶ) ይሰኩ እና ቀሪውን በተመረጠው ሃርሞኒ ውስጥ ለማበላለጥ ደግመው ዙሩ ይጫኑ (ወይም Space ብቻ ይጫኑ)። በፍጥነት ይድገሙ፣ የሚወዱትን ይያዙ።

አራት የምርት-ደረጃ ላኪዎች

CSS custom properties (--brand-500)፣ Tailwind v4 @theme block፣ SCSS map፣ እና ለStyle Dictionary / Figma Tokens ዝግጁ የሆኑ JSON design tokens። እንዲሁም 1200×200 PNG ናሙና ስትሪፕ።

WCAG ንፅፅር በአንድ እይታ

እያንዳንዱ ናሙና ከጥቁር ወይም ከነጭ የተሻለ ጋር ያለውን WCAG የንፅፅር ጥምርታ ያሳያል፣ ከAA / AAA / አልተሳካም ባጅ ጋር። ከመላክዎ በፊት የተደራሽነት ችግሮችን ያግኙ።

በንድፍ ግላዊነት

እያንዳንዱ ባይት በመሣሪያዎ ላይ ይቆያል። OKLCH ሂሳብ፣ የሃርሞኒ ማመንጨት፣ የሚዛን መውጣት፣ PNG ላኪ ሁሉም በJavaScript አካባቢያዊ ይሰራሉ። DevTools → Network ይክፈቱ እና ዜሮ ወጪ ጥያቄዎችን ያረጋግጡ።

የብራንድ ፓሌት እንዴት እንደሚገነባ

ከአንድ መሰረታዊ ቀለም ወደ ሙሉ ለdesign-token ዝግጁ ፓሌት አራት ደረጃዎች።

  1. 1

    የብራንድ መሰረታዊ ቀለምዎን ይጣሉ

    የቀለም ሳጥኑን ጠቅ ያድርጉ፣ HEX ይለጥፉ ወይም ለመነሳሳት በዘፈቀደ መሰረት ይጫኑ። መሣሪያው ሙሉ ፓሌቱን በዚህ ቀለም ላይ ያተኮረ ያደርገዋል — ሁለቱም የሃርሞኒ ናሙናዎች እና የ11-ደረጃ የቶን ሚዛን።

  2. 2

    ሃርሞኒ ይምረጡ

    ነባሪ Analogous ነው — በመሰረቱ 30° ውስጥ ያሉ ሶስት ቀለሞች፣ ለተረጋጋ የብራንድ ፓሌቶች ምርጥ። Complementary ለንፅፅር አክሰንቶች። Triadic / Tetradic ለeditorial / ጨዋታ ብራንዶች። Monochromatic ለቶናዊ የአንድ-hue ስርዓቶች። ሁሉም በOKLCH የተሰሉ ናቸው ስለዚህ እኩል ብሩህ ሆነው ይቆያሉ።

  3. 3

    እስከሚወዱ ድረስ ቆልፍ + ደግመው-ዙር

    ሊጠብቁት የሚፈልጉትን ማንኛውንም ናሙና የመቆለፊያ አዶ ጠቅ ያድርጉ፣ ከዚያ Space ይጫኑ (ወይም ደግመው ዙሩ ይጫኑ) ቀሪውን በሃርሞኒው ውስጥ ለማበላለጥ። በፍጥነት ይድገሙ። ትክክለኛ እሴት መድረስ ከፈለጉ HEX መስኩን ጠቅ በማድረግ ማንኛውንም ናሙና በቀጥታ ያርትዑ።

  4. 4

    እንደ design tokens ላኩ

    የCSS ውጤቱን (custom properties)፣ Tailwind v4 (@theme ብሎክ)፣ SCSS map፣ ወይም JSON design tokens ይቅዱ። ወይም ለንድፍ ውቅር ለመጣል ዝግጁ የሆነ 1200×200 ናሙና ስትሪፕ ለማግኘት PNG አውርድ ይጫኑ።

ለብራንድ ንድፍ አውጪዎች + የንድፍ-ስርዓት ቡድኖች የተሠራ

የግላዊነት-ቀዳሚ OKLCH ፓሌት መሣሪያ በFigma ውስጥ የhex ኮዶችን በእጅ ከማስተካከል የሚበልጥባቸው አራት የተለመዱ ሁኔታዎች።

አዲስ የብራንድ ማንነት sprint

የብራንድ ቀለም አለዎት፣ በዙሪያው ስርዓት ይፈልጋሉ። HEXን ይጣሉ፣ Analogous ይምረጡ፣ ሁለት ደጋፊ ቀለሞች እስኪዘምሩ ድረስ ደግመው ይዙሩ፣ ሶስቱንም ይቆልፉ። ወደ የቶን ሚዛን እይታ ይቀይሩ፣ የTailwind @theme ብሎክ ይቅዱ፣ በአዲሱ ፕሮጀክት app.css ውስጥ ይለጥፉ። ጠቅላላ ጊዜ፦ 5 ደቂቃዎች።

ብራንድ ወደ ነባር Tailwind ፕሮጀክት ማከል

ነባሪው Tailwind indigo ብራንድዎ አይደለም። ብራንድዎ #5B3FCD ነው። ይጣሉት፣ የTailwind ክፍተትን በትክክል የሚያንፀባርቅ የ11-ደረጃ የቶን ሚዛን ያግኙ። የ@theme ብሎክ ይቅዱ — እያንዳንዱ bg-brand-500 / text-brand-700 በቀላሉ ይሰራል።

ከመጀመሩ በፊት ተደራሽነትን መፈተሽ

እያንዳንዱ ናሙና የWCAG ንፅፅር ጥምርታ + AA/AAA ባጅ ያሳያል። brand-500 ከነጭ ጋር AA እንደደረሰ፣ እና brand-100 በbrand-900 ጽሑፍ እንደ ዳራ ቶን ሊነበብ እንደሚቀር ይመልከቱ። ችግር ያለባቸውን ናሙናዎች በተናጠል ደግመው በመዙር ይጠግኗቸው።

የበርካታ-ብራንድ የንድፍ ስርዓት

ኤጀንሲዎች / የበርካታ-ብራንድ ኩባንያዎች N ትይዩ የንድፍ ስርዓቶችን ይይዛሉ፣ እያንዳንዳቸው ተመሳሳይ ቅርጽ ግን የተለየ የብራንድ hue አላቸው። ለእያንዳንዱ ብራንድ ተመሳሳይ የሃርሞኒ + የቶን-ሚዛን workflow ይጠቀሙ፣ እያንዳንዱን እንደ JSON tokens ይላኩ፣ በStyle Dictionary ውስጥ ይጣሉ። ተመጣጣኝ ቅርጽ፣ ልዩ ማንነት።

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

የብራንድ ቀለሞችዎ መሣሪያዎን ፈጽሞ አይለቁም። DevTools → Network ይክፈቱ እና በማንኛውም ሥራ ጊዜ ዜሮ ወጪ ጥያቄዎችን ያያሉ።

  • OKLCH ሂሳብ፣ የሃርሞኒ ማመንጨት፣ የቶን-ሚዛን መውጣት፣ የWCAG ንፅፅር ሂሳብ፣ እና PNG ላኪ ሁሉም በማሽንዎ ላይ እንደ JavaScript ይሰራሉ — ምንም በሰርቨር-ጎን ማሳያ የለም፣ ምንም የሶስተኛ ወገን API የለም።
  • PNG ላኪ አካባቢያዊ canvas ይጠቀማል፤ የናሙና ምስል ሙሉ በሙሉ በአሳሽ ማህደረ ትውስታ ውስጥ ይፈጠራል እና እንደ Blob ይወርዳል — ምንም ነገር ኔትወርኩን አያቋርጥም።
  • ምንም መግቢያ የለም፣ በቀለም እሴቶች ላይ ምንም ቴሌሜትሪ የለም። አንድ cookie ለcookie-consent ሁኔታ እና አንድ ለቋንቋ ምርጫ ብቻ እንጠቀማለን።

ተዛማጅ መመሪያዎች

በOKLCH ፓሌቶች፣ በብራንድ የቀለም ስርዓቶች እና በdesign tokens ላይ በእጅ የተመረጡ ንባቦች።

በተደጋጋሚ የሚጠየቁ

በዚህ እና በተራ የቀለም መራጭ መካከል ያለው ልዩነት ምንድነው?

የእኛ Color Picker & Converter በአንድ ጊዜ ለአንድ ቀለም ነው — ይምረጡ / ይቀይሩ / ይቅዱ። ይህ መሣሪያ ለፓሌቶች ነው፦ መሰረታዊ ቀለም ይጣሉ፣ ሙሉ ለብራንድ ዝግጁ ስርዓት (ሃርሞኒዎች + የቶን ሚዛን) በአንድ ጥይት ያግኙ። አንድ ሸሚዝ ከመግዛት እና ሙሉ የልብስ ቁምሳጥን ከማግኘት መካከል ያለው ልዩነት ነው።

ለምን OKLCH እንጂ HSL አይደለም?

HSL hues ያልተስተካከሉ ናቸው (ቢጫ በ60° ሰማያዊ በ240° ላይ ካለው ተመሳሳይ የብሩህነት እሴት ጋር በጣም ብሩህ ይሰማል)። በHSL ውስጥ የሚገኝ triadic ፓሌት ከሌሎቹ ይልቅ በትኩረት ብሩህ ወይም ደብዘዝ ያለ አንድ ናሙና አለው። OKLCH በአስተያየት ተመሳሳይ ነው — በተመሳሳይ የOKLCH ብሩህነት ላይ ሶስት ናሙናዎች ተመሳሳይ ብሩህነት ይታያሉ። ለዚህ ነው እያንዳንዱ ዘመናዊ የንድፍ ስርዓት (Apple HIG፣ Tailwind v4፣ IBM Carbon) ለሃርሞኒዎች እና ሚዛኖች ወደ OKLCH የሚሄደው።

'የቶን ሚዛን (50 → 950)' ምን ማለት ነው?

የTailwind-ስታይል የብራንድ-ቀለም ሚዛን ነው፦ indigo-50 (በጣም ቀላል)፣ indigo-100፣ indigo-200፣ … indigo-900፣ indigo-950 (በጣም ጨለማ)። የብራንድ ቀለምዎን ይጣሉ እና መሣሪያው OKLCH ብሩህነትን በተወሰነ ኩርቭ በመራመድ ሁሉንም 11 ደረጃዎች በራስ-ሰር ይፈጥራል። ውጤቱ በብራንድ ቀለምዎ ውስጥ የማንኛውም Tailwind ፓሌት ቶከን ቀጥታ ምትክ ነው።

ናሙና እንዴት ቆልፌ ሌሎቹን ብቻ እንደገና እዙራለሁ?

በማንኛውም ናሙና ላይኛ-ግራ ጥግ ላይ ያለውን የመቆለፊያ አዶ ጠቅ ያድርጉ — ቦታ ላይ ይቆያል። ከዚያ ደግመው ዙሩ ይጫኑ ወይም Space ይጫኑ ሁሉንም ያልተቆለፉ ናሙናዎች በተመረጠው ሃርሞኒ ውስጥ ለማበላለጥ። ጥሩ ፓሌት የሚያገኙበት መንገድ ይህ ነው፦ ቀደም ብለው ከወሰኑት የብራንድ ቀለም ይሰኩ፣ በዙሪያው ያሉትን ልዩነቶች ያስሱ።

ወደ ሰርቨርዎ የሚላክ ነገር አለ?

የለም። OKLCH ሂሳብ፣ የሃርሞኒ ማመንጨት፣ የቶን-ሚዛን መውጣት፣ የንፅፅር-ጥምርታ ሂሳብ፣ PNG ላኪ፣ እያንዳንዱ የክሊፕቦርድ ቅጂ — ሁሉም በመሣሪያዎ ላይ በJavaScript ይሰራሉ። DevTools → Network ይክፈቱ እና ዜሮ ወጪ ጥያቄዎችን ያያሉ። የብራንድ ቀለሞችዎን፣ የውስጥ design tokens፣ NDA-የተቆለፉ ፓሌቶችን ይለጥፉ — ምንም ነገር ላፕቶፕዎን አይለቅም።