{"id":65920,"date":"2026-10-14T12:30:54","date_gmt":"2026-10-14T07:00:54","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?page_id=65920"},"modified":"2026-10-14T14:30:12","modified_gmt":"2026-10-14T09:00:12","slug":"color-palette-generator","status":"publish","type":"page","link":"https:\/\/www.quickonlinetips.com\/archives\/tools\/color-palette-generator\/","title":{"rendered":"Color Palette Generator: Random and Matching Colors"},"content":{"rendered":"<p>This <strong>color palette generator<\/strong> creates five-color schemes for websites, logos, slides and art. Press generate for random palettes, lock the colors you love and keep shuffling the rest, or start from your own brand color and get analogous, complementary, triadic or monochrome combinations that are built on color theory.<\/p>\n<style>.qt-tool{--qt-accent:var(--global-palette1,#2B6CB0);--qt-accent2:var(--global-palette2,#215387);--qt-ink:var(--global-palette3,#1A202C);--qt-muted:var(--global-palette5,#4A5568);--qt-line:var(--global-palette7,#EDF2F7);--qt-soft:var(--global-palette8,#F7FAFC);--qt-bg:var(--global-palette9,#ffffff);background:#DCE7F3;border:1px solid #AEC3DB;border-radius:12px;padding:20px;margin:0 0 1.75em;color:var(--qt-ink);box-shadow:0 1px 2px rgba(26,32,44,.06)} .qt-tool *{box-sizing:border-box} .qt-tool .qt-label{display:block;font-weight:600;margin:0 0 6px} .qt-tool textarea,.qt-tool input[type=number],.qt-tool input[type=text],.qt-tool input[type=date],.qt-tool input[type=time],.qt-tool input[type=datetime-local],.qt-tool select{width:100%;font:inherit;font-size:16px;line-height:1.5;color:var(--qt-ink);background:var(--qt-bg);border:1px solid #CBD5E0;border-radius:8px;padding:10px 12px;margin:0} .qt-tool textarea{min-height:200px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px} .qt-tool textarea.qt-prose{font-family:inherit;font-size:16px} .qt-tool textarea:focus,.qt-tool input:focus,.qt-tool select:focus{outline:2px solid var(--qt-accent);outline-offset:1px;border-color:var(--qt-accent)} .qt-tool .qt-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 0} .qt-tool .qt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0 0} .qt-tool .qt-field label{display:block;font-size:14px;font-weight:600;margin:0 0 4px;color:var(--qt-muted)} .qt-tool .qt-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:15px;font-weight:600;line-height:1.2;padding:10px 16px;border-radius:8px;border:1px solid var(--qt-accent);background:var(--qt-accent);color:#fff;cursor:pointer;text-decoration:none;min-height:42px} .qt-tool .qt-btn:hover{background:var(--qt-accent2);border-color:var(--qt-accent2);color:#fff} .qt-tool .qt-btn-ghost{background:var(--qt-bg);color:var(--qt-accent)} .qt-tool .qt-btn-ghost:hover{background:var(--qt-line);color:var(--qt-accent2)} .qt-tool .qt-btn-sm{font-size:14px;padding:6px 10px;min-height:34px} .qt-tool .qt-btn-big{font-size:17px;padding:12px 22px} .qt-tool .qt-check{display:flex;align-items:center;gap:8px;font-size:15px;margin:0;cursor:pointer} .qt-tool .qt-check input{width:18px;height:18px;margin:0;accent-color:var(--qt-accent)} .qt-tool .qt-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin:12px 0 0} .qt-tool .qt-stat{background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:8px;padding:10px;text-align:center} .qt-tool .qt-num{display:block;font-size:24px;font-weight:700;line-height:1.2;color:var(--qt-accent2);font-variant-numeric:tabular-nums} .qt-tool .qt-lab{display:block;font-size:13px;color:var(--qt-muted);margin-top:2px} .qt-tool .qt-sub{font-weight:700;margin:16px 0 6px} .qt-tool .qt-note{font-size:13px;color:var(--qt-muted);margin:14px 0 0} .qt-tool .qt-status{min-height:1.4em;font-size:14px;color:var(--qt-accent2);margin:8px 0 0} .qt-tool .qt-error{color:#C53030} .qt-tool .qt-kw{margin:0;padding:0 0 0 1.4em;columns:2;column-gap:24px;font-size:15px} .qt-tool .qt-kw li{margin:0 0 4px;break-inside:avoid} .qt-tool .qt-kw span{color:var(--qt-muted)} .qt-tool .qt-result{background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:10px;padding:18px;margin:12px 0 0;text-align:center;font-size:44px;font-weight:700;line-height:1.25;color:var(--qt-accent2);word-break:break-word;font-variant-numeric:tabular-nums;min-height:94px} .qt-tool .qt-result.qt-many{font-size:22px;text-align:left;line-height:1.6;white-space:pre-wrap} .qt-tool .qt-history{margin:0;padding:0;list-style:none;font-size:14px;color:var(--qt-muted)} .qt-tool .qt-history li{padding:4px 0;border-bottom:1px dashed var(--qt-line);word-break:break-word} .qt-tool .qt-presets{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0} .qt-tool .qt-dice{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 0 0;min-height:76px} .qt-tool .qt-die{width:68px;height:68px;border-radius:14px;background:var(--qt-bg);border:2px solid var(--qt-accent);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:var(--qt-ink);box-shadow:0 2px 0 var(--qt-accent2)} .qt-tool .qt-die.qt-pip{font-size:56px;font-weight:400;line-height:1} .qt-tool .qt-die-label{display:block;font-size:11px;font-weight:600;color:var(--qt-muted)} .qt-tool .qt-total{text-align:center;font-size:20px;margin:12px 0 0} .qt-tool .qt-total strong{font-size:32px;color:var(--qt-accent2)} .qt-tool .qt-roll{animation:qtroll .45s ease-out} @keyframes qtroll{0%{transform:rotate(-25deg) scale(.8)}60%{transform:rotate(12deg) scale(1.08)}100%{transform:rotate(0) scale(1)}} .qt-tool .qt-out{background:var(--qt-bg)} .qt-tool p:empty{display:none} .qt-tool p:not(.qt-note){margin:0} .qt-tool .qt-grid:has(.qt-check){grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 16px} .qt-tool .qt-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:8px 0 18px} .qt-tool .qt-sw{font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;border:1px solid rgba(0,0,0,.12);border-radius:8px;min-height:64px;padding:6px 4px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;text-transform:uppercase;transition:transform .1s} .qt-tool .qt-sw:hover,.qt-tool .qt-sw:focus{transform:scale(1.06);outline:2px solid var(--qt-accent);outline-offset:1px} .qt-tool .qt-group{font-size:15px;font-weight:700;margin:14px 0 2px} .qt-tool .qt-seg{display:inline-flex;border:1px solid var(--qt-accent);border-radius:8px;overflow:hidden} .qt-tool .qt-seg button{font:inherit;font-size:14px;font-weight:600;padding:8px 14px;border:0;background:var(--qt-bg);color:var(--qt-accent);cursor:pointer} .qt-tool .qt-seg button[aria-pressed=true]{background:var(--qt-accent);color:#fff} .qt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0 0 1.75em} .qt-card{display:block;background:var(--global-palette8,#F7FAFC);border:1px solid #D5E0EC;border-radius:12px;padding:16px 18px;text-decoration:none;color:var(--global-palette3,#1A202C);transition:transform .12s,box-shadow .12s} .qt-card:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(26,32,44,.10);color:var(--global-palette3,#1A202C)} .qt-card strong{display:block;font-size:18px;color:var(--global-palette1,#2B6CB0);margin:0 0 4px} .qt-card span{display:block;font-size:15px;color:var(--global-palette5,#4A5568);line-height:1.5} @media (max-width:600px){.qt-tool{padding:14px}.qt-tool .qt-swatches{grid-template-columns:repeat(3,1fr)}.qt-tool .qt-kw{columns:1}.qt-tool .qt-result{font-size:36px}.qt-tool .qt-die{width:58px;height:58px;font-size:24px}.qt-tool .qt-die.qt-pip{font-size:48px}} .qt-tool .qt-two{display:grid;grid-template-columns:1fr 1fr;gap:12px} .qt-tool .qt-two textarea{min-height:180px} .qt-tool .qt-diff{background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:8px;margin:12px 0 0;max-height:560px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.55} .qt-tool .qt-dl{display:grid;grid-template-columns:3.2em 3.2em 1.4em 1fr;min-width:0} .qt-tool .qt-ln{color:#A0AEC0;text-align:right;padding:0 6px;user-select:none;border-right:1px solid var(--qt-line)} .qt-tool .qt-sign{text-align:center;color:var(--qt-muted);user-select:none} .qt-tool .qt-code{white-space:pre-wrap;word-break:break-word;padding:0 8px 0 2px} .qt-tool .qt-add{background:#F0FFF4} .qt-tool .qt-add .qt-sign{color:#2F855A;font-weight:700} .qt-tool .qt-del{background:#FFF5F5} .qt-tool .qt-del .qt-sign{color:#C53030;font-weight:700} .qt-tool .qt-wadd{background:#9AE6B4;color:inherit;border-radius:2px;padding:0} .qt-tool .qt-wdel{background:#FEB2B2;color:inherit;border-radius:2px;padding:0;text-decoration:line-through} .qt-tool .qt-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;word-break:break-all;background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:8px;padding:8px 10px;margin:4px 0 0;min-height:2.4em;color:var(--qt-ink)} .qt-tool .qt-big{font-size:18px;letter-spacing:.04em} .qt-tool .qt-explain{font-size:14px;color:var(--qt-muted);text-align:center;margin:6px 0 0;min-height:1.2em} .qt-tool .qt-result.qt-roman{font-size:32px} .qt-tool .qt-dateout{font-size:24px;font-weight:700;color:var(--qt-accent2);letter-spacing:.03em} .qt-ref{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 1.5em} .qt-ref th,.qt-ref td{border:1px solid #E2E8F0;padding:6px 10px;text-align:left} .qt-ref th{background:#F7FAFC} @media (max-width:600px){.qt-tool .qt-two{grid-template-columns:1fr}.qt-tool .qt-dl{grid-template-columns:2.6em 2.6em 1.2em 1fr}} .qt-tool .qt-coinwrap{display:flex;justify-content:center;margin:8px 0 0;perspective:900px} .qt-tool .qt-coin{position:relative;width:150px;height:150px;cursor:pointer;transform-style:preserve-3d;border-radius:50%} .qt-tool .qt-coin:focus{outline:3px solid var(--qt-accent);outline-offset:4px} .qt-tool .qt-face{position:absolute;inset:0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:radial-gradient(circle at 35% 30%,#FFF3B0,#F6C343 45%,#C9931E 100%);border:6px solid #B7791F;box-shadow:inset 0 0 0 4px rgba(255,255,255,.35),0 6px 14px rgba(0,0,0,.18);color:#744210;font-weight:800} .qt-tool .qt-face b{font-size:56px;line-height:1} .qt-tool .qt-face small{font-size:13px;letter-spacing:.12em;margin-top:2px} .qt-tool .qt-face-t{transform:rotateY(180deg);background:radial-gradient(circle at 35% 30%,#F7FAFC,#CBD5E0 45%,#8A99AD 100%);border-color:#718096;color:#2D3748} .qt-tool .qt-coin.qt-show-t{transform:rotateY(180deg)} .qt-tool .qt-coin.qt-flip-h{animation:qtfliph 1s cubic-bezier(.2,.7,.3,1) forwards} .qt-tool .qt-coin.qt-flip-t{animation:qtflipt 1s cubic-bezier(.2,.7,.3,1) forwards} @keyframes qtfliph{0%{transform:translateY(0) rotateY(0)}45%{transform:translateY(-40px) rotateY(900deg)}100%{transform:translateY(0) rotateY(1800deg)}} @keyframes qtflipt{0%{transform:translateY(0) rotateY(0)}45%{transform:translateY(-40px) rotateY(990deg)}100%{transform:translateY(0) rotateY(1980deg)}} .qt-tool .qt-small{font-size:15px;font-weight:400;color:var(--qt-muted);text-align:center;margin:6px 0 0;word-break:break-word} .qt-tool .qt-wheelbox{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start} .qt-tool .qt-wheel{position:relative;width:100%;max-width:440px;margin:0 auto} .qt-tool .qt-wheel canvas{display:block;width:100%;height:auto;aspect-ratio:1\/1;cursor:pointer;border-radius:50%} .qt-tool .qt-wheel canvas:focus{outline:3px solid var(--qt-accent);outline-offset:3px} .qt-tool .qt-pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:30px solid #1A202C;filter:drop-shadow(0 2px 1px rgba(0,0,0,.3));z-index:2} .qt-tool .qt-wheelbox textarea{min-height:240px} .qt-tool .qt-result.qt-pop{animation:qtpop .4s ease-out} @keyframes qtpop{0%{transform:scale(.8)}60%{transform:scale(1.06)}100%{transform:scale(1)}} .qt-tool .qt-btn[disabled]{opacity:.6;cursor:wait} .qt-tool .qt-lamp{width:46px;height:46px;border-radius:50%;background:#CBD5E0;border:3px solid #A0AEC0;flex:0 0 auto} .qt-tool .qt-lamp.qt-on{background:#F6E05E;border-color:#D69E2E;box-shadow:0 0 18px 6px rgba(246,224,94,.8)} .qt-tool .qt-result.qt-letters{font-size:72px} .qt-tool .qt-clock{font-size:56px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;color:var(--qt-ink);background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:10px;padding:14px;margin:12px 0 0;letter-spacing:.02em} .qt-tool .qt-clock.qt-done{color:#C53030;animation:qtpop .4s ease-out} .qt-tool .qt-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px} .qt-tool .qt-tabs button{font:inherit;font-size:15px;font-weight:600;padding:8px 14px;border-radius:8px;border:1px solid var(--qt-accent);background:var(--qt-bg);color:var(--qt-accent);cursor:pointer} .qt-tool .qt-tabs button[aria-selected=true]{background:var(--qt-accent);color:#fff} .qt-tool .qt-sent{font-size:17px;line-height:2.4} .qt-tool .qt-sent input{display:inline-block;width:7em;padding:6px 8px;margin:0 4px} .qt-tool .qt-ans{font-weight:700;color:var(--qt-accent2);font-size:20px;margin-left:6px} .qt-tool .qt-table{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0 0;background:var(--qt-bg)} .qt-tool .qt-table th,.qt-tool .qt-table td{border:1px solid #D5E0EC;padding:6px 8px;text-align:left;word-break:break-all;vertical-align:top} .qt-tool .qt-table th{background:#F1F5FA;font-weight:700;word-break:normal} .qt-tool .qt-ok{color:#2F855A;font-weight:700} .qt-tool .qt-ip{font-size:38px;font-weight:700;text-align:center;color:var(--qt-accent2);word-break:break-all;background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:10px;padding:16px;margin:0} @media (prefers-reduced-motion:reduce){.qt-tool .qt-coin.qt-flip-h,.qt-tool .qt-coin.qt-flip-t{animation:none}.qt-tool .qt-coin.qt-flip-t{transform:rotateY(180deg)}} @media (max-width:700px){.qt-tool .qt-wheelbox{grid-template-columns:1fr}} @media (max-width:600px){.qt-tool .qt-clock{font-size:40px}.qt-tool .qt-ip{font-size:26px}} .qt-tool .qt-srow{display:flex;gap:10px;align-items:center;background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:8px;padding:8px 10px;margin:8px 0 0} .qt-tool .qt-sname{font-size:12px;color:var(--qt-muted);flex:0 0 120px} .qt-tool .qt-sval{flex:1 1 auto;font-size:20px;line-height:1.4;word-break:break-word;min-width:0} @media (max-width:600px){.qt-tool .qt-srow{flex-wrap:wrap}.qt-tool .qt-sname{flex-basis:100%}} .qt-tool .qt-meter{height:22px;background:#CBD5E0;border-radius:11px;overflow:hidden;margin:12px 0 0} .qt-tool .qt-meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,#38A169 0,#38A169 60%,#D69E2E 80%,#C53030 100%);transition:width .06s linear} .qt-tool video,.qt-tool canvas.qt-snap{display:block;width:100%;max-height:420px;background:#1A202C;border-radius:10px;margin:12px 0 0;object-fit:contain} .qt-tool video.qt-mirror{transform:scaleX(-1)} .qt-tool .qt-kb{display:flex;flex-direction:column;gap:4px;margin:12px 0 0;padding:10px;background:#2D3748;border-radius:10px;outline:none;overflow-x:auto} .qt-tool .qt-kb:focus{box-shadow:0 0 0 3px var(--qt-accent)} .qt-tool .qt-krow{display:flex;gap:4px;min-width:640px} .qt-tool .qt-key{flex:1 1 0;height:36px;border-radius:5px;background:#4A5568;color:#E2E8F0;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;user-select:none;white-space:nowrap;overflow:hidden} .qt-tool .qt-key.qt-kok{background:#2F855A;color:#fff} .qt-tool .qt-key.qt-kon{background:#F6E05E;color:#1A202C} .qt-tool .qt-click{display:flex;align-items:center;justify-content:center;min-height:240px;margin:12px 0 0;border-radius:12px;background:var(--qt-accent);color:#fff;font-size:26px;font-weight:700;text-align:center;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;padding:16px} .qt-tool .qt-click.qt-wait{background:#C53030} .qt-tool .qt-click.qt-go{background:#2F855A} .qt-tool .qt-click.qt-off{background:#718096;cursor:default} .qt-full{position:fixed;inset:0;z-index:999999;cursor:none} .qt-full-tip{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1000000;background:rgba(0,0,0,.7);color:#fff;font:14px\/1.4 sans-serif;padding:8px 14px;border-radius:8px} .qt-tool .qt-gparow{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr) auto;align-items:end} @media (max-width:600px){.qt-tool .qt-gparow{grid-template-columns:1fr 1fr;padding-bottom:10px;border-bottom:1px dashed var(--qt-line)}} .qt-tool .qt-hrrow{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:6px} @media (max-width:600px){.qt-tool .qt-hrrow{grid-template-columns:repeat(2,minmax(0,1fr))}} .qt-tool .qt-tally{background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:10px;padding:12px;text-align:center} .qt-tool .qt-tally input{text-align:center;font-weight:600;border-color:transparent;background:transparent} .qt-tool .qt-tally .qt-tnum{font-size:56px;font-weight:700;line-height:1.1;color:var(--qt-accent2);font-variant-numeric:tabular-nums;cursor:pointer;user-select:none} .qt-tool .qt-tallies{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:12px 0 0} .qt-tool .qt-teams{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:12px 0 0} .qt-tool .qt-team{background:var(--qt-bg);border:1px solid var(--qt-line);border-top:4px solid var(--qt-accent);border-radius:10px;padding:10px 12px} .qt-tool .qt-team h3{font-size:16px;margin:0 0 6px} .qt-tool .qt-team ol{margin:0;padding-left:1.3em;font-size:15px} .qt-tool .qt-words{font-size:22px;line-height:1.75;height:5.6em;overflow:hidden;background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:10px;padding:8px 14px;margin:12px 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .qt-tool .qt-words span{padding:1px 3px;border-radius:4px} .qt-tool .qt-words .qt-cur{background:#FEFCBF} .qt-tool .qt-words .qt-wok{color:#2F855A} .qt-tool .qt-words .qt-wbad{color:#C53030;text-decoration:underline} .qt-tool .qt-words .qt-cur.qt-wtyping{background:#FED7D7} .qt-tool .qt-wlist{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px} .qt-tool .qt-wlist span{background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:6px;padding:3px 8px;font-size:15px;font-weight:600} .qt-tool .qt-wlist sub{font-size:10px;color:var(--qt-muted);margin-left:2px} .qt-tool h3.qt-wh{font-size:17px;margin:14px 0 2px} .qt-tool input[type=range]{width:100%;accent-color:var(--qt-accent)} .qt-tool .qt-pw{display:flex;gap:8px;align-items:center;background:var(--qt-bg);border:1px solid var(--qt-line);border-radius:8px;padding:8px 10px;margin:8px 0 0} .qt-tool .qt-pw code{flex:1 1 auto;font-size:17px;word-break:break-all;background:none;padding:0;min-width:0} .qt-tool .qt-strength{height:10px;border-radius:5px;background:#CBD5E0;overflow:hidden;margin:10px 0 0} .qt-tool .qt-strength span{display:block;height:100%;width:0;transition:width .2s} .qt-tool input[type=color]{width:100%;height:48px;padding:2px;border:1px solid #CBD5E0;border-radius:8px;background:var(--qt-bg);cursor:pointer} .qt-tool .qt-swatch{height:110px;border-radius:10px;border:1px solid rgba(0,0,0,.15);margin:12px 0 0;display:flex;align-items:center;justify-content:center;gap:24px;font-size:20px;font-weight:700} .qt-tool .qt-over{color:#C53030;font-weight:700} .qt-tool .qt-drop{border:2px dashed var(--qt-accent);border-radius:10px;padding:28px 12px;text-align:center;cursor:pointer;background:var(--qt-bg);margin:0 0 12px} .qt-tool .qt-drop.qt-hover{background:#E3EEFF} .qt-tool .qt-prev{display:block;max-width:100%;max-height:380px;margin:12px auto 0;border:1px solid var(--qt-line);border-radius:8px;background:repeating-conic-gradient(#E2E8F0 0 25%,#fff 0 50%) 0 0\/16px 16px} .qt-tool .qt-lb{display:inline-flex;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;font-weight:700;font-size:17px;background:#fff;color:#1A202C;border:2px solid var(--qt-accent);margin:3px} .qt-tool .qt-lb.qt-bonus{background:#E53E3E;color:#fff;border-color:#E53E3E} .qt-tool .qt-8{width:230px;height:230px;border-radius:50%;margin:16px auto;background:radial-gradient(circle at 35% 30%,#666,#000 62%);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.35)} .qt-tool .qt-8 span{width:116px;height:116px;border-radius:50%;background:radial-gradient(circle,#2747a8,#0b1a4a);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;font-weight:700;padding:16px;box-sizing:border-box;line-height:1.25;transition:opacity .3s} .qt-tool .qt-shake{animation:qt-shake .7s} @keyframes qt-shake{0%,100%{transform:translate(0)}20%{transform:translate(-12px,4px) rotate(-6deg)}40%{transform:translate(10px,-6px) rotate(5deg)}60%{transform:translate(-8px,6px) rotate(-4deg)}80%{transform:translate(6px,-3px) rotate(3deg)}} .qt-tool .qt-grid>.qt-field{display:flex;flex-direction:column;justify-content:flex-end} .qt-tool .qt-field input[type=range]{height:46px;padding:0 10px} .qt-tool .qt-field input[type=color]{height:46px} .qt-tool .qt-drop .qt-sub{font-weight:400;font-size:14px;margin:4px 0 0} .qt-tool .qt-board{display:grid;gap:5px;margin:14px auto 0;max-width:100%;user-select:none;-webkit-user-select:none;touch-action:manipulation} .qt-tool .qt-cell{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #AEC3DB;border-radius:6px;font-weight:700;cursor:pointer;aspect-ratio:1;font-size:clamp(14px,4vw,26px);color:#1A202C;padding:0;min-width:0;font-family:inherit;line-height:1} .qt-tool .qt-cell:disabled{cursor:default} .qt-tool .qt-win{background:#C6F6D5;border-color:#38A169} .qt-tool .qt-sel{background:#BEE3F8;border-color:#3182CE} .qt-tool .qt-bad{background:#FED7D7;border-color:#E53E3E} .qt-tool select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:40px;cursor:pointer;border:2px solid #90B4DA;font-weight:600;background-color:#fff;background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%232B6CB0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\");background-repeat:no-repeat;background-position:right 14px center;background-size:14px 9px} .qt-tool select:hover{border-color:var(--qt-accent);background-color:#F4F8FD} .qt-tool select::-ms-expand{display:none} .qt-next{margin:0 0 1.75em} .qt-next .qt-next-h{font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#4A5568;margin:0 0 8px} .qt-next-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .qt-next-g a{display:flex;align-items:center;min-height:46px;padding:9px 12px;border:1px solid #AEC3DB;border-radius:8px;background:#F4F8FD;color:#215387;font-weight:600;font-size:15px;line-height:1.3;text-decoration:none} .qt-next-g a:hover,.qt-next-g a:focus{background:#E3EEFF;border-color:#2B6CB0;text-decoration:none} @media (max-width:600px){.qt-next-g{grid-template-columns:repeat(2,1fr)}}<\/style>\n<div class=\"qt-tool\" id=\"qt-pg\">\n<div class=\"qt-grid\">\n<div class=\"qt-field\"><label for=\"qt-pg-mode\">Scheme<\/label><select id=\"qt-pg-mode\"><option value=\"random\" selected>Random<\/option><option value=\"analogous\">Analogous<\/option><option value=\"complementary\">Complementary<\/option><option value=\"split\">Split complementary<\/option><option value=\"triadic\">Triadic<\/option><option value=\"tetradic\">Tetradic (square)<\/option><option value=\"mono\">Monochrome<\/option><option value=\"shades\">Shades (light to dark)<\/option><\/select><\/div>\n<div class=\"qt-field\"><label for=\"qt-pg-base\">Base color<\/label><input type=\"color\" id=\"qt-pg-base\" value=\"#2B6CB0\"><\/div>\n<\/div>\n<div class=\"qt-row\"><button type=\"button\" class=\"qt-btn\" id=\"qt-pg-go\">Generate (Space)<\/button><button type=\"button\" class=\"qt-btn qt-btn-ghost\" id=\"qt-pg-css\">Copy as CSS variables<\/button><button type=\"button\" class=\"qt-btn qt-btn-ghost\" id=\"qt-pg-list\">Copy HEX list<\/button><\/div>\n<div id=\"qt-pg-out\" style=\"display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px\"><\/div>\n<div class=\"qt-status\" id=\"qt-pg-status\" aria-live=\"polite\">Click a color to copy it. Lock colors to keep them when you generate again.<\/div>\n<p class=\"qt-note\">Everything runs in your browser. Nothing you enter is sent to or stored on our server.<\/p>\n<\/div>\n<p><script>(function () { function qtReady(fn) { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', fn); } else { fn(); } } function qtCopy(text, statusEl, okMsg) { function done(ok) { if (statusEl) { statusEl.textContent = ok ? (okMsg || 'Copied to clipboard.') : 'Press Ctrl+C (or Cmd+C) to copy.'; } } function fallback() { var ta = document.createElement('textarea'); ta.value = text; ta.setAttribute('readonly', ''); ta.style.position = 'fixed'; ta.style.top = '-1000px'; document.body.appendChild(ta); ta.select(); var ok = false; try { ok = document.execCommand('copy'); } catch (e) { ok = false; } document.body.removeChild(ta); done(ok); } if (navigator.clipboard) { if (window.isSecureContext) { navigator.clipboard.writeText(text).then(function () { done(true); }, fallback); return; } } fallback(); } function qtRand32() { var c = window.crypto || window.msCrypto; if (c) { if (c.getRandomValues) { var a = new Uint32Array(1); c.getRandomValues(a); return a[0]; } } return Math.floor(Math.random() * 4294967296); } function qtRandInt(range) { if (range === 4294967296) { return qtRand32(); } var limit = Math.floor(4294967296 \/ range) * range; var x = qtRand32(); while (x >= limit) { x = qtRand32(); } return x % range; } qtReady(function () { var out = document.getElementById('qt-pg-out'); if (!out) { return; } function $(id) { return document.getElementById(id); } var cols = [], locks = [false, false, false, false, false]; function hx(n) { n = Math.round(Math.max(0, Math.min(255, n))); return (n > 15 ? '' : '0') + n.toString(16).toUpperCase(); } function h2r(h, s, l) { h = ((h % 360) + 360) % 360; s \/= 100; l \/= 100; var c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs((h \/ 60) % 2 - 1)), m = l - c \/ 2, r = 0, g = 0, b = 0; if (60 > h) { r = c; g = x; } else if (120 > h) { r = x; g = c; } else if (180 > h) { g = c; b = x; } else if (240 > h) { g = x; b = c; } else if (300 > h) { r = x; b = c; } else { r = c; b = x; } return '#' + hx((r + m) * 255) + hx((g + m) * 255) + hx((b + m) * 255); } function r2h(hex) { var m = hex.match(\/\\w\\w\/g).map(function (x) { return parseInt(x, 16) \/ 255; }); var r = m[0], g = m[1], b = m[2], mx = Math.max(r, g, b), mn = Math.min(r, g, b), h = 0, s = 0, l = (mx + mn) \/ 2, d = mx - mn; if (d) { s = l > 0.5 ? d \/ (2 - mx - mn) : d \/ (mx + mn); if (mx === r) { h = (g - b) \/ d + (b > g ? 6 : 0); } else if (mx === g) { h = (b - r) \/ d + 2; } else { h = (r - g) \/ d + 4; } h *= 60; } return [h, s * 100, l * 100]; } function rnd(a, b) { return a + qtRandInt(b - a + 1); } function lum(hex) { var m = hex.match(\/\\w\\w\/g).map(function (x) { var c = parseInt(x, 16) \/ 255; return 0.03928 >= c ? c \/ 12.92 : Math.pow((c + 0.055) \/ 1.055, 2.4); }); return 0.2126 * m[0] + 0.7152 * m[1] + 0.0722 * m[2]; } function make() { var mode = $('qt-pg-mode').value, b = r2h($('qt-pg-base').value), H = b[0], S = Math.max(b[1], 35), L = b[2], n = []; if (mode === 'random') { var h0 = rnd(0, 359), sp = rnd(20, 60); for (var i = 0; 5 > i; i++) { n.push(h2r(h0 + i * sp * (qtRandInt(2) ? 1 : -1) + rnd(-10, 10), rnd(35, 85), rnd(25, 80))); } } if (mode === 'analogous') { n = [-40, -20, 0, 20, 40].map(function (d) { return h2r(H + d, S, L); }); } if (mode === 'complementary') { n = [h2r(H, S, Math.min(L + 25, 92)), h2r(H, S, L), h2r(H, S, Math.max(L - 20, 12)), h2r(H + 180, S, L), h2r(H + 180, S, Math.min(L + 25, 92))]; } if (mode === 'split') { n = [h2r(H, S, L), h2r(H, S, Math.min(L + 25, 92)), h2r(H + 150, S, L), h2r(H + 210, S, L), h2r(H + 210, S, Math.max(L - 20, 12))]; } if (mode === 'triadic') { n = [h2r(H, S, L), h2r(H + 120, S, L), h2r(H + 240, S, L), h2r(H, S, Math.min(L + 30, 94)), h2r(H + 120, S, Math.max(L - 20, 12))]; } if (mode === 'tetradic') { n = [h2r(H, S, L), h2r(H + 90, S, L), h2r(H + 180, S, L), h2r(H + 270, S, L), h2r(H, S, Math.min(L + 30, 94))]; } if (mode === 'mono') { n = [92, 75, 55, 38, 20].map(function (l, i) { return h2r(H, Math.max(S - (i === 0 ? 20 : 0), 10), l); }); } if (mode === 'shades') { n = [0.85, 0.6, 0, -0.35, -0.6].map(function (t) { return h2r(H, S, t > 0 ? L + (100 - L) * t : L + L * t); }); } if (mode !== 'random') { cols = n; locks = [false, false, false, false, false]; } else { cols = n.map(function (c, i) { return locks[i] ? cols[i] : c; }); } draw(); } function draw() { out.textContent = ''; cols.forEach(function (c, i) { var box = document.createElement('div'); box.style.cssText = 'border-radius:10px;overflow:hidden;border:1px solid rgba(0,0,0,.15);background:#fff'; var sw = document.createElement('button'); sw.type = 'button'; sw.style.cssText = 'display:block;width:100%;height:110px;border:0;cursor:pointer;background:' + c + ';color:' + (lum(c) > 0.45 ? '#111' : '#fff') + ';font:700 14px\/1 system-ui,sans-serif'; sw.textContent = c; sw.title = 'Copy ' + c; sw.addEventListener('click', function () { qtCopy(c, $('qt-pg-status'), c + ' copied.'); }); var lk = document.createElement('button'); lk.type = 'button'; lk.className = 'qt-btn qt-btn-ghost qt-btn-sm'; lk.style.cssText = 'width:100%;border-radius:0;margin:0'; lk.textContent = locks[i] ? 'Locked' : 'Lock'; lk.setAttribute('aria-pressed', locks[i] ? 'true' : 'false'); lk.addEventListener('click', function () { locks[i] = !locks[i]; if (locks[i]) { $('qt-pg-mode').value = 'random'; } draw(); }); box.appendChild(sw); box.appendChild(lk); out.appendChild(box); }); } $('qt-pg-go').addEventListener('click', make); $('qt-pg-mode').addEventListener('change', make); $('qt-pg-base').addEventListener('input', function () { if ($('qt-pg-mode').value === 'random') { $('qt-pg-mode').value = 'analogous'; } make(); }); document.addEventListener('keydown', function (e) { if (e.code === 'Space') { var t = e.target.tagName; if (t !== 'INPUT') { if (t !== 'TEXTAREA') { if (t !== 'SELECT') { if (t !== 'BUTTON') { e.preventDefault(); make(); } } } } } }); $('qt-pg-css').addEventListener('click', function () { qtCopy(':root {\\n' + cols.map(function (c, i) { return '  --color-' + (i + 1) + ': ' + c + ';'; }).join('\\n') + '\\n}', $('qt-pg-status'), 'CSS variables copied.'); }); $('qt-pg-list').addEventListener('click', function () { qtCopy(cols.join(', '), $('qt-pg-status'), 'HEX list copied.'); }); make(); }); })();<\/script><\/p>\n<div class=\"qt-next\">\n<p class=\"qt-next-h\">Try another free tool<\/p>\n<div class=\"qt-next-g\"><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/dns-lookup\/\">DNS Lookup<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/what-is-my-ip\/\">What Is My IP<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/web-safe-colors\/\">Web Safe Colors<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/web-safe-fonts-list\/\">Web Safe Fonts List<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/hex-to-rgb\/\">Hex to RGB Converter<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/qr-code-generator\/\">QR Code Generator<\/a><\/div>\n<\/div>\n<p><strong>Quick answer:<\/strong> Press <strong>Generate<\/strong> or the Space bar for a new random palette. Click <strong>Lock<\/strong> under any color to keep it, and click a color to copy its HEX code. To match a brand, pick a base color and choose a scheme such as complementary or analogous.<\/p>\n<h2>How to use the color palette generator<\/h2>\n<ol>\n<li>Leave the scheme on <strong>Random<\/strong> and press Space until you see colors you like.<\/li>\n<li>Lock your favourites and keep generating to fill the other slots.<\/li>\n<li>Or choose a <strong>base color<\/strong>, such as your logo color, and a color-theory scheme. The palette updates instantly.<\/li>\n<li>Copy single colors, the whole HEX list, or CSS variables ready for your stylesheet.<\/li>\n<\/ol>\n<h2>Color scheme types<\/h2>\n<table class=\"qt-ref\">\n<thead>\n<tr>\n<th>Scheme<\/th>\n<th>How it works<\/th>\n<th>Feels<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Analogous<\/td>\n<td>Neighbours on the color wheel<\/td>\n<td>Calm and natural<\/td>\n<\/tr>\n<tr>\n<td>Complementary<\/td>\n<td>Opposite colors, 180\u00b0 apart<\/td>\n<td>Bold, high contrast<\/td>\n<\/tr>\n<tr>\n<td>Split complementary<\/td>\n<td>A color plus the two next to its opposite<\/td>\n<td>Lively but balanced<\/td>\n<\/tr>\n<tr>\n<td>Triadic<\/td>\n<td>Three colors evenly spaced, 120\u00b0 apart<\/td>\n<td>Playful and vibrant<\/td>\n<\/tr>\n<tr>\n<td>Tetradic<\/td>\n<td>Four colors in a square, 90\u00b0 apart<\/td>\n<td>Rich; best with one dominant color<\/td>\n<\/tr>\n<tr>\n<td>Monochrome \/ shades<\/td>\n<td>One hue at different lightness<\/td>\n<td>Clean and elegant<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Tips for using a palette<\/h2>\n<ul>\n<li><strong>60-30-10 rule:<\/strong> use one main color for about 60 percent of a design, a second for 30 percent and an accent for 10 percent.<\/li>\n<li><strong>Contrast for text:<\/strong> body text needs a contrast ratio of at least 4.5:1 with its background to meet WCAG accessibility guidelines. Dark text on the light swatches and white text on the dark ones usually works.<\/li>\n<li><strong>Neutrals:<\/strong> pair a bright palette with white, off-white or dark grey so the colors have room to breathe.<\/li>\n<li><strong>Test in context:<\/strong> colors look different on buttons, backgrounds and photos, so try them in a mockup.<\/li>\n<\/ul>\n<p>Pull colors from a photo with the <a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/color-picker-from-image\/\">color picker from image<\/a>, convert codes with the <a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/hex-to-rgb\/\">hex to RGB converter<\/a>, or browse the classic <a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/web-safe-colors\/\">web safe colors<\/a>.<\/p>\n<h2>FAQ<\/h2>\n<h3>Can I use these palettes commercially?<\/h3>\n<p>Yes. Colors cannot be owned, so use any palette you create for websites, logos, products or print.<\/p>\n<h3>How do I save a palette?<\/h3>\n<p>Click <strong>Copy HEX list<\/strong> and paste it into a note, or copy the CSS variables into your project.<\/p>\n<h2>More free tools<\/h2>\n<div class=\"qt-cards\"><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/dns-lookup\/\"><strong>DNS Lookup<\/strong><span>Check A, MX, TXT, SPF and DMARC records for any domain.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/what-is-my-ip\/\"><strong>What Is My IP<\/strong><span>See your public IP address, IPv4 or IPv6, and location.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/web-safe-colors\/\"><strong>Web Safe Colors<\/strong><span>All 216 web safe hex codes, click to copy.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/web-safe-fonts-list\/\"><strong>Web Safe Fonts List<\/strong><span>Fonts that display the same on almost every device.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/hex-to-rgb\/\"><strong>Hex to RGB Converter<\/strong><span>Convert colors between HEX, RGB and HSL with a picker.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/qr-code-generator\/\"><strong>QR Code Generator<\/strong><span>QR codes for links, text, Wi-Fi and contacts.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/barcode-generator\/\"><strong>Barcode Generator<\/strong><span>Code 128, EAN-13 and UPC barcodes as PNG or SVG.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/uuid-generator\/\"><strong>UUID Generator<\/strong><span>Generate random v4 UUIDs and GUIDs in bulk.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/base64-encode-decode\/\"><strong>Base64 Encode and Decode<\/strong><span>Encode text to Base64 and decode it back, UTF-8 safe.<\/span><\/a><\/div>\n<p>See all of them on the <a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/\">QuickOnlineTips free online tools<\/a> page and play our <a href=\"https:\/\/www.quickonlinetips.com\/archives\/games\/\">free online games<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This color palette generator creates five-color schemes for websites, logos, slides and art. Press generate for random palettes, lock the colors you love and keep shuffling the rest, or start from your own brand color and get analogous, complementary, triadic or monochrome combinations that are built on color theory. SchemeRandomAnalogousComplementarySplit complementaryTriadicTetradic (square)MonochromeShades (light to dark)&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":65595,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-65920","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/65920","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=65920"}],"version-history":[{"count":3,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/65920\/revisions"}],"predecessor-version":[{"id":66423,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/65920\/revisions\/66423"}],"up":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/65595"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=65920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}