HTML의 색상: 색상을 작성하는 모든 방법 및 대비를 확인하는 방법

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>One colour, six spellings</title>
<style>
  body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; background: #f6f7f9; color: #1d2330; }
  h2 { font-size: 15px; margin: 0 0 10px; }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .chip { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
  .chip div { height: 44px; }
  .chip code { display: block; padding: 7px 9px; font-size: 13px; }
  .try { margin-top: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  input { font: 15px ui-monospace, Consolas, monospace; padding: 8px 10px; border: 1px solid #c9ced8; border-radius: 8px; width: 210px; }
  #swatch { width: 48px; height: 38px; border-radius: 8px; border: 1px solid #c9ced8; }
  #out { font-size: 13px; line-height: 1.5; margin-top: 8px; }
</style>
</head>
<body>
<h2>Six ways to write the same purple</h2>
<div class="grid">
  <div class="chip"><div style="background: rebeccapurple"></div><code>rebeccapurple</code></div>
  <div class="chip"><div style="background: #639"></div><code>#639</code></div>
  <div class="chip"><div style="background: #663399"></div><code>#663399</code></div>
  <div class="chip"><div style="background: rgb(102 51 153)"></div><code>rgb(102 51 153)</code></div>
  <div class="chip"><div style="background: hsl(270 50% 40%)"></div><code>hsl(270 50% 40%)</code></div>
  <div class="chip"><div style="background: oklch(44% 0.16 303.4)"></div><code>oklch(44% 0.16 303.4)</code></div>
</div>

<div class="try">
  <input id="val" value="tomato" aria-label="Any CSS colour" spellcheck="false">
  <div id="swatch"></div>
</div>
<div id="out"></div>

<script>
  const val = document.getElementById('val');
  const swatch = document.getElementById('swatch');
  const out = document.getElementById('out');

  function show() {
    const v = val.value.trim();
    // CSS.supports answers: would the browser accept this as a colour?
    if (!CSS.supports('color', v)) {
      out.textContent = 'Not a valid colour. The browser would drop this declaration.';
      swatch.style.background = 'none';
      return;
    }
    swatch.style.background = v;
    // getComputedStyle shows the value the browser actually uses
    out.textContent = 'The browser reads it as: ' + getComputedStyle(swatch).backgroundColor;
  }

  val.addEventListener('input', show);
  show();
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Transparent colours</title>
<style>
  body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; color: #1d2330; background: #fff; }
  .controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; }
  input[type=range] { width: 170px; }
  /* a striped backdrop so see-through colour is visible */
  .stage {
    margin-top: 12px; padding: 14px; border-radius: 12px; display: grid;
    grid-template-columns: 1fr 1fr; gap: 12px;
    background: repeating-linear-gradient(45deg, #ffd166 0 14px, #06d6a0 14px 28px);
  }
  .box { padding: 16px 12px; border-radius: 10px; font-weight: 600; font-size: 14px; color: #111; }
  .box small { display: block; font-weight: 400; margin-top: 4px; }
  #codes { margin-top: 12px; font: 13px/1.7 ui-monospace, Consolas, monospace; }
</style>
</head>
<body>
<div class="controls">
  <label>Colour <input type="color" id="pick" value="#1e90ff"></label>
  <label>Alpha <input type="range" id="alpha" min="0" max="100" value="50"></label>
  <span id="pct"></span>
</div>

<div class="stage">
  <div class="box" id="a">Alpha in the colour<small>Text stays solid</small></div>
  <div class="box" id="b">opacity on the box<small>Text fades too</small></div>
</div>

<div id="codes"></div>

<script>
  const pick = document.getElementById('pick');
  const alpha = document.getElementById('alpha');

  function update() {
    const hex = pick.value;                 // always "#rrggbb"
    const a = alpha.value / 100;
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    const aa = Math.round(a * 255).toString(16).padStart(2, '0');

    // Left: only the background colour is see-through
    document.getElementById('a').style.background = `rgb(${r} ${g} ${b} / ${a})`;
    // Right: a solid colour, but the whole box (text included) fades
    const boxB = document.getElementById('b');
    boxB.style.background = hex;
    boxB.style.opacity = a;

    document.getElementById('pct').textContent = alpha.value + '%';
    document.getElementById('codes').innerHTML =
      `${hex}${aa}<br>rgb(${r} ${g} ${b} / ${alpha.value}%)<br>rgba(${r}, ${g}, ${b}, ${a})`;
  }

  pick.addEventListener('input', update);
  alpha.addEventListener('input', update);
  update();
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contrast ratio calculator</title>
<style>
  body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; color: #1d2330; background: #f6f7f9; }
  .row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
  .row span { width: 90px; font-size: 14px; }
  .row input[type=text] { font: 14px ui-monospace, Consolas, monospace; padding: 7px 9px; border: 1px solid #c9ced8; border-radius: 8px; width: 170px; }
  .row input[type=color] { width: 44px; height: 34px; padding: 0; border: 1px solid #c9ced8; border-radius: 6px; }
  button { font: inherit; font-size: 14px; padding: 7px 12px; border-radius: 8px; border: 1px solid #c9ced8; background: #fff; cursor: pointer; }
  #preview { margin: 10px 0; padding: 14px 16px; border-radius: 12px; border: 1px solid #d5d9e0; }
  #preview p { margin: 0 0 6px; font-size: 16px; }
  #preview .big { font-size: 24px; margin: 0; }
  #ratio { font-size: 30px; font-weight: 700; }
  table { border-collapse: collapse; margin-top: 8px; font-size: 14px; width: 100%; max-width: 420px; background: #fff; }
  td, th { border: 1px solid #e1e4ea; padding: 6px 8px; text-align: left; }
  .pass { color: #0f5132; font-weight: 700; }
  .fail { color: #9a3412; font-weight: 700; }
</style>
</head>
<body>
<div class="row"><span>Text</span><input type="text" id="fgText" value="#767676" spellcheck="false"><input type="color" id="fgPick"></div>
<div class="row"><span>Background</span><input type="text" id="bgText" value="#ffffff" spellcheck="false"><input type="color" id="bgPick"><button id="swap">Swap</button></div>

<div id="preview">
  <p>Body text at 16px. Can you read this comfortably?</p>
  <p class="big">Large text at 24px</p>
</div>

<div>Contrast ratio: <span id="ratio"></span></div>
<table>
  <tr><th>Check</th><th>Needs</th><th>Result</th></tr>
  <tr><td>AA, normal text</td><td>4.5:1</td><td id="aa"></td></tr>
  <tr><td>AA, large text</td><td>3:1</td><td id="aaL"></td></tr>
  <tr><td>AAA, normal text</td><td>7:1</td><td id="aaa"></td></tr>
  <tr><td>AAA, large text</td><td>4.5:1</td><td id="aaaL"></td></tr>
</table>

<script>
  const $ = (id) => document.getElementById(id);

  // A 1x1 canvas turns any CSS colour (name, hex, hsl, oklch...) into sRGB pixels.
  const ctx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
  function paint(color) {
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, 1, 1);
    return ctx.getImageData(0, 0, 1, 1).data;  // [r, g, b, a]
  }

  // WCAG relative luminance
  function luminance([r, g, b]) {
    const lin = (c) => { c /= 255; return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4; };
    return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
  }
  const toHex = (p) => '#' + [p[0], p[1], p[2]].map((n) => n.toString(16).padStart(2, '0')).join('');

  function update() {
    const fg = $('fgText').value.trim(), bg = $('bgText').value.trim();
    if (!CSS.supports('color', fg) || !CSS.supports('color', bg)) {
      $('ratio').textContent = 'enter two valid colours';
      return;
    }
    // Paint white, then the background, then the text colour on top,
    // so see-through colours are measured the way they would show.
    ctx.clearRect(0, 0, 1, 1);
    paint('#fff');
    const bgPx = paint(bg);
    const fgPx = paint(fg);

    const L1 = luminance(fgPx), L2 = luminance(bgPx);
    const ratio = (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);

    $('preview').style.color = fg;
    $('preview').style.background = bg;
    $('fgPick').value = toHex(fgPx);
    $('bgPick').value = toHex(bgPx);
    // Round down, so 4.499 never shows as a pass
    $('ratio').textContent = (Math.floor(ratio * 100) / 100).toFixed(2) + ':1';

    const mark = (id, need) => {
      const ok = ratio >= need;
      $(id).textContent = ok ? 'Pass' : 'Fail';
      $(id).className = ok ? 'pass' : 'fail';
    };
    mark('aa', 4.5); mark('aaL', 3); mark('aaa', 7); mark('aaaL', 4.5);
  }

  $('fgText').addEventListener('input', update);
  $('bgText').addEventListener('input', update);
  $('fgPick').addEventListener('input', () => { $('fgText').value = $('fgPick').value; update(); });
  $('bgPick').addEventListener('input', () => { $('bgText').value = $('bgPick').value; update(); });
  $('swap').addEventListener('click', () => {
    [$('fgText').value, $('bgText').value] = [$('bgText').value, $('fgText').value];
    update();
  });
  update();
</script>
</body>
</html>