-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcolor-wheel.html
More file actions
93 lines (92 loc) · 9.89 KB
/
color-wheel.html
File metadata and controls
93 lines (92 loc) · 9.89 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free Color Wheel Picker — Complementary Colors</title>
<meta name="description" content="Interactive color wheel showing complementary, triadic, tetradic, and analogous color harmonies. Get CSS-ready color codes. Free online color wheel.">
<link rel="canonical" href="https://www.quicktools.mom/color-wheel.html">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.quicktools.mom/color-wheel.html">
<meta name="twitter:card" content="summary">
<link rel="stylesheet" href="style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2658921743607446" crossorigin="anonymous"></script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Is Color Wheel free to use?","acceptedAnswer":{"@type":"Answer","text":"Yes! Color Wheel is completely free with no signup required. It runs entirely in your browser — your data never leaves your device."}},{"@type":"Question","name":"How do I use Color Wheel?","acceptedAnswer":{"@type":"Answer","text":"Enter your data in the input fields above. Results are generated instantly in your browser. You can copy, download, or share the output."}},{"@type":"Question","name":"Is my data safe with Color Wheel?","acceptedAnswer":{"@type":"Answer","text":"Absolutely. Color Wheel runs 100% client-side in your browser using JavaScript. No data is uploaded, stored, or shared with any server. Your privacy is guaranteed."}}]}</script>
</head>
<body>
<div class="page-wrapper">
<header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
<div class="ad-zone ad-zone-top">Ad Space</div>
<div class="tool-header"><div class="tool-badge">🎨 Design</div><h1>Color Wheel</h1><p>Explore color harmonies: complementary, triadic, analogous, and more.</p></div>
<div class="tool-card" style="text-align:center;">
<canvas id="wheel" width="300" height="300" style="cursor:crosshair;border-radius:50%;"></canvas>
<div style="margin-top:1rem;display:flex;gap:0.5rem;align-items:center;justify-content:center;">
<input type="color" id="base" value="#6366f1" onchange="update(this.value)" style="width:50px;height:50px;border:none;cursor:pointer;border-radius:8px;">
<input type="text" id="hexInput" value="#6366f1" oninput="update(this.value)" style="max-width:120px;font-family:monospace;font-size:1rem;text-align:center;">
</div>
<div class="controls-row mt-1" style="justify-content:center;">
<div class="control-group"><label>Harmony</label><select id="harmony" onchange="showHarmony()"><option value="complementary">Complementary</option><option value="triadic">Triadic</option><option value="tetradic">Tetradic</option><option value="analogous">Analogous</option><option value="split">Split Complementary</option></select></div>
</div>
</div>
<div class="tool-card">
<h3 style="font-size:0.95rem;margin-bottom:0.75rem;">🎨 Color Harmony</h3>
<div id="harmonies" style="display:flex;gap:0.5rem;flex-wrap:wrap;justify-content:center;"></div>
</div>
<div class="ad-zone">Ad Space</div>
<div class="related-tools"><h2>Related Tools</h2><div class="related-grid"><a href="color-converter.html"><span class="tool-icon">🎨</span> Color Converter</a><a href="color-palette.html"><span class="tool-icon">🎨</span> Color Palette</a><a href="color-name.html"><span class="tool-icon">🎨</span> Color Name</a><a href="contrast-checker.html"><span class="tool-icon">♿</span> Contrast</a></div></div>
<div class="tool-card" style="max-width:720px;">
<h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About Color Wheel</h2>
<p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;">Color Wheel is a free, browser-based tool designed for designers, content creators, and anyone making quick decisions. Interactive color wheel showing complementary, triadic, tetradic, and analogous color harmonies. Get CSS-ready color codes. Free online color wheel. Everything runs locally in your browser using JavaScript — no data is ever sent to a server, making it completely private and secure. The tool is designed to be intuitive and beginner-friendly while still offering advanced features for power users. It loads instantly with no installation required and works offline once loaded. Use it as often as you need — there are no daily limits, no watermarks, and no hidden fees.</p>
<p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;"><strong>Who is this for?</strong> Color Wheel is ideal for professionals, students, freelancers, and hobbyists who want quick, reliable results without installing software or creating accounts. Whether you are on a laptop, tablet, or phone, it works seamlessly in any modern browser.</p>
<h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
<ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
<li>Enter or paste your data in the input area above.</li>
<li>Adjust settings and options to match your needs.</li>
<li>View the results instantly — they update in real-time.</li>
<li>Copy, download, or share your output with one click.</li>
</ol>
</div>
<div class="tool-card faq-section">
<h2 style="font-size:1.1rem;margin-bottom:1rem;">❓ Frequently Asked Questions</h2>
<details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">Is Color Wheel free to use?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Yes! Color Wheel is completely free with no signup required. It runs entirely in your browser — your data never leaves your device.</p></details>
<details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">How do I use Color Wheel?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Enter your data in the input fields above. Results are generated instantly in your browser. You can copy, download, or share the output.</p></details>
<details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">Is my data safe with Color Wheel?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Absolutely. Color Wheel runs 100% client-side in your browser using JavaScript. No data is uploaded, stored, or shared with any server. Your privacy is guaranteed.</p></details>
</div>
<div class="ad-zone ad-zone-bottom">Ad Space</div>
<footer class="site-footer"><p>© 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a></div></footer>
</div>
<script>
const canvas=document.getElementById('wheel'),ctx=canvas.getContext('2d');
function drawWheel(){const cx=150,cy=150,r=140;
for(let a=0;a<360;a++){const rad=a*Math.PI/180;ctx.beginPath();ctx.moveTo(cx,cy);ctx.arc(cx,cy,r,rad,(a+1)*Math.PI/180);ctx.fillStyle=`hsl(${a},100%,50%)`;ctx.fill();}
ctx.beginPath();ctx.arc(cx,cy,60,0,Math.PI*2);ctx.fillStyle='var(--bg-card)';ctx.fill();
}
drawWheel();
canvas.addEventListener('click',e=>{const rect=canvas.getBoundingClientRect();const x=e.clientX-rect.left-150,y=e.clientY-rect.top-150;
const angle=(Math.atan2(y,x)*180/Math.PI+360)%360;const hex=hslToHex(angle,100,50);update(hex);});
function hslToHex(h,s,l){s/=100;l/=100;const a=s*Math.min(l,1-l);const f=n=>{const k=(n+h/30)%12;const c=l-a*Math.max(Math.min(k-3,9-k,1),-1);return Math.round(255*c).toString(16).padStart(2,'0');};return`#${f(0)}${f(8)}${f(4)}`;}
function hexToHsl(hex){let r=parseInt(hex.slice(1,3),16)/255,g=parseInt(hex.slice(3,5),16)/255,b=parseInt(hex.slice(5,7),16)/255;
const max=Math.max(r,g,b),min=Math.min(r,g,b),l=(max+min)/2;let h=0,s=0;
if(max!==min){const d=max-min;s=l>0.5?d/(2-max-min):d/(max+min);
if(max===r)h=((g-b)/d+(g<b?6:0))*60;else if(max===g)h=((b-r)/d+2)*60;else h=((r-g)/d+4)*60;}
return[Math.round(h),Math.round(s*100),Math.round(l*100)];}
function update(hex){if(!/^#[0-9a-fA-F]{6}$/.test(hex))return;
document.getElementById('base').value=hex;document.getElementById('hexInput').value=hex;showHarmony();}
function showHarmony(){
const hex=document.getElementById('base').value;const[h,s,l]=hexToHsl(hex);const mode=document.getElementById('harmony').value;
let angles=[];
if(mode==='complementary')angles=[0,180];
else if(mode==='triadic')angles=[0,120,240];
else if(mode==='tetradic')angles=[0,90,180,270];
else if(mode==='analogous')angles=[-30,0,30,60];
else if(mode==='split')angles=[0,150,210];
const colors=angles.map(a=>hslToHex((h+a+360)%360,s,Math.max(30,Math.min(70,l))));
document.getElementById('harmonies').innerHTML=colors.map(c=>{const lum=parseInt(c.slice(1,3),16)*0.299+parseInt(c.slice(3,5),16)*0.587+parseInt(c.slice(5,7),16)*0.114;
return`<div onclick="navigator.clipboard.writeText('${c}')" style="cursor:pointer;text-align:center;"><div style="width:80px;height:80px;background:${c};border-radius:12px;border:3px solid var(--border);"></div><div style="font-family:monospace;font-size:0.8rem;margin-top:0.3rem;">${c}</div></div>`;}).join('');
}
showHarmony();
</script>
<script src="ads.js"></script>
</body>
</html>