Үндсэн агуулга руу очих
LibraTool logoLibraTool

Өнгө хөрвүүлэгч — үнэгүй

Өнгөнүүдийг HEX, RGB, HSL, HSV, CMYK форматуудын хоорондоо агшин зуур хөрвүүлэх. Гэрэлтийн хэмжүүр болон урьдчилан тохируулсан дэвсгэр өнгөнүүдийг агуулна.

Ачаалагдсаны дараа офлайн ажилладаг

Өнгөийг HEX, RGB, HSL, HSV болон CMYK-ийн хооронд хөрвүүлэх — амьд урьдчилсан үзүүлэлт, нэг даралтаар хуулах. Бүгд таны браузер дээр ажилладаг.

Хүлээн авах: HEX (#fff эсвэл #ffffff), RGB (255, 255, 255), эсвэл HSL (360, 100%, 50%)

100%
Урьдчилсан тохиргоо:
HEX#14B8A6
rgb() · хуучинrgb(20, 184, 166)
rgb() · орчин үеrgb(20 184 166)
hsl() · хуучинhsl(173, 80%, 40%)
hsl() · орчин үеhsl(173 80% 40%)
oklch()oklch(70.4% 0.123 182.5)
lab()lab(67.1% -42.9 -2.3)
lch()lch(67.1% 43.0 183.1)
hsv()hsv(173, 89%, 72%)
cmyk()cmyk(89%, 0%, 10%, 28%)
RGB утгууд20, 184, 166

WCAG контраст

Цагаан дэвсгэр дээр

2.49:1

Амжилтгүй

Хар дэвсгэр дээр

8.44:1

AAA
🖨️ Хэвлэлтийн хувьд: Эдгээр CMYK утгууд (89%, 0%, 10%, 28%) нь лавлагаанд зориулсан sRGB→CMYK-ийн стандарт ойролцоолол юм. Хэвлэлийн үнэн зөв өнгө авахын тулд принтерийнхээ ICC профайл эсвэл туршилтын хэвлэлийг ашиглана уу — дэлгэцийн CMYK нь бүх бэх/цаасанд таарахгүй.

Гэрэлтийн шат

Тухайн сүүдэрт шилжихийн тулд дурын дөрвөлжин дарна уу

Түгээмэл хэрэглээ

  • Веб дизайны өнгүүдийг хөрвүүлэхАливаа өнгөний HEX, RGB болон HSL үнэ цэнэ авна уу - CSS эсвэл Tailwind-д наалж авна уу.
  • Хэвлүүлэх өнгүүдийг хөрвүүлэх (CMYK)Дэлгэцийн өнгүүдийг (HEX/RGB) хэвлүүлэх дизайн болон мэргэжлийн хэвлүүлэх-н CMYK үнэ цэнэлэх.
  • Дизайн системүүдийн өнгөний палетруудыг бүтээхБрэндийн өнгүүдийг бүх форматаар хөрвүүлэх болон бүхэл дизайн системийн нийцэнэ гэрэлтэй масштабыг үүсгэнэ үү.
  • Хүртээмжтэй өнгөний сайтыг шалгаж, дүшээлэхСайтын контраст хэмжээ багцын RGB утгуудыг авахын тулд өнгөүүдийг хувиргах — хүртээмжтэй дизайныг WCAG байцаалт.
  • Figma-д зориулсан өнгөг хувиргахFigma өнгө сонгон авах болон дизайн токен эсүүлэлүүдэд оруулахад яг HEX болон RGB утгуудыг авах.

Хэрхэн ажилладаг

Бүх хөрвүүлэлтийн логик бол таны хөтчид бүхэлдээ ажилладаг гараар бичсэн JavaScript — номын сан, серверийн дуудлага хамааралгүй. Хэрэгсэл таны оролтыг задалж, цэвэр математик функцийн гинжээр дамжуулж, орчин үеийн CSS Color 4 орон зайнууд oklch(), lab()-г оролцуулан арван нэг гаралтын формат зэрэг гаргадаг.

  1. 1
    Уян хатан оролтын задлалт
    Захиалгат задлагч hex (3, 4, 6 эсвэл 8 цифр), rgb()/rgba(), hsl()/hsla()-г хуучин таслалын синтакс, орчин үеийн зайн синтакс хоёуланд, мөн энгийн тоон гурвалыг хүлээн авдаг. Аравтын бутархай эсвэл хувийн alpha утга ямар ч хөрвүүлэлт эхлэхийн өмнө 0–1 муж руу нормалчлагддаг.
  2. 2
    RGB хөрвүүлэлтийн төв болгон
    Хүлээн авсан формат бүр эхлээд каноник RGB гурвал руу шийдэгддэг. Тэр цорын ганц илэрхийллээс хэрэгсэл салбарладаг: HSL, HSV нь стандарт min/max/chroma томьёо ашигладаг; CMYK гол сувгийг олж гаргагддаг; ойлголтын-орон зайн тооцооллын өмнө sRGB шугамжуулалт (IEC 61966-2-1-д тодорхойлсон хэсэгчилсэн gamma муруй) хэрэглэгддэг.
  3. 3
    Ойлголтын өнгөний орон зай шинээс тооцоологддог
    oklch() нь Björn Ottosson-ийн лавлагаа 3×3 матрицуудыг (LMS шоо-язгуур орон зай) ашиглан тооцоологддог. lab(), lch() нь CSS Color 4-ийн lab()-г тодорхойлсонтой тохирох D65 цагаан цэгээс D50 руу хөрвүүлэхийн тулд Bradford хроматик дасан зохицолт ашигладаг. Эдгээр нь хөтчийн зурлагын систем ашигладаг ижил томьёо — гадаад хараат байдалгүйгээр энд хэрэгжсэн.
  4. 4
    WCAG ялгаралт ба гэрэлтэлтийн шкал
    Харьцангуй гэрэлтэлт WCAG 2.1 томьёогоор (шугамжуулсан R, G, B 0.2126/0.7152/0.0722-аар жинлэгдсэн) тооцоологдож, цагаан, хартай харьцуулсан ялгаралтын харьцаа AA-large, AA, AAA эсвэл Fail гэж дүгнэгддэг. Есөн-алхамт гэрэлтэлтийн туузыг HSL гэрэлтэлтийн сувгийг 10%-аас 90% хүртэл алхуулж үүсгэдэг, ямар ч swatch дээр даран тэр өнгийг хөрвүүлж болно.

Холбоотой хэрэгслүүд

🎨

Өнгө сонгогч ба палитр үүсгэгч

Өнгө сонгох, HEX/RGB/HSL хооронд хөрвүүлэх, зохицсон палитр үүсгэх.

Туршиж үзэх
🎨

Санамсаргүй өнгө үүсгэгч

Санамсаргүй өнгийг нэг нэгээр нь эсвэл таван өнгийн палитраар үүсгэж, таалагдсаныг түгжиж, HEX, RGB эсвэл HSL утгыг хуулж, палитрыг PNG эсвэл CSS-ээр экспортол.

Туршиж үзэх
🎨

Өнгөний палитр үүсгэгч

Дурын үндсэн өнгөнөөс нөхөх, аналог, гурвалжин, монохром өнгөний палитруудыг үүсгэх. Нэг товшилтоор hex кодуудыг хуулах.

Туршиж үзэх

Түгээмэл асуултууд