{"id":887,"date":"2026-04-08T13:45:55","date_gmt":"2026-04-08T05:45:55","guid":{"rendered":"http:\/\/47.100.88.125\/?page_id=887"},"modified":"2026-04-09T15:20:17","modified_gmt":"2026-04-09T07:20:17","slug":"%e8%b0%83%e8%89%b2%e7%9b%98","status":"publish","type":"page","link":"https:\/\/www.05621997.xyz\/index.php\/tools\/%e8%b0%83%e8%89%b2%e7%9b%98\/","title":{"rendered":"\u8c03\u8272\u76d8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"887\" class=\"elementor elementor-887\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-89ae1b0 e-con-full e-flex e-con e-parent\" data-id=\"89ae1b0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6bc91da elementor-widget elementor-widget-heading\" data-id=\"6bc91da\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u8c03\u8272\u76d8<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a18da0e e-con-full e-flex e-con e-parent\" data-id=\"a18da0e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e0c2fdd elementor-widget elementor-widget-html\" data-id=\"e0c2fdd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<div class=\"xwb_color_picker_container\">\r\n  <!-- \u5de6\u4fa7\uff1aPS\u98ce\u683c\u989c\u8272\u62fe\u53d6\u76d8 -->\r\n  <div class=\"xwb_color_picker_canvas_box\">\r\n    <canvas id=\"xwb_color_picker_canvas\"><\/canvas>\r\n  <\/div>\r\n\r\n\r\n  <div class=\"xwb_color_picker_panel\">\r\n   \r\n    <div class=\"xwb_color_picker_preview\" id=\"xwb_color_picker_preview\"><\/div>\r\n\r\n    \r\n    <div class=\"xwb_color_picker_item\">\r\n      <label class=\"xwb_color_picker_label\">\u5341\u516d\u8fdb\u5236\u8272\u503c<\/label>\r\n      <div class=\"xwb_color_picker_input_group\">\r\n        <input type=\"text\" id=\"xwb_color_picker_hex\" readonly>\r\n        <button class=\"xwb_color_picker_copy_btn\" data-target=\"xwb_color_picker_hex\">\u590d\u5236<\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  \r\n    <div class=\"xwb_color_picker_item\">\r\n      <label class=\"xwb_color_picker_label\">RGB\u8272\u503c<\/label>\r\n      <div class=\"xwb_color_picker_input_group\">\r\n        <input type=\"text\" id=\"xwb_color_picker_rgb\" readonly>\r\n        <button class=\"xwb_color_picker_copy_btn\" data-target=\"xwb_color_picker_rgb\">\u590d\u5236<\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n \r\n    <div class=\"xwb_color_picker_item\">\r\n      <label class=\"xwb_color_picker_label\">\u8f93\u5165\u8272\u503c\u81ea\u52a8\u5b9a\u4f4d<\/label>\r\n      <input type=\"text\" id=\"xwb_color_picker_input\" placeholder=\"\u652f\u6301\uff1a#fff \/ #ffffff \/ rgb(255,255,255)\">\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\r\n.xwb_color_picker_container * {\r\n  all: unset;\r\n  box-sizing: border-box;\r\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n}\r\n\r\n\r\n.xwb_color_picker_container {\r\n  width: 1100px;\r\n  max-width: 100%;\r\n  margin: 0 auto;\r\n  padding: 20px;\r\n  display: flex;\r\n  gap: 30px;\r\n  align-items: flex-start;\r\n}\r\n\r\n\r\n.xwb_color_picker_canvas_box {\r\n  flex: 1;\r\n  background: #ffffff;\r\n  border-radius: 12px;\r\n  padding: 15px;\r\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n\r\n#xwb_color_picker_canvas {\r\n  width: 100%;\r\n  height: 450px;\r\n  border-radius: 8px;\r\n  cursor: crosshair;\r\n  display: block;\r\n}\r\n\r\n\r\n.xwb_color_picker_panel {\r\n  width: 380px;\r\n  background: #f8f9fa;\r\n  border-radius: 12px;\r\n  padding: 25px;\r\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 20px;\r\n}\r\n\r\n\r\n.xwb_color_picker_preview {\r\n  width: 100%;\r\n  height: 120px;\r\n  border-radius: 8px;\r\n  border: 2px solid #e9ecef;\r\n  background: #ffffff;\r\n}\r\n\r\n\r\n.xwb_color_picker_item {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n}\r\n\r\n.xwb_color_picker_label {\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  color: #333333;\r\n}\r\n\r\n\r\n.xwb_color_picker_input_group {\r\n  display: flex;\r\n  gap: 10px;\r\n  align-items: center;\r\n}\r\n\r\n\r\n.xwb_color_picker_container input {\r\n  flex: 1;\r\n  height: 42px;\r\n  padding: 0 15px;\r\n  border: 1px solid #dee2e6;\r\n  border-radius: 6px;\r\n  background: #ffffff;\r\n  font-size: 15px;\r\n  color: #333333;\r\n}\r\n\r\n.xwb_color_picker_container input:focus {\r\n  border-color: #6c757d;\r\n  outline: none;\r\n}\r\n\r\n\r\n.xwb_color_picker_copy_btn {\r\n  height: 42px;\r\n  padding: 0 18px;\r\n  background: #0d6efd;\r\n  color: #ffffff;\r\n  border-radius: 6px;\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  transition: background 0.2s;\r\n  text-align: center;\r\n}\r\n\r\n.xwb_color_picker_copy_btn:hover {\r\n  background: #0b5ed7;\r\n}\r\n\r\n\r\n#xwb_color_picker_input {\r\n  cursor: text;\r\n}\r\n\r\n\r\n@media (max-width: 1120px) {\r\n  .xwb_color_picker_container {\r\n    flex-direction: column;\r\n    align-items: center;\r\n  }\r\n  .xwb_color_picker_panel {\r\n    width: 100%;\r\n  }\r\n  #xwb_color_picker_canvas {\r\n    height: 400px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\r\nconst canvas = document.getElementById('xwb_color_picker_canvas');\r\nconst ctx = canvas.getContext('2d');\r\nconst preview = document.getElementById('xwb_color_picker_preview');\r\nconst hexInput = document.getElementById('xwb_color_picker_hex');\r\nconst rgbInput = document.getElementById('xwb_color_picker_rgb');\r\nconst input = document.getElementById('xwb_color_picker_input');\r\nconst copyBtns = document.querySelectorAll('.xwb_color_picker_copy_btn');\r\n\r\n\r\ncanvas.width = 600;\r\ncanvas.height = 450;\r\n\r\n\r\nfunction drawColorPalette() {\r\n  const width = canvas.width;\r\n  const height = canvas.height;\r\n  \r\n \r\n  const gradientHue = ctx.createLinearGradient(0, 0, width, 0);\r\n  for (let i = 0; i <= 1; i += 1\/6) {\r\n    gradientHue.addColorStop(i, `hsl(${i * 360}, 100%, 50%)`);\r\n  }\r\n  ctx.fillStyle = gradientHue;\r\n  ctx.fillRect(0, 0, width, height);\r\n\r\n\r\n  const gradientWhite = ctx.createLinearGradient(0, 0, 0, height);\r\n  gradientWhite.addColorStop(0, 'rgba(255,255,255,1)');\r\n  gradientWhite.addColorStop(1, 'rgba(255,255,255,0)');\r\n  ctx.fillStyle = gradientWhite;\r\n  ctx.fillRect(0, 0, width, height);\r\n\r\n  const gradientBlack = ctx.createLinearGradient(0, 0, 0, height);\r\n  gradientBlack.addColorStop(0, 'rgba(0,0,0,0)');\r\n  gradientBlack.addColorStop(1, 'rgba(0,0,0,1)');\r\n  ctx.fillStyle = gradientBlack;\r\n  ctx.fillRect(0, 0, width, height);\r\n}\r\n\r\n\r\n\r\nfunction getColorFromCanvas(x, y) {\r\n  const pixel = ctx.getImageData(x, y, 1, 1).data;\r\n  return { r: pixel[0], g: pixel[1], b: pixel[2] };\r\n}\r\n\r\n\r\nfunction rgbToHex(r, g, b) {\r\n  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();\r\n}\r\n\r\n\r\nfunction parseColor(value) {\r\n  const temp = document.createElement('div');\r\n  temp.style.color = value;\r\n  document.body.appendChild(temp);\r\n  const rgb = getComputedStyle(temp).color;\r\n  document.body.removeChild(temp);\r\n  \r\n  const match = rgb.match(\/\\d+\/g);\r\n  if (match) return { r: parseInt(match[0]), g: parseInt(match[1]), b: parseInt(match[2]) };\r\n  return null;\r\n}\r\n\r\n\r\nfunction updateColor(r, g, b) {\r\n  const hex = rgbToHex(r, g, b);\r\n  const rgbStr = `rgb(${r}, ${g}, ${b})`;\r\n  \r\n  preview.style.background = hex;\r\n  hexInput.value = hex;\r\n  rgbInput.value = rgbStr;\r\n}\r\n\r\n\r\nfunction copyText(id) {\r\n  const copyText = document.getElementById(id).value;\r\n  const textarea = document.createElement('textarea');\r\n  textarea.value = copyText;\r\n  document.body.appendChild(textarea);\r\n  textarea.select();\r\n  document.execCommand('copy');\r\n  document.body.removeChild(textarea);\r\n}\r\n\r\n\r\n\r\ncanvas.addEventListener('click', (e) => {\r\n  const rect = canvas.getBoundingClientRect();\r\n  const x = e.clientX - rect.left;\r\n  const y = e.clientY - rect.top;\r\n  const color = getColorFromCanvas(x, y);\r\n  updateColor(color.r, color.g, color.b);\r\n});\r\n\r\n\r\ninput.addEventListener('input', (e) => {\r\n  const color = parseColor(e.target.value);\r\n  if (color) updateColor(color.r, color.g, color.b);\r\n});\r\n\r\n\r\ncopyBtns.forEach(btn => {\r\n  btn.addEventListener('click', () => {\r\n    copyText(btn.dataset.target);\r\n  });\r\n});\r\n\r\n\r\ndrawColorPalette();\r\nupdateColor(255, 255, 255);\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u8c03\u8272\u76d8 \u5341\u516d\u8fdb\u5236\u8272\u503c \u590d\u5236 RGB\u8272\u503c \u590d\u5236 \u8f93\u5165\u8272\u503c\u81ea\u52a8\u5b9a\u4f4d<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":19,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-887","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/887","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=887"}],"version-history":[{"count":16,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/887\/revisions"}],"predecessor-version":[{"id":1108,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/887\/revisions\/1108"}],"up":[{"embeddable":true,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/19"}],"wp:attachment":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}