{"id":65603,"date":"2026-10-13T20:44:50","date_gmt":"2026-10-13T15:14:50","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?page_id=65603"},"modified":"2026-10-13T21:39:08","modified_gmt":"2026-10-13T16:09:08","slug":"web-safe-colors","status":"publish","type":"page","link":"https:\/\/www.quickonlinetips.com\/archives\/tools\/web-safe-colors\/","title":{"rendered":"Web Safe Colors: All 216 Hex Codes (Click to Copy)"},"content":{"rendered":"<p>This is the complete chart of <strong>web safe colors<\/strong>: all 216 colors, each with its hex code. Click any swatch to copy the code for your CSS or design tool, and use the buttons to switch between six-digit hex, three-digit short hex and RGB values.<\/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:var(--qt-soft);border:1px solid var(--qt-line);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 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} .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 var(--global-palette7,#EDF2F7);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}}<\/style>\n<div class=\"qt-tool\" id=\"qt-wsc\">\n<div class=\"qt-row\" style=\"margin-top:0;justify-content:space-between\"><span class=\"qt-seg\" role=\"group\" aria-label=\"Show codes as\"><button type=\"button\" data-qt-mode=\"hex\" aria-pressed=\"true\">HEX<\/button><button type=\"button\" data-qt-mode=\"short\" aria-pressed=\"false\">Short HEX<\/button><button type=\"button\" data-qt-mode=\"rgb\" aria-pressed=\"false\">RGB<\/button><\/span><span class=\"qt-status\" id=\"qt-wsc-status\" aria-live=\"polite\" style=\"margin:0\">Click a color to copy its code.<\/span><\/div>\n<div class=\"qt-group\">Red 00 (0)<\/div>\n<div class=\"qt-swatches\"><button type=\"button\" class=\"qt-sw\" style=\"background:#000000;color:#FFFFFF\" data-hex=\"#000000\" title=\"#000000 = rgb(0, 0, 0)\">#000000<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#000033;color:#FFFFFF\" data-hex=\"#000033\" title=\"#000033 = rgb(0, 0, 51)\">#000033<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#000066;color:#FFFFFF\" data-hex=\"#000066\" title=\"#000066 = rgb(0, 0, 102)\">#000066<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#000099;color:#FFFFFF\" data-hex=\"#000099\" title=\"#000099 = rgb(0, 0, 153)\">#000099<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#0000CC;color:#FFFFFF\" data-hex=\"#0000CC\" title=\"#0000CC = rgb(0, 0, 204)\">#0000CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#0000FF;color:#FFFFFF\" data-hex=\"#0000FF\" title=\"#0000FF = rgb(0, 0, 255)\">#0000FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#003300;color:#FFFFFF\" data-hex=\"#003300\" title=\"#003300 = rgb(0, 51, 0)\">#003300<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#003333;color:#FFFFFF\" data-hex=\"#003333\" title=\"#003333 = rgb(0, 51, 51)\">#003333<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#003366;color:#FFFFFF\" data-hex=\"#003366\" title=\"#003366 = rgb(0, 51, 102)\">#003366<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#003399;color:#FFFFFF\" data-hex=\"#003399\" title=\"#003399 = rgb(0, 51, 153)\">#003399<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#0033CC;color:#FFFFFF\" data-hex=\"#0033CC\" title=\"#0033CC = rgb(0, 51, 204)\">#0033CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#0033FF;color:#FFFFFF\" data-hex=\"#0033FF\" title=\"#0033FF = rgb(0, 51, 255)\">#0033FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#006600;color:#FFFFFF\" data-hex=\"#006600\" title=\"#006600 = rgb(0, 102, 0)\">#006600<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#006633;color:#FFFFFF\" data-hex=\"#006633\" title=\"#006633 = rgb(0, 102, 51)\">#006633<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#006666;color:#FFFFFF\" data-hex=\"#006666\" title=\"#006666 = rgb(0, 102, 102)\">#006666<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#006699;color:#FFFFFF\" data-hex=\"#006699\" title=\"#006699 = rgb(0, 102, 153)\">#006699<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#0066CC;color:#FFFFFF\" data-hex=\"#0066CC\" title=\"#0066CC = rgb(0, 102, 204)\">#0066CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#0066FF;color:#FFFFFF\" data-hex=\"#0066FF\" title=\"#0066FF = rgb(0, 102, 255)\">#0066FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#009900;color:#FFFFFF\" data-hex=\"#009900\" title=\"#009900 = rgb(0, 153, 0)\">#009900<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#009933;color:#FFFFFF\" data-hex=\"#009933\" title=\"#009933 = rgb(0, 153, 51)\">#009933<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#009966;color:#FFFFFF\" data-hex=\"#009966\" title=\"#009966 = rgb(0, 153, 102)\">#009966<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#009999;color:#FFFFFF\" data-hex=\"#009999\" title=\"#009999 = rgb(0, 153, 153)\">#009999<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#0099CC;color:#FFFFFF\" data-hex=\"#0099CC\" title=\"#0099CC = rgb(0, 153, 204)\">#0099CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#0099FF;color:#FFFFFF\" data-hex=\"#0099FF\" title=\"#0099FF = rgb(0, 153, 255)\">#0099FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#00CC00;color:#000000\" data-hex=\"#00CC00\" title=\"#00CC00 = rgb(0, 204, 0)\">#00CC00<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#00CC33;color:#000000\" data-hex=\"#00CC33\" title=\"#00CC33 = rgb(0, 204, 51)\">#00CC33<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#00CC66;color:#000000\" data-hex=\"#00CC66\" title=\"#00CC66 = rgb(0, 204, 102)\">#00CC66<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#00CC99;color:#000000\" data-hex=\"#00CC99\" title=\"#00CC99 = rgb(0, 204, 153)\">#00CC99<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#00CCCC;color:#000000\" data-hex=\"#00CCCC\" title=\"#00CCCC = rgb(0, 204, 204)\">#00CCCC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#00CCFF;color:#000000\" data-hex=\"#00CCFF\" title=\"#00CCFF = rgb(0, 204, 255)\">#00CCFF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#00FF00;color:#000000\" data-hex=\"#00FF00\" title=\"#00FF00 = rgb(0, 255, 0)\">#00FF00<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#00FF33;color:#000000\" data-hex=\"#00FF33\" title=\"#00FF33 = rgb(0, 255, 51)\">#00FF33<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#00FF66;color:#000000\" data-hex=\"#00FF66\" title=\"#00FF66 = rgb(0, 255, 102)\">#00FF66<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#00FF99;color:#000000\" data-hex=\"#00FF99\" title=\"#00FF99 = rgb(0, 255, 153)\">#00FF99<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#00FFCC;color:#000000\" data-hex=\"#00FFCC\" title=\"#00FFCC = rgb(0, 255, 204)\">#00FFCC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#00FFFF;color:#000000\" data-hex=\"#00FFFF\" title=\"#00FFFF = rgb(0, 255, 255)\">#00FFFF<\/button><\/div>\n<div class=\"qt-group\">Red 33 (51)<\/div>\n<div class=\"qt-swatches\"><button type=\"button\" class=\"qt-sw\" style=\"background:#330000;color:#FFFFFF\" data-hex=\"#330000\" title=\"#330000 = rgb(51, 0, 0)\">#330000<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#330033;color:#FFFFFF\" data-hex=\"#330033\" title=\"#330033 = rgb(51, 0, 51)\">#330033<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#330066;color:#FFFFFF\" data-hex=\"#330066\" title=\"#330066 = rgb(51, 0, 102)\">#330066<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#330099;color:#FFFFFF\" data-hex=\"#330099\" title=\"#330099 = rgb(51, 0, 153)\">#330099<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#3300CC;color:#FFFFFF\" data-hex=\"#3300CC\" title=\"#3300CC = rgb(51, 0, 204)\">#3300CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#3300FF;color:#FFFFFF\" data-hex=\"#3300FF\" title=\"#3300FF = rgb(51, 0, 255)\">#3300FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#333300;color:#FFFFFF\" data-hex=\"#333300\" title=\"#333300 = rgb(51, 51, 0)\">#333300<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#333333;color:#FFFFFF\" data-hex=\"#333333\" title=\"#333333 = rgb(51, 51, 51)\">#333333<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#333366;color:#FFFFFF\" data-hex=\"#333366\" title=\"#333366 = rgb(51, 51, 102)\">#333366<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#333399;color:#FFFFFF\" data-hex=\"#333399\" title=\"#333399 = rgb(51, 51, 153)\">#333399<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#3333CC;color:#FFFFFF\" data-hex=\"#3333CC\" title=\"#3333CC = rgb(51, 51, 204)\">#3333CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#3333FF;color:#FFFFFF\" data-hex=\"#3333FF\" title=\"#3333FF = rgb(51, 51, 255)\">#3333FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#336600;color:#FFFFFF\" data-hex=\"#336600\" title=\"#336600 = rgb(51, 102, 0)\">#336600<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#336633;color:#FFFFFF\" data-hex=\"#336633\" title=\"#336633 = rgb(51, 102, 51)\">#336633<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#336666;color:#FFFFFF\" data-hex=\"#336666\" title=\"#336666 = rgb(51, 102, 102)\">#336666<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#336699;color:#FFFFFF\" data-hex=\"#336699\" title=\"#336699 = rgb(51, 102, 153)\">#336699<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#3366CC;color:#FFFFFF\" data-hex=\"#3366CC\" title=\"#3366CC = rgb(51, 102, 204)\">#3366CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#3366FF;color:#FFFFFF\" data-hex=\"#3366FF\" title=\"#3366FF = rgb(51, 102, 255)\">#3366FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#339900;color:#FFFFFF\" data-hex=\"#339900\" title=\"#339900 = rgb(51, 153, 0)\">#339900<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#339933;color:#FFFFFF\" data-hex=\"#339933\" title=\"#339933 = rgb(51, 153, 51)\">#339933<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#339966;color:#FFFFFF\" data-hex=\"#339966\" title=\"#339966 = rgb(51, 153, 102)\">#339966<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#339999;color:#FFFFFF\" data-hex=\"#339999\" title=\"#339999 = rgb(51, 153, 153)\">#339999<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#3399CC;color:#FFFFFF\" data-hex=\"#3399CC\" title=\"#3399CC = rgb(51, 153, 204)\">#3399CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#3399FF;color:#FFFFFF\" data-hex=\"#3399FF\" title=\"#3399FF = rgb(51, 153, 255)\">#3399FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#33CC00;color:#000000\" data-hex=\"#33CC00\" title=\"#33CC00 = rgb(51, 204, 0)\">#33CC00<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#33CC33;color:#000000\" data-hex=\"#33CC33\" title=\"#33CC33 = rgb(51, 204, 51)\">#33CC33<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#33CC66;color:#000000\" data-hex=\"#33CC66\" title=\"#33CC66 = rgb(51, 204, 102)\">#33CC66<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#33CC99;color:#000000\" data-hex=\"#33CC99\" title=\"#33CC99 = rgb(51, 204, 153)\">#33CC99<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#33CCCC;color:#000000\" data-hex=\"#33CCCC\" title=\"#33CCCC = rgb(51, 204, 204)\">#33CCCC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#33CCFF;color:#000000\" data-hex=\"#33CCFF\" title=\"#33CCFF = rgb(51, 204, 255)\">#33CCFF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#33FF00;color:#000000\" data-hex=\"#33FF00\" title=\"#33FF00 = rgb(51, 255, 0)\">#33FF00<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#33FF33;color:#000000\" data-hex=\"#33FF33\" title=\"#33FF33 = rgb(51, 255, 51)\">#33FF33<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#33FF66;color:#000000\" data-hex=\"#33FF66\" title=\"#33FF66 = rgb(51, 255, 102)\">#33FF66<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#33FF99;color:#000000\" data-hex=\"#33FF99\" title=\"#33FF99 = rgb(51, 255, 153)\">#33FF99<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#33FFCC;color:#000000\" data-hex=\"#33FFCC\" title=\"#33FFCC = rgb(51, 255, 204)\">#33FFCC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#33FFFF;color:#000000\" data-hex=\"#33FFFF\" title=\"#33FFFF = rgb(51, 255, 255)\">#33FFFF<\/button><\/div>\n<div class=\"qt-group\">Red 66 (102)<\/div>\n<div class=\"qt-swatches\"><button type=\"button\" class=\"qt-sw\" style=\"background:#660000;color:#FFFFFF\" data-hex=\"#660000\" title=\"#660000 = rgb(102, 0, 0)\">#660000<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#660033;color:#FFFFFF\" data-hex=\"#660033\" title=\"#660033 = rgb(102, 0, 51)\">#660033<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#660066;color:#FFFFFF\" data-hex=\"#660066\" title=\"#660066 = rgb(102, 0, 102)\">#660066<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#660099;color:#FFFFFF\" data-hex=\"#660099\" title=\"#660099 = rgb(102, 0, 153)\">#660099<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#6600CC;color:#FFFFFF\" data-hex=\"#6600CC\" title=\"#6600CC = rgb(102, 0, 204)\">#6600CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#6600FF;color:#FFFFFF\" data-hex=\"#6600FF\" title=\"#6600FF = rgb(102, 0, 255)\">#6600FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#663300;color:#FFFFFF\" data-hex=\"#663300\" title=\"#663300 = rgb(102, 51, 0)\">#663300<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#663333;color:#FFFFFF\" data-hex=\"#663333\" title=\"#663333 = rgb(102, 51, 51)\">#663333<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#663366;color:#FFFFFF\" data-hex=\"#663366\" title=\"#663366 = rgb(102, 51, 102)\">#663366<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#663399;color:#FFFFFF\" data-hex=\"#663399\" title=\"#663399 = rgb(102, 51, 153)\">#663399<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#6633CC;color:#FFFFFF\" data-hex=\"#6633CC\" title=\"#6633CC = rgb(102, 51, 204)\">#6633CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#6633FF;color:#FFFFFF\" data-hex=\"#6633FF\" title=\"#6633FF = rgb(102, 51, 255)\">#6633FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#666600;color:#FFFFFF\" data-hex=\"#666600\" title=\"#666600 = rgb(102, 102, 0)\">#666600<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#666633;color:#FFFFFF\" data-hex=\"#666633\" title=\"#666633 = rgb(102, 102, 51)\">#666633<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#666666;color:#FFFFFF\" data-hex=\"#666666\" title=\"#666666 = rgb(102, 102, 102)\">#666666<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#666699;color:#FFFFFF\" data-hex=\"#666699\" title=\"#666699 = rgb(102, 102, 153)\">#666699<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#6666CC;color:#FFFFFF\" data-hex=\"#6666CC\" title=\"#6666CC = rgb(102, 102, 204)\">#6666CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#6666FF;color:#FFFFFF\" data-hex=\"#6666FF\" title=\"#6666FF = rgb(102, 102, 255)\">#6666FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#669900;color:#FFFFFF\" data-hex=\"#669900\" title=\"#669900 = rgb(102, 153, 0)\">#669900<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#669933;color:#FFFFFF\" data-hex=\"#669933\" title=\"#669933 = rgb(102, 153, 51)\">#669933<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#669966;color:#FFFFFF\" data-hex=\"#669966\" title=\"#669966 = rgb(102, 153, 102)\">#669966<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#669999;color:#000000\" data-hex=\"#669999\" title=\"#669999 = rgb(102, 153, 153)\">#669999<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#6699CC;color:#000000\" data-hex=\"#6699CC\" title=\"#6699CC = rgb(102, 153, 204)\">#6699CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#6699FF;color:#000000\" data-hex=\"#6699FF\" title=\"#6699FF = rgb(102, 153, 255)\">#6699FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#66CC00;color:#000000\" data-hex=\"#66CC00\" title=\"#66CC00 = rgb(102, 204, 0)\">#66CC00<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#66CC33;color:#000000\" data-hex=\"#66CC33\" title=\"#66CC33 = rgb(102, 204, 51)\">#66CC33<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#66CC66;color:#000000\" data-hex=\"#66CC66\" title=\"#66CC66 = rgb(102, 204, 102)\">#66CC66<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#66CC99;color:#000000\" data-hex=\"#66CC99\" title=\"#66CC99 = rgb(102, 204, 153)\">#66CC99<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#66CCCC;color:#000000\" data-hex=\"#66CCCC\" title=\"#66CCCC = rgb(102, 204, 204)\">#66CCCC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#66CCFF;color:#000000\" data-hex=\"#66CCFF\" title=\"#66CCFF = rgb(102, 204, 255)\">#66CCFF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#66FF00;color:#000000\" data-hex=\"#66FF00\" title=\"#66FF00 = rgb(102, 255, 0)\">#66FF00<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#66FF33;color:#000000\" data-hex=\"#66FF33\" title=\"#66FF33 = rgb(102, 255, 51)\">#66FF33<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#66FF66;color:#000000\" data-hex=\"#66FF66\" title=\"#66FF66 = rgb(102, 255, 102)\">#66FF66<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#66FF99;color:#000000\" data-hex=\"#66FF99\" title=\"#66FF99 = rgb(102, 255, 153)\">#66FF99<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#66FFCC;color:#000000\" data-hex=\"#66FFCC\" title=\"#66FFCC = rgb(102, 255, 204)\">#66FFCC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#66FFFF;color:#000000\" data-hex=\"#66FFFF\" title=\"#66FFFF = rgb(102, 255, 255)\">#66FFFF<\/button><\/div>\n<div class=\"qt-group\">Red 99 (153)<\/div>\n<div class=\"qt-swatches\"><button type=\"button\" class=\"qt-sw\" style=\"background:#990000;color:#FFFFFF\" data-hex=\"#990000\" title=\"#990000 = rgb(153, 0, 0)\">#990000<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#990033;color:#FFFFFF\" data-hex=\"#990033\" title=\"#990033 = rgb(153, 0, 51)\">#990033<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#990066;color:#FFFFFF\" data-hex=\"#990066\" title=\"#990066 = rgb(153, 0, 102)\">#990066<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#990099;color:#FFFFFF\" data-hex=\"#990099\" title=\"#990099 = rgb(153, 0, 153)\">#990099<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#9900CC;color:#FFFFFF\" data-hex=\"#9900CC\" title=\"#9900CC = rgb(153, 0, 204)\">#9900CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#9900FF;color:#FFFFFF\" data-hex=\"#9900FF\" title=\"#9900FF = rgb(153, 0, 255)\">#9900FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#993300;color:#FFFFFF\" data-hex=\"#993300\" title=\"#993300 = rgb(153, 51, 0)\">#993300<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#993333;color:#FFFFFF\" data-hex=\"#993333\" title=\"#993333 = rgb(153, 51, 51)\">#993333<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#993366;color:#FFFFFF\" data-hex=\"#993366\" title=\"#993366 = rgb(153, 51, 102)\">#993366<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#993399;color:#FFFFFF\" data-hex=\"#993399\" title=\"#993399 = rgb(153, 51, 153)\">#993399<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#9933CC;color:#FFFFFF\" data-hex=\"#9933CC\" title=\"#9933CC = rgb(153, 51, 204)\">#9933CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#9933FF;color:#FFFFFF\" data-hex=\"#9933FF\" title=\"#9933FF = rgb(153, 51, 255)\">#9933FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#996600;color:#FFFFFF\" data-hex=\"#996600\" title=\"#996600 = rgb(153, 102, 0)\">#996600<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#996633;color:#FFFFFF\" data-hex=\"#996633\" title=\"#996633 = rgb(153, 102, 51)\">#996633<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#996666;color:#FFFFFF\" data-hex=\"#996666\" title=\"#996666 = rgb(153, 102, 102)\">#996666<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#996699;color:#FFFFFF\" data-hex=\"#996699\" title=\"#996699 = rgb(153, 102, 153)\">#996699<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#9966CC;color:#FFFFFF\" data-hex=\"#9966CC\" title=\"#9966CC = rgb(153, 102, 204)\">#9966CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#9966FF;color:#FFFFFF\" data-hex=\"#9966FF\" title=\"#9966FF = rgb(153, 102, 255)\">#9966FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#999900;color:#000000\" data-hex=\"#999900\" title=\"#999900 = rgb(153, 153, 0)\">#999900<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#999933;color:#000000\" data-hex=\"#999933\" title=\"#999933 = rgb(153, 153, 51)\">#999933<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#999966;color:#000000\" data-hex=\"#999966\" title=\"#999966 = rgb(153, 153, 102)\">#999966<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#999999;color:#000000\" data-hex=\"#999999\" title=\"#999999 = rgb(153, 153, 153)\">#999999<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#9999CC;color:#000000\" data-hex=\"#9999CC\" title=\"#9999CC = rgb(153, 153, 204)\">#9999CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#9999FF;color:#000000\" data-hex=\"#9999FF\" title=\"#9999FF = rgb(153, 153, 255)\">#9999FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#99CC00;color:#000000\" data-hex=\"#99CC00\" title=\"#99CC00 = rgb(153, 204, 0)\">#99CC00<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#99CC33;color:#000000\" data-hex=\"#99CC33\" title=\"#99CC33 = rgb(153, 204, 51)\">#99CC33<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#99CC66;color:#000000\" data-hex=\"#99CC66\" title=\"#99CC66 = rgb(153, 204, 102)\">#99CC66<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#99CC99;color:#000000\" data-hex=\"#99CC99\" title=\"#99CC99 = rgb(153, 204, 153)\">#99CC99<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#99CCCC;color:#000000\" data-hex=\"#99CCCC\" title=\"#99CCCC = rgb(153, 204, 204)\">#99CCCC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#99CCFF;color:#000000\" data-hex=\"#99CCFF\" title=\"#99CCFF = rgb(153, 204, 255)\">#99CCFF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#99FF00;color:#000000\" data-hex=\"#99FF00\" title=\"#99FF00 = rgb(153, 255, 0)\">#99FF00<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#99FF33;color:#000000\" data-hex=\"#99FF33\" title=\"#99FF33 = rgb(153, 255, 51)\">#99FF33<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#99FF66;color:#000000\" data-hex=\"#99FF66\" title=\"#99FF66 = rgb(153, 255, 102)\">#99FF66<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#99FF99;color:#000000\" data-hex=\"#99FF99\" title=\"#99FF99 = rgb(153, 255, 153)\">#99FF99<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#99FFCC;color:#000000\" data-hex=\"#99FFCC\" title=\"#99FFCC = rgb(153, 255, 204)\">#99FFCC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#99FFFF;color:#000000\" data-hex=\"#99FFFF\" title=\"#99FFFF = rgb(153, 255, 255)\">#99FFFF<\/button><\/div>\n<div class=\"qt-group\">Red CC (204)<\/div>\n<div class=\"qt-swatches\"><button type=\"button\" class=\"qt-sw\" style=\"background:#CC0000;color:#FFFFFF\" data-hex=\"#CC0000\" title=\"#CC0000 = rgb(204, 0, 0)\">#CC0000<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC0033;color:#FFFFFF\" data-hex=\"#CC0033\" title=\"#CC0033 = rgb(204, 0, 51)\">#CC0033<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC0066;color:#FFFFFF\" data-hex=\"#CC0066\" title=\"#CC0066 = rgb(204, 0, 102)\">#CC0066<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC0099;color:#FFFFFF\" data-hex=\"#CC0099\" title=\"#CC0099 = rgb(204, 0, 153)\">#CC0099<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC00CC;color:#FFFFFF\" data-hex=\"#CC00CC\" title=\"#CC00CC = rgb(204, 0, 204)\">#CC00CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC00FF;color:#FFFFFF\" data-hex=\"#CC00FF\" title=\"#CC00FF = rgb(204, 0, 255)\">#CC00FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC3300;color:#FFFFFF\" data-hex=\"#CC3300\" title=\"#CC3300 = rgb(204, 51, 0)\">#CC3300<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC3333;color:#FFFFFF\" data-hex=\"#CC3333\" title=\"#CC3333 = rgb(204, 51, 51)\">#CC3333<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC3366;color:#FFFFFF\" data-hex=\"#CC3366\" title=\"#CC3366 = rgb(204, 51, 102)\">#CC3366<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC3399;color:#FFFFFF\" data-hex=\"#CC3399\" title=\"#CC3399 = rgb(204, 51, 153)\">#CC3399<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC33CC;color:#FFFFFF\" data-hex=\"#CC33CC\" title=\"#CC33CC = rgb(204, 51, 204)\">#CC33CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC33FF;color:#FFFFFF\" data-hex=\"#CC33FF\" title=\"#CC33FF = rgb(204, 51, 255)\">#CC33FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC6600;color:#FFFFFF\" data-hex=\"#CC6600\" title=\"#CC6600 = rgb(204, 102, 0)\">#CC6600<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC6633;color:#FFFFFF\" data-hex=\"#CC6633\" title=\"#CC6633 = rgb(204, 102, 51)\">#CC6633<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC6666;color:#FFFFFF\" data-hex=\"#CC6666\" title=\"#CC6666 = rgb(204, 102, 102)\">#CC6666<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC6699;color:#FFFFFF\" data-hex=\"#CC6699\" title=\"#CC6699 = rgb(204, 102, 153)\">#CC6699<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC66CC;color:#FFFFFF\" data-hex=\"#CC66CC\" title=\"#CC66CC = rgb(204, 102, 204)\">#CC66CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC66FF;color:#FFFFFF\" data-hex=\"#CC66FF\" title=\"#CC66FF = rgb(204, 102, 255)\">#CC66FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC9900;color:#000000\" data-hex=\"#CC9900\" title=\"#CC9900 = rgb(204, 153, 0)\">#CC9900<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC9933;color:#000000\" data-hex=\"#CC9933\" title=\"#CC9933 = rgb(204, 153, 51)\">#CC9933<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC9966;color:#000000\" data-hex=\"#CC9966\" title=\"#CC9966 = rgb(204, 153, 102)\">#CC9966<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC9999;color:#000000\" data-hex=\"#CC9999\" title=\"#CC9999 = rgb(204, 153, 153)\">#CC9999<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC99CC;color:#000000\" data-hex=\"#CC99CC\" title=\"#CC99CC = rgb(204, 153, 204)\">#CC99CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CC99FF;color:#000000\" data-hex=\"#CC99FF\" title=\"#CC99FF = rgb(204, 153, 255)\">#CC99FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CCCC00;color:#000000\" data-hex=\"#CCCC00\" title=\"#CCCC00 = rgb(204, 204, 0)\">#CCCC00<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CCCC33;color:#000000\" data-hex=\"#CCCC33\" title=\"#CCCC33 = rgb(204, 204, 51)\">#CCCC33<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CCCC66;color:#000000\" data-hex=\"#CCCC66\" title=\"#CCCC66 = rgb(204, 204, 102)\">#CCCC66<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CCCC99;color:#000000\" data-hex=\"#CCCC99\" title=\"#CCCC99 = rgb(204, 204, 153)\">#CCCC99<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CCCCCC;color:#000000\" data-hex=\"#CCCCCC\" title=\"#CCCCCC = rgb(204, 204, 204)\">#CCCCCC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CCCCFF;color:#000000\" data-hex=\"#CCCCFF\" title=\"#CCCCFF = rgb(204, 204, 255)\">#CCCCFF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CCFF00;color:#000000\" data-hex=\"#CCFF00\" title=\"#CCFF00 = rgb(204, 255, 0)\">#CCFF00<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CCFF33;color:#000000\" data-hex=\"#CCFF33\" title=\"#CCFF33 = rgb(204, 255, 51)\">#CCFF33<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CCFF66;color:#000000\" data-hex=\"#CCFF66\" title=\"#CCFF66 = rgb(204, 255, 102)\">#CCFF66<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CCFF99;color:#000000\" data-hex=\"#CCFF99\" title=\"#CCFF99 = rgb(204, 255, 153)\">#CCFF99<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CCFFCC;color:#000000\" data-hex=\"#CCFFCC\" title=\"#CCFFCC = rgb(204, 255, 204)\">#CCFFCC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#CCFFFF;color:#000000\" data-hex=\"#CCFFFF\" title=\"#CCFFFF = rgb(204, 255, 255)\">#CCFFFF<\/button><\/div>\n<div class=\"qt-group\">Red FF (255)<\/div>\n<div class=\"qt-swatches\"><button type=\"button\" class=\"qt-sw\" style=\"background:#FF0000;color:#FFFFFF\" data-hex=\"#FF0000\" title=\"#FF0000 = rgb(255, 0, 0)\">#FF0000<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF0033;color:#FFFFFF\" data-hex=\"#FF0033\" title=\"#FF0033 = rgb(255, 0, 51)\">#FF0033<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF0066;color:#FFFFFF\" data-hex=\"#FF0066\" title=\"#FF0066 = rgb(255, 0, 102)\">#FF0066<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF0099;color:#FFFFFF\" data-hex=\"#FF0099\" title=\"#FF0099 = rgb(255, 0, 153)\">#FF0099<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF00CC;color:#FFFFFF\" data-hex=\"#FF00CC\" title=\"#FF00CC = rgb(255, 0, 204)\">#FF00CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF00FF;color:#FFFFFF\" data-hex=\"#FF00FF\" title=\"#FF00FF = rgb(255, 0, 255)\">#FF00FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF3300;color:#FFFFFF\" data-hex=\"#FF3300\" title=\"#FF3300 = rgb(255, 51, 0)\">#FF3300<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF3333;color:#FFFFFF\" data-hex=\"#FF3333\" title=\"#FF3333 = rgb(255, 51, 51)\">#FF3333<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF3366;color:#FFFFFF\" data-hex=\"#FF3366\" title=\"#FF3366 = rgb(255, 51, 102)\">#FF3366<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF3399;color:#FFFFFF\" data-hex=\"#FF3399\" title=\"#FF3399 = rgb(255, 51, 153)\">#FF3399<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF33CC;color:#FFFFFF\" data-hex=\"#FF33CC\" title=\"#FF33CC = rgb(255, 51, 204)\">#FF33CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF33FF;color:#FFFFFF\" data-hex=\"#FF33FF\" title=\"#FF33FF = rgb(255, 51, 255)\">#FF33FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF6600;color:#FFFFFF\" data-hex=\"#FF6600\" title=\"#FF6600 = rgb(255, 102, 0)\">#FF6600<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF6633;color:#FFFFFF\" data-hex=\"#FF6633\" title=\"#FF6633 = rgb(255, 102, 51)\">#FF6633<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF6666;color:#FFFFFF\" data-hex=\"#FF6666\" title=\"#FF6666 = rgb(255, 102, 102)\">#FF6666<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF6699;color:#FFFFFF\" data-hex=\"#FF6699\" title=\"#FF6699 = rgb(255, 102, 153)\">#FF6699<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF66CC;color:#000000\" data-hex=\"#FF66CC\" title=\"#FF66CC = rgb(255, 102, 204)\">#FF66CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF66FF;color:#000000\" data-hex=\"#FF66FF\" title=\"#FF66FF = rgb(255, 102, 255)\">#FF66FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF9900;color:#000000\" data-hex=\"#FF9900\" title=\"#FF9900 = rgb(255, 153, 0)\">#FF9900<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF9933;color:#000000\" data-hex=\"#FF9933\" title=\"#FF9933 = rgb(255, 153, 51)\">#FF9933<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF9966;color:#000000\" data-hex=\"#FF9966\" title=\"#FF9966 = rgb(255, 153, 102)\">#FF9966<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF9999;color:#000000\" data-hex=\"#FF9999\" title=\"#FF9999 = rgb(255, 153, 153)\">#FF9999<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF99CC;color:#000000\" data-hex=\"#FF99CC\" title=\"#FF99CC = rgb(255, 153, 204)\">#FF99CC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FF99FF;color:#000000\" data-hex=\"#FF99FF\" title=\"#FF99FF = rgb(255, 153, 255)\">#FF99FF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FFCC00;color:#000000\" data-hex=\"#FFCC00\" title=\"#FFCC00 = rgb(255, 204, 0)\">#FFCC00<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FFCC33;color:#000000\" data-hex=\"#FFCC33\" title=\"#FFCC33 = rgb(255, 204, 51)\">#FFCC33<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FFCC66;color:#000000\" data-hex=\"#FFCC66\" title=\"#FFCC66 = rgb(255, 204, 102)\">#FFCC66<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FFCC99;color:#000000\" data-hex=\"#FFCC99\" title=\"#FFCC99 = rgb(255, 204, 153)\">#FFCC99<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FFCCCC;color:#000000\" data-hex=\"#FFCCCC\" title=\"#FFCCCC = rgb(255, 204, 204)\">#FFCCCC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FFCCFF;color:#000000\" data-hex=\"#FFCCFF\" title=\"#FFCCFF = rgb(255, 204, 255)\">#FFCCFF<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FFFF00;color:#000000\" data-hex=\"#FFFF00\" title=\"#FFFF00 = rgb(255, 255, 0)\">#FFFF00<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FFFF33;color:#000000\" data-hex=\"#FFFF33\" title=\"#FFFF33 = rgb(255, 255, 51)\">#FFFF33<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FFFF66;color:#000000\" data-hex=\"#FFFF66\" title=\"#FFFF66 = rgb(255, 255, 102)\">#FFFF66<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FFFF99;color:#000000\" data-hex=\"#FFFF99\" title=\"#FFFF99 = rgb(255, 255, 153)\">#FFFF99<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FFFFCC;color:#000000\" data-hex=\"#FFFFCC\" title=\"#FFFFCC = rgb(255, 255, 204)\">#FFFFCC<\/button><button type=\"button\" class=\"qt-sw\" style=\"background:#FFFFFF;color:#000000\" data-hex=\"#FFFFFF\" title=\"#FFFFFF = rgb(255, 255, 255)\">#FFFFFF<\/button><\/div>\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 wrap = document.getElementById('qt-wsc'); if (!wrap) { return; } var status = document.getElementById('qt-wsc-status'); var buttons = wrap.querySelectorAll('.qt-sw'); var mode = 'hex'; function label(b) { var hex = b.getAttribute('data-hex'); if (mode === 'short') { return '#' + hex.charAt(1) + hex.charAt(3) + hex.charAt(5); } if (mode === 'rgb') { return parseInt(hex.substr(1, 2), 16) + ',' + parseInt(hex.substr(3, 2), 16) + ',' + parseInt(hex.substr(5, 2), 16); } return hex; } function copyValue(b) { var hex = b.getAttribute('data-hex'); if (mode === 'rgb') { return 'rgb(' + label(b).split(',').join(', ') + ')'; } if (mode === 'short') { return label(b); } return hex; } wrap.addEventListener('click', function (e) { var b = e.target.closest ? e.target.closest('.qt-sw') : null; if (!b) { return; } var v = copyValue(b); qtCopy(v, status, 'Copied ' + v); }); Array.prototype.forEach.call(wrap.querySelectorAll('[data-qt-mode]'), function (btn) { btn.addEventListener('click', function () { mode = btn.getAttribute('data-qt-mode'); Array.prototype.forEach.call(wrap.querySelectorAll('[data-qt-mode]'), function (o) { o.setAttribute('aria-pressed', o === btn ? 'true' : 'false'); }); Array.prototype.forEach.call(buttons, function (b) { b.textContent = label(b); }); status.textContent = ''; }); }); }); })();<\/script><\/p>\n<p><strong>Quick answer:<\/strong> The 216 web safe colors are every combination of the six values 00, 33, 66, 99, CC and FF for red, green and blue, for example #3366CC or #FF9900. Click any color in the chart above to copy its hex code.<\/p>\n<h2>What are web safe colors?<\/h2>\n<p>In the mid-1990s, many computers could only show 256 colors at once. Browsers on those screens reserved some colors for the operating system and used a fixed palette of 216 colors that looked the same on Windows and Mac. Colors outside that palette were dithered into a speckled pattern, so designers stuck to the 216 &#8220;safe&#8221; ones.<\/p>\n<p>The palette is easy to remember. Each of the red, green and blue channels can only take six values:<\/p>\n<ul>\n<li><strong>00<\/strong> = 0<\/li>\n<li><strong>33<\/strong> = 51<\/li>\n<li><strong>66<\/strong> = 102<\/li>\n<li><strong>99<\/strong> = 153<\/li>\n<li><strong>CC<\/strong> = 204<\/li>\n<li><strong>FF<\/strong> = 255<\/li>\n<\/ul>\n<p>Six values for each of three channels gives 6 &times; 6 &times; 6 = 216 colors. The chart above groups them by their red value. Within each group, every row is one green value, and blue increases from left to right.<\/p>\n<h2>Do you still need web safe colors in 2026?<\/h2>\n<p>No. Every phone, laptop and monitor today shows millions of colors, so any hex code displays correctly. The web safe color palette is still useful as:<\/p>\n<ul>\n<li>A simple, evenly spaced starting palette for quick mock-ups, charts and diagrams.<\/li>\n<li>A source of short codes. Because each pair repeats a digit, every web safe color has a three-digit <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/hex-color\" target=\"_blank\" rel=\"noopener\">CSS hex shorthand<\/a>: #3366CC can be written #36C.<\/li>\n<li>A reference when maintaining old websites, email templates and legacy software that still use the palette.<\/li>\n<\/ul>\n<p>Pair your colors with fonts that work everywhere: see our <a href=\"https:\/\/www.quickonlinetips.com\/archives\/web-safe-fonts-list\/\">web safe fonts list<\/a>. To pick colors from any web page or image, try one of these <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2006\/02\/free-eyedroppers-color-pickers-for-web-developers\/\">free color picker tools<\/a>.<\/p>\n<h2>How to use these colors in CSS<\/h2>\n<ol>\n<li>Click a swatch to copy its code.<\/li>\n<li>Paste it into your stylesheet, for example <code>color: #336699;<\/code> or <code>background: #FFCC00;<\/code>.<\/li>\n<li>Switch to <strong>RGB<\/strong> if you need the <code>rgb(51, 102, 153)<\/code> format, for example to add transparency with <code>rgb(51 102 153 \/ 50%)<\/code>.<\/li>\n<\/ol>\n<h2>FAQ<\/h2>\n<h3>How many web safe colors are there?<\/h3>\n<p>There are 216. Some lists show 252 or more because they repeat colors, but only 216 unique combinations exist.<\/p>\n<h3>Is black a web safe color?<\/h3>\n<p>Yes. Black (#000000) and white (#FFFFFF) are both in the palette, along with four grays: #333333, #666666, #999999 and #CCCCCC.<\/p>\n<h3>Are web safe colors good for accessibility?<\/h3>\n<p>Not automatically. Accessibility depends on the contrast between text and background, not on the palette. Check pairs with a contrast checker; dark text on #FFFFCC or white text on #003366 both work well.<\/p>\n<h3>What is the difference between hex and short hex?<\/h3>\n<p>Short hex writes each pair as one digit, so #FF9900 becomes #F90. It only works when both digits in each pair are the same, which is true for every web safe color.<\/p>\n<h2>More free tools<\/h2>\n<div class=\"qt-cards\"><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/binary-translator\/\"><strong>Binary Translator<\/strong><span>Convert text to binary code and binary back to text.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/word-counter\/\"><strong>Word Counter<\/strong><span>Count words, characters, sentences and reading time.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/remove-blank-lines\/\"><strong>Remove Blank Lines<\/strong><span>Delete empty lines, strip HTML tags and duplicate lines.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/random-number-generator\/\"><strong>Random Number Generator<\/strong><span>Pick random numbers in any range, with no repeats.<\/span><\/a><a class=\"qt-card\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/dice-roller\/\"><strong>Dice Roller<\/strong><span>Roll D6, D20 and other virtual dice for games.<\/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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is the complete chart of web safe colors: all 216 colors, each with its hex code. Click any swatch to copy the code for your CSS or design tool, and use the buttons to switch between six-digit hex, three-digit short hex and RGB values. HEXShort HEXRGBClick a color to copy its code. Red 00&#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-65603","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/65603","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=65603"}],"version-history":[{"count":3,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/65603\/revisions"}],"predecessor-version":[{"id":65643,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/65603\/revisions\/65643"}],"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=65603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}