ໃຫ້ລະຫັດສີແບບໃດແດ່?

HEX, RGB, HSL, HSV, CMYK ແລະ OKLCH ສຳລັບສີດຽວກັນ ພ້ອມຄັດລອກ.

ເລືອກສີຈາກໜ້າຈໍຂອງຂ້ອຍໄດ້ບໍ?

ໄດ້, ດ້ວຍ ເລືອກຈາກໜ້າຈໍ (Pick from screen) ໃນບຣາວເຊີທີ່ໃຊ້ Chromium ເຊັ່ນ Chrome ແລະ Edge. ປຸ່ມຖືກເຊື່ອງເມື່ອບຣາວເຊີຂອງທ່ານບໍ່ຮອງຮັບ.

ກວດບໍວ່າຂໍ້ຄວາມອ່ານງ່າຍເທິງສີນັ້ນ?

ກວດ. ມັນສະແດງອັດຕາສ່ວນຄວາມຕັດກັນຕາມ WCAG ກັບສີຂາວ ແລະ ສີດຳ ແລະ ໝາຍເປັນ AA large, AA, AAA ຫຼື Fails. ມັນຍັງແນະນຳສີຄູ່ເສີມ, triadic, analogous ແລະ monochromatic.

ຟຣີແທ້ບໍ?

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

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

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

🎨

ຕົວເລືອກສີ ແລະເຄື່ອງສ້າງ Palette ຟຣີ

ເລືອກສີ, ປ່ຽນລະຫວ່າງ HEX/RGB/HSL, ແລະສ້າງສີທີ່ກົມກຽວກັນ.

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

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

ຕົວເລືອກສີ

HEX

HSV

h217°

s76%

v96%

ສະແດງຕໍ່ໄປ

RGB

HSL

ຮູບແບບເພີ່ມເຕີມ

Alpha100%

HEX8#3b82f6ff

RGBrgb(59 130 246)

HWBhwb(217 23% 4%)

CMYKcmyk(76%, 47%, 0%, 4%)

OKLCHoklch(62.3% 0.188 259.8)

SwiftUIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1)

Android0xFF3B82F6

FlutterColor(0xFF3B82F6)

WCAG ກົງກັນຂ້າມ

ສີທີ່ມີຊື່ໃກ້ທີ່ສຸດ: dodgerblue · ຂໍ້ຄວາມສີດຳອ່ານງ່າຍກວ່າຢູ່ບ່ອນນີ້ (5,71:1)

ຂໍ້ຄວາມໃນສີຂາວ3,68:1AA ຂະຫນາດໃຫຍ່

ຂໍ້ຄວາມໃນສີດໍາ5,71:1AA

ຂໍ້ຄວາມເທິງ #ffffff3,68:1AA ຂະຫນາດໃຫຍ່

ປຽບທຽບກັບສີອື່ນ

ເຍື້ອງສີ & ໂທນສີ (50–950)

ຊື່

palette ສີ

ສະຫລະກັນ

#3b82f6

#f6af3c

ສາມເທົ່າ

#3b82f6

#f63c83

#83f63c

ເຫມາະສົມ

#3ce0f6

#3b82f6

#523cf6

ໜ່ວຍສີ

#073c92

#0a5adb

#3b82f6

#85b2f9

#cee0fd

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

ເລືອກສີສໍາລັບອອກແບບເວບເລືອກ ແລະສ້າງສີສໍາລັບເວບໄຊຂອງທ່ານ — ປະເມີນໄດ້ HEX, RGB, ແລະຄ່ານອກເອົາ ແລະມີລະບົມສີຢາວຫຼາກຫຼາຍ.
ເລືອກສີສໍາລັບການສະມາຊະນາສ້າງລະບົມສີຂອງວຽກທັນສະໄຫມຂອງທ່ານ — ເລືອກສີຕົ້ນທຸນ, ຮອງ, ແລະເສໍາລຽວທີ່ເຮັດວຽກຮ່ວມກັນ.
ເລືອກສີສໍາລັບສື່ລາວສ້າງລະບົມສີທີ່ຫ້າວຫາກສໍາລັບບົດເສີມສື່ລາວ, ລາວະບາບຖັນຫລັກ, ແລະອອກແບບບັນຊີ.
ເລືອກສີສໍາລັບອອກແບບການພິມເລືອກສີສໍາລັບວັກສະດຸພາບບົວກວະ — ແຂວ, ໂຣກເມື່ອສົກ, ກໍາປາຈົງບ້ານ — ກັບການທົດລອງສີທີ່ຖືກຕ້ອງ.
ເລືອກສີສໍາລັບການນໍາສະເໜີອອກແບບໂຄງການສີສໍາລັບສະໂລ້ນ — ເລືອກສີຂໍ້ຂວາມທີ່ອ່ານໄດ້, ລະບົມກາຣາ, ແລະສີໄສລແກ່ວທີ່ດຸໍາຕໍ່າ.

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

ທຸກຢ່າງເຮັດວຽກໂດຍກົງໃນບຣາວເຊີຂອງທ່ານໂດຍໃຊ້ເລກຄະນິດການແປງທີ່ຂຽນເອງ — ບໍ່ມີໄລບຣາຣີສີ, ບໍ່ມີການໄປກັບເຊີບເວີ. ທ່ານເລືອກສີຜ່ານຂໍ້ມູນເຂົ້າສີພື້ນເມືອງຂອງບຣາວເຊີ ຫຼື EyeDropper API, ແລະ ເຄື່ອງມືແປງມັນທັນທີເປັນຫົກຮູບແບບໃນຂະນະຄິດໄລ່ອັດຕາສ່ວນຄວາມຄົມຊັດ WCAG ແລະ ສ້າງຊຸດສີກົມກຽວ.

1
ຂໍ້ມູນເຂົ້າສີຜ່ານ API ພື້ນເມືອງ
ທ່ານເລືອກສີຜ່ານ widget <input type="color"> ໃນຕົວຂອງບຣາວເຊີ, ຫຼື — ໃນບຣາວເຊີອີງໃສ່ Chromium — EyeDropper API ໃຫ້ທ່ານສຸ່ມຕົວຢ່າງພິກເຊວໃດກໍໄດ້ເທິງໜ້າຈໍຂອງທ່ານ. ທັງສອງເສັ້ນທາງສົ່ງຄືນສະຕຣິງ hex ທີ່ກາຍເປັນແຫຼ່ງຄວາມຈິງດຽວ.
2
ການແປງຮູບແບບທີ່ຂຽນເອງ
ເຄື່ອງມືແປງຄ່າ hex ເປັນ RGB, HSL, HSV, CMYK, ແລະ OKLCH ໂດຍໃຊ້ຟັງຊັນເລກຄະນິດຂອງມັນເອງ (ບໍ່ມີໄລບຣາຣີພາຍນອກ). ການແປງ OKLCH linearize ຊ່ອງ sRGB, ນຳໃຊ້ matrix cube-root OKLab, ແລ້ວໄດ້ chroma ແລະ ມູມໂຕນ — ກົງກັບຜົນອອກ CSS Color Level 4 ສະໄໝໃໝ່.
3
ການຄິດໄລ່ອັດຕາສ່ວນຄວາມຄົມຊັດ WCAG
Relative luminance ຖືກຄິດໄລ່ຈາກຊ່ອງ RGB ທີ່ linearize ໂດຍໃຊ້ສູດ WCAG 2.x. ເຄື່ອງມືຈາກນັ້ນຄິດໄລ່ອັດຕາສ່ວນຄວາມຄົມຊັດທຽບກັບຂາວລ້ວນ ແລະ ດຳລ້ວນ ແລະ ໃຫ້ປ້າຍ AA-large, AA, AAA, ຫຼື Fail ຕາມຂອບເຂດ WCAG (3:1, 4.5:1, 7:1).
4
ການສ້າງຊຸດສີກົມກຽວ ແລະ ບັນທຶກທ້ອງຖິ່ນ
swatch ຄູ່ກົງກັນຂ້າມ, ໄຕຣຍາງ, ໃກ້ຄຽງ, ແລະ ໂຕນດຽວ ໄດ້ຈາກການໝູນ ຫຼືກ້າວຄ່າໂຕນ ແລະ ຄວາມສະຫວ່າງ HSL ທາງເລກຄະນິດ. ຊຸດສີທີ່ບັນທຶກຖືກຂຽນໄປ localStorage ໃນບຣາວເຊີຂອງທ່ານ — ບໍ່ມີຫຍັງອອກຈາກອຸປະກອນຂອງທ່ານ.