1<?php class=class="string">"keyword">header(class="string">'Content-Type: text/html; charset=utf-class="number">8'); ?>
2<!DOCTYPE html><class="tag">html lang="zh-CN"><class="tag">head><class="tag">meta charset="UTF-class="number">8"><class="tag">meta name="viewport" content="width=device-width,initial-scale=class="number">1.0">
3<class="tag">title>颜色调色板 - η空间</class="tag">title>
4<class="tag">meta name="description" content="在线颜色选择器，取色、调色、复制色号。支持HEX/RGB/HSL。">
5<class="tag">link rel="stylesheet" href="/tools/share.css"><class="tag">link rel="stylesheet" href="/assets/pet-cat.css">
6<class="tag">style>
7*{margin:class="number">0;padding:class="number">0;box-sizing:border-box}
8body{font-family:class="string">'Outfit',-apple-system,sans-serif;background:class=class="string">"keyword">class=class="string">"comment">#0C0C0C;color:#F7F5F0;min-height:100vh}
9.container{max-width:500px;margin:class="number">0 auto;padding:40px 16px;text-align:center}
10h1{font-size:24px;margin-bottom:8px}
11h1 .a{color:class=class="string">"keyword">class=class="string">"comment">#FF6B35}
12.desc{color:class=class="string">"keyword">class=class="string">"comment">#class="number">888;font-size:13px;margin-bottom:24px}
13.color-preview{width:class="number">100%;height:160px;border-radius:16px;margin-bottom:20px;transition:background .2s;border:1px solid class=class="string">"keyword">class=class="string">"comment">#class="number">222;display:flex;align-items:center;justify-content:center}
14.color-preview span{font-family:class="string">'JetBrains Mono',monospace;font-size:20px;font-weight:class="number">600;text-shadow:class="number">0 1px 3px rgba(class="number">0,class="number">0,class="number">0,.class="number">5)}
15.picker-row{display:flex;gap:16px;align-items:center;margin-bottom:20px}
16.picker-row input[type=color]{width:60px;height:60px;border:none;border-radius:12px;cursor:pointer;background:none;padding:class="number">0}
17.picker-row input[type=color]::-webkit-color-swatch-wrapper{padding:class="number">0}
18.picker-row input[type=color]::-webkit-color-swatch{border:1px solid class=class="string">"keyword">class=class="string">"comment">#class="number">333;border-radius:12px}
19.sliders{flex:class="number">1}
20.slider-group{margin-bottom:10px;text-align:left}
21.slider-group label{font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">888;display:flex;justify-content:space-between}
22.slider-group input{width:class="number">100%;-webkit-appearance:none;height:4px;border-radius:2px;outline:none}
23.slider-group input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:class="number">50%;cursor:pointer;border:2px solid class=class="string">"keyword">class=class="string">"comment">#fff;box-shadow:class="number">0 1px 3px rgba(class="number">0,class="number">0,class="number">0,.class="number">3)}
24.format-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px}
25.format-card{background:class=class="string">"keyword">class=class="string">"comment">#class="number">161616;border:1px solid #class="number">222;border-radius:10px;padding:10px;cursor:pointer;transition:all .2s}
26.format-card:hover{border-color:class=class="string">"keyword">class=class="string">"comment">#FF6B35}
27.format-card .fmt-label{font-size:10px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">888;text-transform:uppercase;margin-bottom:4px}
28.format-card .fmt-value{font-size:12px;font-family:class="string">'JetBrains Mono',monospace;color:class=class="string">"keyword">class=class="string">"comment">#ccc;word-class=class="string">"keyword">break:class=class="string">"keyword">break-all}
29.palette{display:grid;grid-template-columns:repeat(class="number">10,1fr);gap:4px;margin-bottom:16px}
30.palette .swatch{height:30px;border-radius:6px;cursor:pointer;transition:all .2s;border:1px solid transparent}
31.palette .swatch:hover{transform:scale(class="number">1.15);border-color:class=class="string">"keyword">class=class="string">"comment">#fff;z-index:class="number">2}
32</class="tag">style></class="tag">head><class="tag">body>
33<class="tag">div class=class="string">"keyword">class="container">
34<class="tag">h1><class="tag">span class=class="string">"keyword">class="a">🎨</class="tag">span> 颜色调色板</class="tag">h1>
35<class="tag">p style="font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">555;margin-bottom:10px;text-align:center">🎨 选色/调色/复制色号 · 点击色卡复制 HEX/RGB/HSL</class="tag">p>
36<class="tag">p class=class="string">"keyword">class="desc">选色 · 调色 · 复制 · 一站式配色工具</class="tag">p>
37<class="tag">div class=class="string">"keyword">class="color-preview" id="preview"><class="tag">span id="hexLabel">class=class="string">"keyword">class=class="string">"comment">#FF6B35</class="tag">span></class="tag">div>
38<class="tag">div class=class="string">"keyword">class="picker-row">
39<class="tag">input type="color" id="colorPicker" value="class=class="string">"keyword">class=class="string">"comment">#ff6b35" oninput="updateFromPicker()">
40<class="tag">div class=class="string">"keyword">class="sliders">
41<class="tag">div class=class="string">"keyword">class="slider-group"><class="tag">label>H <class="tag">span id="hVal">class="number">14</class="tag">span></class="tag">label><class="tag">input type="range" id="hue" min="class="number">0" max="class="number">360" value="class="number">14" oninput="updateFromSliders()" style="background:linear-gradient(90deg,class=class="string">"keyword">class=class="string">"comment">#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)"></class="tag">div>
42<class="tag">div class=class="string">"keyword">class="slider-group"><class="tag">label>S <class="tag">span id="sVal">class="number">100</class="tag">span></class="tag">label><class="tag">input type="range" id="sat" min="class="number">0" max="class="number">100" value="class="number">100" oninput="updateFromSliders()" style="background:linear-gradient(90deg,class=class="string">"keyword">class=class="string">"comment">#class="number">808080,#ff6b35)"></class="tag">div>
43<class="tag">div class=class="string">"keyword">class="slider-group"><class="tag">label>L <class="tag">span id="lVal">class="number">60</class="tag">span></class="tag">label><class="tag">input type="range" id="lig" min="class="number">0" max="class="number">100" value="class="number">60" oninput="updateFromSliders()" style="background:linear-gradient(90deg,class=class="string">"keyword">class=class="string">"comment">#class="number">000,#ff6b35,#fff)"></class="tag">div>
44</class="tag">div>
45</class="tag">div>
46<class="tag">div class=class="string">"keyword">class="format-cards">
47<class="tag">div class=class="string">"keyword">class="format-card" onclick="copyVal(class="string">'hex')"><class="tag">div class=class="string">"keyword">class="fmt-label">HEX</class="tag">div><class="tag">div class=class="string">"keyword">class="fmt-value" id="hexVal">class=class="string">"keyword">class=class="string">"comment">#FF6B35</class="tag">div></class="tag">div>
48<class="tag">div class=class="string">"keyword">class="format-card" onclick="copyVal(class="string">'rgb')"><class="tag">div class=class="string">"keyword">class="fmt-label">RGB</class="tag">div><class="tag">div class=class="string">"keyword">class="fmt-value" id="rgbVal">rgb(class="number">255,class="number">107,class="number">53)</class="tag">div></class="tag">div>
49<class="tag">div class=class="string">"keyword">class="format-card" onclick="copyVal(class="string">'hsl')"><class="tag">div class=class="string">"keyword">class="fmt-label">HSL</class="tag">div><class="tag">div class=class="string">"keyword">class="fmt-value" id="hslVal">hsl(class="number">14,class="number">100%,class="number">60%)</class="tag">div></class="tag">div>
50</class="tag">div>
51<class="tag">div class=class="string">"keyword">class="palette" id="palette"></class="tag">div>
52</class="tag">div>
53<class="tag">script src="/tools/share.js"></class="tag">script><class="tag">script src="/assets/pet-cat.js"></class="tag">script>
54<class="tag">script>
55class=class="string">"keyword">var presets=[class="string">'class="keyword">class="comment">#FF6B35',class="string">'#4ade80',class="string">'#60a5fa',class="string">'#f472b6',class="string">'#facc15',class="string">'#a78bfa',class="string">'#34d399',class="string">'#fb923c',class="string">'#ef4444',class="string">'#818cf8',class="string">'#2dd4bf',class="string">'#f87171',class="string">'#e879f9',class="string">'#fbbf24',class="string">'#6ee7b7',class="string">'#38bdf8',class="string">'#fca5a5',class="string">'#c084fc',class="string">'#86efac',class="string">'#fdba74'];
56class=class="string">"keyword">function hslToHex(h,s,l){
57 s/=class="number">100;l/=class="number">100;class=class="string">"keyword">var c=(class="number">1-Math.abs(class="number">2*l-class="number">1))*s,x=c*(class="number">1-Math.abs((h/class="number">60)%class="number">2-class="number">1)),m=l-c/class="number">2;
58 class=class="string">"keyword">var r,g,b;class=class="string">"keyword">if(h<class="number">60){r=c;g=x;b=class="number">0}class=class="string">"keyword">else class=class="string">"keyword">if(h<class="number">120){r=x;g=c;b=class="number">0}class=class="string">"keyword">else class=class="string">"keyword">if(h<class="number">180){r=class="number">0;g=c;b=x}class=class="string">"keyword">else class=class="string">"keyword">if(h<class="number">240){r=class="number">0;g=x;b=c}class=class="string">"keyword">else class=class="string">"keyword">if(h<class="number">300){r=x;g=class="number">0;b=c}class=class="string">"keyword">else{r=c;g=class="number">0;b=x}
59 class=class="string">"keyword">var R=Math.round((r+m)*class="number">255),G=Math.round((g+m)*class="number">255),B=Math.round((b+m)*class="number">255);
60 class=class="string">"keyword">return class="string">'class="keyword">class="comment">#'+R.toString(class="number">16).padStart(class="number">2,class="string">'class="number">0')+G.toString(class="number">16).padStart(class="number">2,class="string">'class="number">0')+B.toString(class="number">16).padStart(class="number">2,class="string">'class="number">0');
61}
62class=class="string">"keyword">function hexToRgb(hex){class=class="string">"keyword">var r=parseInt(hex.slice(class="number">1,class="number">3),class="number">16),g=parseInt(hex.slice(class="number">3,class="number">5),class="number">16),b=parseInt(hex.slice(class="number">5,class="number">7),class="number">16);class=class="string">"keyword">return{r,g,b}}
63class=class="string">"keyword">function rgbToHsl(r,g,b){r/=class="number">255;g/=class="number">255;b/=class="number">255;class=class="string">"keyword">var M=Math.max(r,g,b),m=Math.min(r,g,b),c=M-m,l=(M+m)/class="number">2;
64 class=class="string">"keyword">if(c===class="number">0)class=class="string">"keyword">return{h:class="number">0,s:class="number">0,l:Math.round(l*class="number">100)};class=class="string">"keyword">var h;
65 class=class="string">"keyword">if(M===r)h=((g-b)/c)%class="number">6;class=class="string">"keyword">else class=class="string">"keyword">if(M===g)h=(b-r)/c+class="number">2;class=class="string">"keyword">else h=(r-g)/c+class="number">4;
66 h=Math.round(h*class="number">60);class=class="string">"keyword">if(h<class="number">0)h+=class="number">360;
67 class=class="string">"keyword">var s=c/(class="number">1-Math.abs(class="number">2*l-class="number">1));
68 class=class="string">"keyword">return{h,s:Math.round(s*class="number">100),l:Math.round(l*class="number">100)}}
69class=class="string">"keyword">function updateUI(hex){
70 class=class="string">"keyword">var p=document.class="func">getElementById(class="string">'preview');p.style.background=hex;
71 class=class="string">"keyword">var l=document.class="func">getElementById(class="string">'hexLabel');l.textContent=hex;
72 l.style.color=parseInt(hex.slice(class="number">1,class="number">3),class="number">16)*.class="number">299+parseInt(hex.slice(class="number">3,class="number">5),class="number">16)*.class="number">587+parseInt(hex.slice(class="number">5,class="number">7),class="number">16)*.class="number">114>class="number">128?class="string">'class="keyword">class="comment">#class="number">000':class="string">'#fff';
73 document.class="func">getElementById(class="string">'colorPicker').value=hex;
74 document.class="func">getElementById(class="string">'hexVal').textContent=hex.toUpperCase();
75 class=class="string">"keyword">var{rr,g,b}=hexToRgb(hex);document.class="func">getElementById(class="string">'rgbVal').textContent=class="string">'rgb('+rr+class="string">','+g+class="string">','+b+class="string">')';
76 class=class="string">"keyword">var{h,s,l}=rgbToHsl(rr,g,b);document.class="func">getElementById(class="string">'hslVal').textContent=class="string">'hsl('+h+class="string">','+s+class="string">'%,'+l+class="string">'%)';
77 document.class="func">getElementById(class="string">'hVal').textContent=h;document.class="func">getElementById(class="string">'sVal').textContent=s;document.class="func">getElementById(class="string">'lVal').textContent=l;
78 document.class="func">getElementById(class="string">'hue').value=h;document.class="func">getElementById(class="string">'sat').value=s;document.class="func">getElementById(class="string">'lig').value=l;
79}
80class=class="string">"keyword">function updateFromPicker(){updateUI(document.class="func">getElementById(class="string">'colorPicker').value);}
81class=class="string">"keyword">function updateFromSliders(){
82 class=class="string">"keyword">var h=parseInt(document.class="func">getElementById(class="string">'hue').value),s=parseInt(document.class="func">getElementById(class="string">'sat').value),l=parseInt(document.class="func">getElementById(class="string">'lig').value);
83 updateUI(hslToHex(h,s,l));
84}
85class=class="string">"keyword">function copyVal(type){
86 class=class="string">"keyword">var t=document.class="func">getElementById(type+class="string">'Val').textContent;
87 navigator.clipboard.writeText(t).class="func">then(class=class="string">"keyword">function(){class=class="string">"keyword">var o=document.class="func">getElementById(type+class="string">'Val');o.style.color=class="string">'class="keyword">class="comment">#4ade80';class="func">setTimeout(class=class="string">"keyword">function(){o.style.color=class="string">''},class="number">1000)}).class="func">catch(class=class="string">"keyword">function(){});
88}
89class=class="string">"keyword">function initPalette(){
90 class=class="string">"keyword">var p=document.class="func">getElementById(class="string">'palette');
91 presets.forEach(class=class="string">"keyword">function(c){class=class="string">"keyword">var d=document.createElement(class="string">'div');d.className=class="string">'swatch';d.style.background=c;
92 d.onclick=class=class="string">"keyword">function(){updateUI(c)};p.appendChild(d);});
93}
94initPalette();updateUI(class="string">'class="keyword">class="comment">#FF6B35');
95</class="tag">script><class="tag">div style="text-align:center;padding-top:10px;font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">555"><class="tag">a href="source-viewer.php?file=color-picker.php" style="color:#FF6B35;text-decoration:none;">📖 查看源码</class="tag">a> · 编程小白，AI生成，若体验不佳请多包涵 🙏</class="tag">div>
96</class="tag">body></class="tag">html>
97
Warning: Cannot modify header information - headers already sent by (output started at /www/wwwroot/273059_cn/tools/source-viewer.php:69) in /www/wwwroot/273059_cn/tools/source-viewer.php on line 72
Warning: Cannot modify header information - headers already sent by (output started at /www/wwwroot/273059_cn/tools/source-viewer.php:69) in /www/wwwroot/273059_cn/tools/source-viewer.php on line 73
颜色调色板 - η空间
🎨 颜色调色板
🎨 选色/调色/复制色号 · 点击色卡复制 HEX/RGB/HSL
选色 · 调色 · 复制 · 一站式配色工具
#FF6B35
HEX#FF6B35
RGBrgb(255,107,53)
HSLhsl(14,100%,60%)
📖 查看源码 · 编程小白，AI生成，若体验不佳请多包涵 🙏