ຂ້ອຍຈະປ່ຽນສີ HEX ເປັນ RGB ແລະ HSL ໄດ້ແນວໃດ?

ພິມ ຫຼື ວາງສີໃນ ປ້ອນສີ, ຕົວຢ່າງ #14b8a6, ຫຼື ໃຊ້ຕົວເລືອກສີ. ເຄື່ອງມືສະແດງຄ່າ HEX, rgb(), hsl(), hsv() ແລະ cmyk(), ພ້ອມ oklch(), lab() ແລະ lch(), ແຕ່ລະອັນມີປຸ່ມ ສຳເນົາ.

ຂ້ອຍພິມຮູບແບບສີໃດໄດ້ແດ່?

HEX 3, 4, 6 ຫຼື 8 ຫຼັກ, rgb() ຫຼື rgba(), hsl() ຫຼື hsla() ໃນໄວຍາກອນຈຸດ ຫຼື ຊ່ອງຫວ່າງ, ແລະ ຕົວເລກສາມຕົວລ້ວນໆ. ຖ້າບໍ່ຮູ້ຈັກຂໍ້ມູນປ້ອນ, ເຄື່ອງມືສະແດງຂໍ້ຜິດພາດການວິເຄາະ.

ຂ້ອຍສາມາດປ່ຽນສີທີ່ມີຄວາມໂປ່ງໃສໄດ້ບໍ?

ໄດ້. ໃຊ້ຕົວຄວບຄຸມ ຄວາມທຶບ ຫຼື ໃສ່ຄ່າ alpha ໃນຊ່ອງປ້ອນ. ຜົນລັບຈະລວມຊ່ອງ alpha, ເຊັ່ນ HEX 8 ຫຼັກ, rgba(), ຫຼື alpha ແບບຂີດ slash ໃນໄວຍາກອນສະໄໝໃໝ່.

ຄ່າ CMYK ຖືກຕ້ອງສຳລັບການພິມບໍ?

ບໍ່, ມັນເປັນການປະມານມາດຕະຖານຈາກ sRGB ເປັນ CMYK, ສະແດງພາຍໃຕ້ ສຳລັບການພິມ. ສຳລັບສີພິມທີ່ຖືກຕ້ອງ, ໃຊ້ໂປຣໄຟລ໌ສີຂອງເຄື່ອງພິມ ຫຼື ຂໍພິມທົດລອງ, ເພາະສີສົດໃສຂອງໜ້າຈໍມັກພິມອອກມາໝົ່ນກວ່າ.

ຂ້ອຍຈະກວດວ່າສີຂອງຂ້ອຍມີຄວາມຄົມຊັດພໍສຳລັບຂໍ້ຄວາມໄດ້ແນວໃດ?

ເບິ່ງສ່ວນຄວາມຄົມຊັດ WCAG. ມັນສະແດງອັດຕາສ່ວນຄວາມຄົມຊັດຂອງສີທ່ານເທິງສີຂາວ ແລະ ສີດຳ, ໃຫ້ເກຣດ AAA, AA, AA ໃຫຍ່ ຫຼື ບໍ່ຜ່ານ. ມາດຕາສ່ວນຄວາມສະຫວ່າງ ສະເໜີເງົາອ່ອນ ຫຼື ເຂັ້ມກວ່າໃຫ້ລອງ.

ຟຣີແທ້ບໍ?

ແມ່ນແລ້ວ. ທຸກເຄື່ອງມືແມ່ນໃຊ້ຟຣີ, ບໍ່ຕ້ອງມີບັນຊີ ແລະ ບໍ່ຕ້ອງໃຊ້ບັດເຄຣດິດ. ການເຮັດວຽກທັງໝົດແມ່ນດຳເນີນຢູ່ໃນອຸປະກອນຂອງທ່ານແທນທີ່ຈະຢູ່ໃນເຊີບເວີຂອງພວກເຮົາ, ເຊິ່ງເຮັດໃຫ້ເຮົາສາມາດໃຫ້ບໍລິການໄດ້ຟຣີ.

ມັນເຮັດວຽກຢູ່ໃນມືຖືບໍ?

ໄດ້. ມັນເຮັດວຽກໃນບຣາວເຊີມືຖືລຸ້ນໃໝ່ເທິງ iOS ແລະ Android ໂດຍບໍ່ຕ້ອງຕິດຕັ້ງຫຍັງ.

🎨

ຕົວແປງສີ ຟຣີ

ແປງສີລະຫວ່າງ HEX, RGB, HSL, HSV ແລະ CMYK ທັນທີ. ລວມ lightness scale ແລະ swatch ທີ່ຕັ້ງໄວ້ລ່ວງໜ້າ.

ເຮັດວຽກໃນບຣາວເຊີບໍ່ຕ້ອງລົງທະບຽນ, ບໍ່ມີໜ້າຕ່າງປັອບອັບບໍ່ຈໍາເປັນຕ້ອງເຂົ້າສູ່ລະບົບຟຣີຕະຫຼອດໄປ

ເຮັດວຽກແບບອອບໄລນ໌ໄດ້ຫຼັງໂຫຼດແລ້ວ

ແປງສີລະຫວ່າງ HEX, RGB, HSL, HSV ແລະ CMYK — ມີ live preview ແລະ one-tap copy. ທຸກຢ່າງດໍາເນີນການໃນ browser ຂອງທ່ານ.

ໃສ່ສີ

ຮັບ: 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%)

ຄ່າ RGB20, 184, 166

ຄວາມຕົກລົງ WCAG

ຢູ່ເທິງພື້ນຖານສີຂາວ

2,49:1

ລົ້ມ

ຢູ່ເທິງພື້ນຖານສີດຳ

8,44:1

AAA

🖨️ ສໍາລັບການພິມ: ມູນຄ່າ CMYK ເຫຼົ່ານີ້ (89%, 0%, 10%, 28%) ແມ່ນ sRGB→CMYK ມາດຕະຖານໂດຍປະມານສໍາລັບຈຸດອ້າງອີງ. ສໍາລັບສີພິມທີ່ຖືກຕ້ອງ, ໃຊ້ໂປຣໄຟລ ICC ຂອງເຄື່ອງພິມຂອງທ່ານຫຼືການພິມທີ່ພິມອອກມາ — CMYK ຂໍ້ມູນຕາມທີ່ເຫັນໄດ້ໄດ້ບໍ່ສາມາດກົງກັນກັບທຸກໆເມັດ/ເອກະສານ.

ມາດຕາຄວາມສ່ວາງ

ຄລິກ swatch ໃດໆ ເພື່ອປ່ຽນໄປໂທນນັ້ນ

ການນຳໃຊ້ທົ່ວໄປ

ປ່ຽນ ສີ ສໍາລັບ Web Designໄດ້ HEX, RGB, ແລະ HSL ລາຄາ ສໍາລັບ ໃດ ສີ — ພ້ອມ ຕັດ ລົງ CSS ຫຼື Tailwind.
ປ່ຽນ ສີ ສໍາລັບ Printing (CMYK)ປ່ຽນ ຫນ້າຈໍ ສີ (HEX/RGB) ເປັນ CMYK ລາຄາ ສໍາລັບ ນໍາໃຊ້ ໃນ printing design ແລະ ວ່າງ.
ສາກົນ ສີ ໂຟລເດັກ ສໍາລັບ Design ລະປ່ຽນ ທີ່ຢູ່ ສີ ສາກົນ ຟາມາຕ ແລະ ສ້າງ ທໍາ lightness ວົ່າວາາ ສໍາລັບ ທັງຫມົດ design ລະ.
ກວດ Color Contrast ສໍາລັບ Accessibilityແປງສີ ເພື່ອ RGB values ສໍາລັບການນໍາໃຊ້ໃນ contrast ratio tools - WCAG compliance ສໍາລັບ accessible design
ແປງສີ ສໍາລັບ Figmaໄດ້ຮັບ exact HEX ແລະ RGB values ເພື່ອ paste ເຂົ້າໃນ Figma color pickers ແລະ design token systems

ມັນເຮັດວຽກແນວໃດ

ໂຕລະຄະການແປງທັງໝົດແມ່ນ JavaScript ທີ່ຂຽນເອງເຮັດວຽກທັງໝົດຢູ່ໃນບຣາວເຊີຂອງທ່ານ — ບໍ່ມີໄລບຣາຣີ, ບໍ່ມີການເອີ້ນເຊີບເວີ. ເຄື່ອງມືແຍກຂໍ້ມູນເຂົ້າຂອງທ່ານ, ນຳມັນຜ່ານຫ່ວງໂສ້ຟັງຊັນເລກຄະນິດລ້ວນ, ແລະ ຜະລິດຮູບແບບຜົນອອກ 11 ອັນພ້ອມກັນລວມທັງພື້ນທີ່ CSS Color 4 ສະໄໝໃໝ່ oklch() ແລະ lab().

1
ການແຍກຂໍ້ມູນເຂົ້າແບບຍືດຫຍຸ່ນ
ຕົວແຍກກຳນົດເອງຮັບ hex (3, 4, 6, ຫຼື 8 ຫຼັກ), rgb()/rgba(), hsl()/hsla() ໃນທັງໄວຍາກອນຈຸດຈຸລະພາກເກົ່າ ແລະ ໄວຍາກອນຊ່ອງຫວ່າງສະໄໝໃໝ່, ແລະ ຊຸດຕົວເລກເປົ່າ. ຄ່າ alpha ເປັນທົດສະນິຍົມ ຫຼືເປີເຊັນຖືກປົກກະຕິເປັນຂອບເຂດ 0–1 ກ່ອນການແປງເລີ່ມ.
2
RGB ເປັນຈຸດເຊື່ອມຕໍ່ການແປງ
ທຸກຮູບແບບທີ່ຮັບແລ້ວຖືກແກ້ໄຂເປັນ RGB triplet ມາດຕະຖານກ່ອນ. ຈາກຕົວແທນດຽວນັ້ນ ເຄື່ອງມືແຍກອອກ: HSL ແລະ HSV ໃຊ້ສູດ min/max/chroma ມາດຕະຖານ; CMYK ໄດ້ຈາກການຊອກຫາຊ່ອງ key; ແລະ ການ linearize sRGB (ເສັ້ນໂຄ້ງ gamma ແບບເປັນສ່ວນທີ່ກຳນົດໃນ IEC 61966-2-1) ຖືກນຳໃຊ້ກ່ອນການຄິດໄລ່ພື້ນທີ່ perceptual.
3
ພື້ນທີ່ສີ perceptual ຄິດໄລ່ຈາກສູນ
oklch() ຖືກຄິດໄລ່ໂດຍໃຊ້ matrices 3×3 ອ້າງອີງຂອງ Björn Ottosson (ພື້ນທີ່ LMS cube-root). lab() ແລະ lch() ໃຊ້ Bradford chromatic adaptation ເພື່ອແປງຈາກຈຸດຂາວ D65 ເປັນ D50, ເຊິ່ງກົງກັບວິທີ CSS Color 4 ກຳນົດ lab(). ນີ້ແມ່ນສູດດຽວກັນທີ່ໃຊ້ໃນເອັນຈິນສະແດງຜົນຂອງບຣາວເຊີ — ຈັດຕັ້ງປະຕິບັດຢູ່ນີ້ໂດຍບໍ່ມີການເພິ່ງພາພາຍນອກໃດໆ.
4
ຄວາມຄົມຊັດ WCAG ແລະ ຂະໜາດຄວາມສະຫວ່າງ
Relative luminance ຖືກຄິດໄລ່ຕາມສູດ WCAG 2.1 (R, G, B ທີ່ linearize ໃຫ້ນ້ຳໜັກ 0.2126/0.7152/0.0722) ແລະ ອັດຕາສ່ວນຄວາມຄົມຊັດທຽບກັບຂາວ ແລະ ດຳຖືກໃຫ້ຄະແນນ AA-large, AA, AAA, ຫຼື Fail. ແຖບຄວາມສະຫວ່າງເກົ້າຂັ້ນຖືກສ້າງໂດຍການກ້າວຊ່ອງຄວາມສະຫວ່າງ HSL ຈາກ 10% ຫາ 90%, ໃຫ້ທ່ານກົດ swatch ໃດກໍໄດ້ເພື່ອແປງໂຕນນັ້ນ.