{"id":65762,"date":"2026-10-14T10:41:47","date_gmt":"2026-10-14T05:11:47","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?page_id=65762"},"modified":"2026-10-14T14:31:08","modified_gmt":"2026-10-14T09:01:08","slug":"hex-to-rgb","status":"publish","type":"page","link":"https:\/\/www.quickonlinetips.com\/archives\/tools\/hex-to-rgb\/","title":{"rendered":"Hex to RGB Converter: HEX, RGB and HSL Color Codes"},"content":{"rendered":"<p>This <strong>hex to RGB<\/strong> converter changes color codes between HEX, RGB and HSL instantly. Type a hex code like #2B6CB0, an RGB value or HSL, or pick a color visually, and all the other formats update. It also checks the WCAG contrast ratio of white and black text on your color, so you can choose readable combinations.<\/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-cc\">\n<div class=\"qt-grid\">\n<div class=\"qt-field\"><label for=\"qt-cc-pick\">Pick a color<\/label><input type=\"color\" id=\"qt-cc-pick\" value=\"#2b6cb0\"><\/div>\n<div class=\"qt-field\"><label for=\"qt-cc-hex\">HEX<\/label><input type=\"text\" id=\"qt-cc-hex\" value=\"#2B6CB0\" spellcheck=\"false\"><\/div>\n<div class=\"qt-field\"><label for=\"qt-cc-rgb\">RGB<\/label><input type=\"text\" id=\"qt-cc-rgb\" value=\"rgb(43, 108, 176)\" spellcheck=\"false\"><\/div>\n<div class=\"qt-field\"><label for=\"qt-cc-hsl\">HSL<\/label><input type=\"text\" id=\"qt-cc-hsl\" value=\"hsl(211, 61%, 43%)\" spellcheck=\"false\"><\/div>\n<\/div>\n<div class=\"qt-swatch\" id=\"qt-cc-sw\"><span style=\"color:#fff\">Aa White<\/span><span style=\"color:#000\">Aa Black<\/span><\/div>\n<div class=\"qt-stats\">\n<div class=\"qt-stat\"><span class=\"qt-num\" id=\"qt-cc-cw\">&#8211;<\/span><span class=\"qt-lab\">Contrast with white text<\/span><\/div>\n<div class=\"qt-stat\"><span class=\"qt-num\" id=\"qt-cc-cb\">&#8211;<\/span><span class=\"qt-lab\">Contrast with black text<\/span><\/div>\n<div class=\"qt-stat\"><span class=\"qt-num\" id=\"qt-cc-name\">&#8211;<\/span><span class=\"qt-lab\">Hex short \/ CSS<\/span><\/div>\n<\/div>\n<div class=\"qt-row\"><button type=\"button\" class=\"qt-btn qt-btn-ghost qt-btn-sm\" id=\"qt-cc-chex\">Copy HEX<\/button><button type=\"button\" class=\"qt-btn qt-btn-ghost qt-btn-sm\" id=\"qt-cc-crgb\">Copy RGB<\/button><button type=\"button\" class=\"qt-btn qt-btn-ghost qt-btn-sm\" id=\"qt-cc-chsl\">Copy HSL<\/button><\/div>\n<div class=\"qt-status\" id=\"qt-cc-status\" aria-live=\"polite\"><\/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 hex = document.getElementById('qt-cc-hex'); if (!hex) { return; } function $(id) { return document.getElementById(id); } var st = $('qt-cc-status'); function clamp(x, a, b) { return Math.min(b, Math.max(a, x)); } function toHex(r, g, b) { return '#' + [r, g, b].map(function (v) { return (v + 256).toString(16).slice(1); }).join('').toUpperCase(); } function rgbToHsl(r, g, b) { r \/= 255; g \/= 255; b \/= 255; var mx = Math.max(r, g, b), mn = Math.min(r, g, b), h = 0, s = 0, l = (mx + mn) \/ 2; if (mx !== mn) { var d = mx - mn; s = l > 0.5 ? d \/ (2 - mx - mn) : d \/ (mx + mn); h = mx === r ? (g - b) \/ d + (b > g ? 6 : 0) : mx === g ? (b - r) \/ d + 2 : (r - g) \/ d + 4; h *= 60; } return [Math.round(h), Math.round(s * 100), Math.round(l * 100)]; } function hslToRgb(h, s, l) { s \/= 100; l \/= 100; var k = function (n) { return (n + h \/ 30) % 12; }, a = s * Math.min(l, 1 - l); var f = function (n) { return l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))); }; return [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)]; } function lum(c) { var v = c.map(function (x) { x \/= 255; return x > 0.03928 ? Math.pow((x + 0.055) \/ 1.055, 2.4) : x \/ 12.92; }); return 0.2126 * v[0] + 0.7152 * v[1] + 0.0722 * v[2]; } function ratio(a, b) { var l1 = lum(a), l2 = lum(b); return (Math.max(l1, l2) + 0.05) \/ (Math.min(l1, l2) + 0.05); } function grade(r) { return r.toFixed(2) + ':1 ' + (r >= 7 ? 'AAA' : r >= 4.5 ? 'AA' : r >= 3 ? 'AA large text' : 'Fail'); } function show(c, from) { var h = toHex(c[0], c[1], c[2]), hs = rgbToHsl(c[0], c[1], c[2]); if (from !== 'hex') { hex.value = h; } if (from !== 'rgb') { $('qt-cc-rgb').value = 'rgb(' + c.join(', ') + ')'; } if (from !== 'hsl') { $('qt-cc-hsl').value = 'hsl(' + hs[0] + ', ' + hs[1] + '%, ' + hs[2] + '%)'; } if (from !== 'pick') { $('qt-cc-pick').value = h.toLowerCase(); } $('qt-cc-sw').style.background = h; $('qt-cc-cw').textContent = grade(ratio(c, [255, 255, 255])); $('qt-cc-cb').textContent = grade(ratio(c, [0, 0, 0])); var sh = h[1] === h[2] ? (h[3] === h[4] ? (h[5] === h[6] ? '#' + h[1] + h[3] + h[5] : '') : '') : ''; $('qt-cc-name').textContent = sh || h; st.textContent = ''; st.classList.remove('qt-error'); } function bad(m) { st.textContent = m; st.classList.add('qt-error'); } hex.addEventListener('input', function () { var v = hex.value.trim().replace(\/^#\/, ''); if (\/^[0-9a-f]{3,4}$\/i.test(v)) { v = v.split('').map(function (x) { return x + x; }).join(''); } if (!\/^[0-9a-f]{6}([0-9a-f]{2})?$\/i.test(v)) { bad('Enter 3 or 6 hex digits, like #2B6CB0 or #FFF.'); return; } show([parseInt(v.slice(0, 2), 16), parseInt(v.slice(2, 4), 16), parseInt(v.slice(4, 6), 16)], 'hex'); }); $('qt-cc-rgb').addEventListener('input', function () { var n = this.value.match(\/\\d+(\\.\\d+)?%?\/g); if (!n || 3 > n.length) { bad('Enter three numbers from 0 to 255, like rgb(43, 108, 176).'); return; } show(n.slice(0, 3).map(function (x) { return clamp(Math.round(\/%$\/.test(x) ? parseFloat(x) * 2.55 : parseFloat(x)), 0, 255); }), 'rgb'); }); $('qt-cc-hsl').addEventListener('input', function () { var n = this.value.match(\/-?\\d+(\\.\\d+)?\/g); if (!n || 3 > n.length) { bad('Enter hue (0-360), saturation and lightness (0-100%), like hsl(211, 61%, 43%).'); return; } show(hslToRgb(((parseFloat(n[0]) % 360) + 360) % 360, clamp(parseFloat(n[1]), 0, 100), clamp(parseFloat(n[2]), 0, 100)), 'hsl'); }); $('qt-cc-pick').addEventListener('input', function () { var v = this.value.slice(1); show([parseInt(v.slice(0, 2), 16), parseInt(v.slice(2, 4), 16), parseInt(v.slice(4, 6), 16)], 'pick'); }); $('qt-cc-chex').addEventListener('click', function () { qtCopy(hex.value, st, 'HEX copied.'); }); $('qt-cc-crgb').addEventListener('click', function () { qtCopy($('qt-cc-rgb').value, st, 'RGB copied.'); }); $('qt-cc-chsl').addEventListener('click', function () { qtCopy($('qt-cc-hsl').value, st, 'HSL copied.'); }); show([43, 108, 176], 'none'); }); })();<\/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\/qr-code-generator\/\">QR Code Generator<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/barcode-generator\/\">Barcode Generator<\/a><\/div>\n<\/div>\n<p><strong>Quick answer:<\/strong> A hex color is three pairs of hexadecimal digits for red, green and blue. Convert each pair to decimal: #2B6CB0 is 2B = 43, 6C = 108 and B0 = 176, so rgb(43, 108, 176). Type any code above to convert it instantly.<\/p>\n<h2>How to convert hex to RGB<\/h2>\n<ol>\n<li>Remove the # and split the code into three pairs: 2B, 6C, B0.<\/li>\n<li>Convert each pair from base 16: multiply the first digit by 16 and add the second. A to F stand for 10 to 15, so 2B = 2 \u00d7 16 + 11 = 43.<\/li>\n<li>Write the result as rgb(43, 108, 176).<\/li>\n<\/ol>\n<p>Short hex codes double each digit: #FA0 is the same as #FFAA00. To go from RGB to hex, convert each number to two hex digits and join them.<\/p>\n<h2>HEX, RGB and HSL explained<\/h2>\n<table class=\"qt-ref\">\n<thead>\n<tr>\n<th>Format<\/th>\n<th>Example<\/th>\n<th>Best for<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>HEX<\/td>\n<td>#2B6CB0<\/td>\n<td>CSS, design tools and brand guides; compact and easy to copy.<\/td>\n<\/tr>\n<tr>\n<td>RGB<\/td>\n<td>rgb(43, 108, 176)<\/td>\n<td>Screens and code that mixes red, green and blue light (0 to 255 each).<\/td>\n<\/tr>\n<tr>\n<td>HSL<\/td>\n<td>hsl(211, 61%, 43%)<\/td>\n<td>Adjusting colors by hand: change lightness for tints and shades, or hue for a matching color.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>All three describe the same colors on screen. For print, designers convert to CMYK in their design software, which also accounts for paper and inks.<\/p>\n<h2>Contrast ratio and accessibility<\/h2>\n<p>The Web Content Accessibility Guidelines (WCAG) measure how readable text is against its background on a scale from 1:1 to 21:1. Normal text needs at least <strong>4.5:1<\/strong> for level AA and 7:1 for AAA; large text (about 24 px, or 19 px bold) needs 3:1. The boxes above show whether white or black text on your color passes. If neither passes well, darken or lighten the color using the HSL lightness value.<\/p>\n<h2>Common colors<\/h2>\n<table class=\"qt-ref\">\n<thead>\n<tr>\n<th>Color<\/th>\n<th>HEX<\/th>\n<th>RGB<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>White<\/td>\n<td>#FFFFFF<\/td>\n<td>255, 255, 255<\/td>\n<\/tr>\n<tr>\n<td>Black<\/td>\n<td>#000000<\/td>\n<td>0, 0, 0<\/td>\n<\/tr>\n<tr>\n<td>Red<\/td>\n<td>#FF0000<\/td>\n<td>255, 0, 0<\/td>\n<\/tr>\n<tr>\n<td>Green (lime)<\/td>\n<td>#00FF00<\/td>\n<td>0, 255, 0<\/td>\n<\/tr>\n<tr>\n<td>Blue<\/td>\n<td>#0000FF<\/td>\n<td>0, 0, 255<\/td>\n<\/tr>\n<tr>\n<td>Gray<\/td>\n<td>#808080<\/td>\n<td>128, 128, 128<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Browse the full set of 216 classic web colors with our <a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/web-safe-colors\/\">web safe colors<\/a> chart, or check fonts with the <a href=\"https:\/\/www.quickonlinetips.com\/archives\/web-safe-fonts-list\/\">web safe fonts list<\/a>.<\/p>\n<h2>FAQ<\/h2>\n<h3>What about 8-digit hex codes?<\/h3>\n<p>The last two digits are transparency (alpha). The converter reads the color and ignores the alpha.<\/p>\n<h3>Is hex case-sensitive?<\/h3>\n<p>No. #2b6cb0 and #2B6CB0 are the same color.<\/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\/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\/color-palette-generator\/\"><strong>Color Palette Generator<\/strong><span>Random and matching color palettes with hex codes.<\/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 hex to RGB converter changes color codes between HEX, RGB and HSL instantly. Type a hex code like #2B6CB0, an RGB value or HSL, or pick a color visually, and all the other formats update. It also checks the WCAG contrast ratio of white and black text on your color, so you can choose&#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-65762","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/65762","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=65762"}],"version-history":[{"count":3,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/65762\/revisions"}],"predecessor-version":[{"id":66464,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/65762\/revisions\/66464"}],"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=65762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}