ຂ້ອຍຈະສ້າງ palette ສີຈາກສີແບຣນດຽວໄດ້ແນວໃດ?

ປ້ອນລະຫັດ hex, ຊື່ສີເຊັ່ນ teal, ຫຼື ຄ່າ rgb() ຫຼື hsl() ໃນຊ່ອງ ສີຫຼັກ ແລ້ວກົດ ເຂົ້າ. ຈາກນັ້ນເລືອກປະເພດເຊັ່ນ ຊຸດສີແບຣນ, ສົມຫກຽມກັນ, ສາມຂ້າງ ຫຼື ສີດຽວເທົ່າ, ແລ້ວກົດໃສ່ແຖບສີເພື່ອສຳເນົາມັນ.

ຕົວສ້າງ palette ຮອງຮັບຮູບແບບໄຟລ໌ສົ່ງອອກໃດແດ່?

ທ່ານສາມາດສຳເນົາສີເປັນ hex, rgb, hsl ຫຼື oklch, ແລະ ສົ່ງອອກເປັນໄຟລ໌ CSS, SCSS, JSON, Tailwind 50-950 scale, PNG, SVG, GIMP/Krita GPL, Adobe ASE ຫຼື Photoshop ACO ໄດ້. ຕົວເລືອກທີ່ທ່ານເຫັນຈະຂຶ້ນກັບການຄວບຄຸມການ Export.

ຂ້ອຍຈະກວດສອບໄດ້ແນວໃດວ່າສີ palette ຂອງຂ້ອຍອ່ານງ່າຍເທິງພື້ນສີຂາວ ຫຼື ສີດຳ?

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

ຂ້ອຍຈະຮັກສາບາງສີໄວ້ ແລະ ສຸ່ມສີທີ່ເຫຼືອໃໝ່ໄດ້ແນວໃດ?

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

ຂ້ອຍສາມາດແບ່ງປັນ palette ຫຼື ເລືອກສີຈາກໜ້າຈໍຂອງຂ້ອຍໄດ້ບໍ່?

“ແບ່ງປັນຜົນລັບ” ສ້າງລິ້ງທີ່ເກັບສີພື້ນຖານ, ປະເພດ ແລະ ການແກ້ໄຂທັງໝົດ, ຜູ້ທີ່ເປີດຈະເຫັນຊຸດສີດຽວກັນ. ໃນໂທລະສັບຈະເປີດແຜ່ນແບ່ງປັນ, ໃນຄອມພິວເຕີຈະສຳເນົາລິ້ງ. “ເລືອກຈາກໜ້າຈໍ” ໃຊ້ EyeDropper ຂອງບຣາວເຊີ ເຊິ່ງມີສະເພາະບຣາວເຊີທີ່ຮອງຮັບ, ສ່ວນໃຫຍ່ແມ່ນກຸ່ມ Chromium.

ຟຣີແທ້ບໍ?

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

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

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

🎨

ຕົວສ້າງ Color Palette ຟຣີ

ສ້າງ palette ສີ complementary, analogous, triadic ແລະ monochromatic ຈາກສີຫລັກໃດໆ. ຄັດລອກ hex code ດ້ວຍ click ດຽວ.

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

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

ສີຫຼັກ

ພິມລະຫັດ hex, ຊື່ສີເຊັ່ນ teal ຫຼື tomato, ຫຼື rgb(20, 184, 166) / hsl(174, 80%, 40%) ແລ້ວກົດ Enter.

ຊຸດສີແບຣນ · 7 ສີ

ຮູບແບບການສຳເນົາ

ສົ່ງອອກ:ປ້າຍ Hex ເທິງ PNG/SVG

ສີຫຼັກ

ເທິງພື້ນຂາວ 2,5ບໍ່ຜ່ານ

ເທິງພື້ນດຳ 8,4AAA

ສີເນັ້ນ

ເທິງພື້ນຂາວ 2,9ບໍ່ຜ່ານ

ເທິງພື້ນດຳ 7,2AAA

ສີອ່ອນ

ເທິງພື້ນຂາວ 1,1ບໍ່ຜ່ານ

ເທິງພື້ນດຳ 19,4AAA

ສີເຂັ້ມ

ເທິງພື້ນຂາວ 9,0AAA

ເທິງພື້ນດຳ 2,3ບໍ່ຜ່ານ

ກາງ ອ່ອນ

ເທິງພື້ນຂາວ 1,1ບໍ່ຜ່ານ

ເທິງພື້ນດຳ 19,3AAA

ກາງ ປານກາງ

ເທິງພື້ນຂາວ 4,1AA ໂຕໃຫຍ່

ເທິງພື້ນດຳ 5,1AA

ກາງ ເຂັ້ມ

ເທິງພື້ນຂາວ 16,1AAA

ເທິງພື້ນດຳ 1,3ບໍ່ຜ່ານ

ກວດສີຂໍ້ຄວາມ ແລະ ພື້ນຫຼັງ

ສີຂໍ້ຄວາມພື້ນຫຼັງ

ຕົວຢ່າງຫົວຂໍ້ໂຕໃຫຍ່

ຕົວຢ່າງຂໍ້ຄວາມເນື້ອຫາສຳລັບຄູ່ສີນີ້

8,44:1ຂໍ້ຄວາມທົ່ວໄປ AAAຂໍ້ຄວາມໂຕໃຫຍ່ AAA

ລອງເບິ່ງ

ຢາກໄດ້ສີຈາກຮູບ? ໃຊ້ເຄື່ອງມືດຶງສີຈາກຮູບ

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

ສ້າງ Color Palettes ສໍາລັບ Web Designສ້າງ harmonious color schemes ສໍາລັບ websites, web apps ແລະ UI components.
ສ້າງ Brand Color Palettesພັດທະນາລະບົບສີແບຣນດ໌ທີ່ສົມບູນຈາກສີແບຣນດ໌ດຽວ — ຫຼັກ, ຮອງ, ເນັ້ນ ແລະ ກາງ.
ສ້າງ Color Palettes ສໍາລັບ Art ແລະ Illustrationສ້າງ harmonious color combinations ສໍາລັບ digital art, illustration ແລະ creative projects.
ສ້າງ Color Styles ສໍາລັບ Figmaສ້າງ color palettes ເພື່ອໃຊ້ເປັນ Figma Color Styles ແລະ design token foundations.
ສ້າງ Dark Mode Color Palettesສ້າງ light ແລະ dark variants ຂອງ color palette ຂອງທ່ານ ສໍາລັບ ສ້າງ dark mode support.

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

ເຄື່ອງມືສ້າງດ້ວຍໄລບຣາຣີພາຍນອກສູນ — ເລກຄະນິດສີທັງໝົດເຮັດວຽກໃນ JavaScript ທີ່ຂຽນເອງໂດຍກົງໃນບຣາວເຊີຂອງທ່ານ. ມັນແປງສີທີ່ທ່ານເລືອກລະຫວ່າງ hex ແລະ HSL, ແລ້ວນຳໃຊ້ກົດຄວາມກົມກຽວທິດສະດີສີຄລາສສິກ (ຄູ່ກົງກັນຂ້າມ, ໄຕຣຍາງ, ໃກ້ຄຽງ, ແລະອື່ນໆ) ຜ່ານເລກຄະນິດເທິງລໍ້ໂຕນສີເພື່ອຜະລິດແຕ່ລະຊຸດສີ.

1
ການແປງ Hex ເປັນ HSL
ເມື່ອທ່ານເລືອກສີ, ເຄື່ອງມືແຍກສະຕຣິງ hex ເປັນອົງປະກອບ RGB ແລະ ແປງພວກມັນເປັນ HSL (ໂຕນ, ຄວາມອີ່ມຕົວ, ຄວາມສະຫວ່າງ). ໂຕນແມ່ນຕຳແໜ່ງ 0–360 ອົງສາເທິງລໍ້ໂຕນສີ; ເລກຄະນິດຊຸດສີທັງໝົດເກີດຂຶ້ນໃນພື້ນທີ່ນີ້.
2
ເລກຄະນິດໂຕນສຳລັບຄວາມກົມກຽວ
ແຕ່ລະປະເພດຊຸດສີແມ່ນສູດການໝູນຄົງທີ່ນຳໃຊ້ກັບໂຕນພື້ນຖານ. ຄູ່ກົງກັນຂ້າມເພີ່ມ 180°, ໄຕຣຍາງເພີ່ມ 120° ແລະ 240°, ສີ່ຫຼ່ຽມກ້າວ 90°, ຄູ່ກົງກັນຂ້າມແຍກໃຊ້ 150° ແລະ 210°. ໂຕນດຽວ ແລະ ໂຕນອ່ອນຮັກສາໂຕນ ແລະ ຄວາມອີ່ມຕົວຄົງທີ່ໃນຂະນະກ້າວຄວາມສະຫວ່າງຂຶ້ນ ແລະ ລົງ.
3
ຜົນອອກ HSL ເປັນ hex
HSL triplet ທີ່ຄິດໄລ່ແຕ່ລະອັນຖືກແປງກັບຄືນເປັນສີ hex ໂດຍໃຊ້ສູດ chroma ມາດຕະຖານ. ຜົນລັບສະແດງເປັນແຖບສີພ້ອມປ້າຍທີ່ຄວາມຄົມຊັດອັດຕະໂນມັດ (ຂໍ້ຄວາມເຂັ້ມເທິງ swatch ອ່ອນ, ຂໍ້ຄວາມອ່ອນເທິງ swatch ເຂັ້ມ) ກຳນົດໂດຍຂອບເຂດ luminance ງ່າຍໆ.
4
ສົ່ງອອກໃນຮູບແບບທີ່ທ່ານຕ້ອງການ
ຊຸດສີສາມາດສຳເນົາເປັນສະຕຣິງ hex ຫຼືສົ່ງອອກເປັນໄຟລ໌ຕົວແປ CSS (:root { --color-1: … }), ຕົວແປ SCSS, ຕົວຢ່າງການຕັ້ງຄ່າ Tailwind, ອົງປະກອບ JSON, ຫຼືແຖບສີ PNG. ການສົ່ງອອກ PNG ໃຊ້ Canvas API ຂອງບຣາວເຊີ (toDataURL) ເພື່ອແຕ້ມແຕ່ລະ swatch ພ້ອມປ້າຍ hex ຂອງມັນ — ທຸກຢ່າງຖືກສ້າງໃນທ້ອງຖິ່ນເມື່ອກົດ.