GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

컬러피커 UI 디자인 9종 — 휠부터 최근 색상까지

· Godrich · 9종 · 13분 읽기

입력 UI바닐라 JS스크롤폼·입력

선택 지점의 각도가 색상값으로 다시 계산되고, 스와치 밝기 값에 따라 체크 아이콘 색이 뒤바뀌고, 최근 색상 사이 거리가 계산되어 가까운 색끼리 합쳐지는 컬러피커 UI 9종입니다. 아홉 화면 전부 속성 값 바꾸기로 끝나지 않고 각도·밝기·거리를 직접 계산해 화면을 다시 그립니다.

iOS 휠 — 선택 지점의 각도를 색조로 다시 구하는 원형 컬러피커01 color-picker-ios-wheel Material 슬라이더 — 세 손잡이 위치를 합쳐 미리보기 색을 계산하는 컬러피커02 color-picker-material-slider Windows 스펙트럼 — 2차원 위치를 채도·명도로 나눠 구하는 컬러피커03 color-picker-windows-spectrum macOS 크레용 — 밝기 값으로 테두리 색을 정하는 격자형 컬러피커04 color-picker-macos-crayon Figma 패널 — 세 표기법을 서로 맞춰 다시 구하는 컬러피커05 color-picker-figma-panel HSL 슬라이더 — 색조 값에 따라 트랙 그라디언트를 다시 그리는 컬러피커06 color-picker-hsl-sliders 스와치 칩 — 밝기 값으로 체크 아이콘 대비를 맞추는 컬러피커07 color-picker-swatch-chips 스포이드 — 추출된 색의 밝기로 미리보기를 다시 구하는 컬러피커08 color-picker-eyedropper 최근 색상 — 색상 간 거리를 계산해 가까운 색을 합치는 목록형 컬러피커09 color-picker-recent-colors

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

데모

아홉 화면은 같은 뼈대로 돌아갑니다. requestAnimationFrame 루프가 고정된 시간값을 흘려보내고 각 화면의 apply 함수가 그 시간값을 자기 방식의 계산으로 바꿔 화면에 다시 씁니다. 사람이 색을 고르는 흐름을 시간값이 대신 걷는 자동 시연이라서, 어떤 값이 어느 계산으로 들어가 화면에 나오는지 줄 단위로 따라갈 수 있습니다. 이런 자동 시연 묶음을 한 곳에서 훑어보고 싶을 때 이 컬러피커 사이트의 격자 카드를 열어 두면 아홉 화면이 한눈에 들어옵니다.

실측 한눈에

항목 초점 누적면적 % 강도 평균 움직인 프레임
01 iOS 휠 각도 → 색조 8.494 88.7 23
02 Material 슬라이더 세 값 합성 17.368 72.3 23
03 Windows 스펙트럼 2차원 → 채도·명도 15.937 38.1 23
04 macOS 크레용 휘도 → 테두리 14.251 56.6 23
05 Figma 패널 세 표기 동기 10.797 42.9 23
06 HSL 슬라이더 그라디언트 재계산 15.53 44.5 23
07 스와치 칩 밝기 → 체크 대비 9.408 116.1 7
08 스포이드 픽셀 샘플링 8.365 98.7 23
09 최근 색상 거리 → 병합 13.808 45.6 23

움직인 프레임의 분모는 23 입니다. 프레임이 24장 캡처되면 프레임 사이 변화량은 23개라서 23 이 최대치입니다. 07 스와치 칩만 7 인데, ORDER 순회가 칩 사이를 옮겨가는 구간과 선택이 한 칩에 머무는 구간을 이어 붙이기 때문입니다. 머무는 구간에는 화면 차이가 잦아들어 계측상 정지로 잡히는데, 시나리오 자체에 들어 있는 정지 구간이지 프레임이 빠진 것이 아닙니다. 누적면적이 8~9% 대인 01 휠과 08 스포이드는 대신 강도 평균이 88.7·98.7 로 높아서 움직이는 범위는 좁아도 그 지점의 변화는 또렷합니다.

컬러피커 UI 의 해부 — 아홉 화면이 계산하는 것

각도를 색조로 바꾸는 축

01 휠은 선택 지점의 방향을 Math.atan2 로 재서 0~360 도 사이의 색조로 되돌립니다. 중심에서의 거리는 반지름으로 나눠 채도가 되므로 같은 원형 안에서 색의 종류와 진하기가 한 번에 정해집니다. 06 슬라이더는 같은 색조값을 손잡이 위치와 트랙 그라디언트 양쪽에 다시 반영해 값이 바뀔 때마다 배경 스케일이 따라 옮겨집니다.

밝기가 글자색을 고르는 축

04 크레용과 07 스와치 칩은 가진 색의 RGB 에 299·587·114 가중치를 곱한 밝기 공식으로 흰 체크를 쓸지 검은 체크를 쓸지 판정합니다. 08 스포이드는 뽑아 온 색의 밝기를 글자색뿐 아니라 미리보기 테두리 두께에까지 이어 붙입니다. 색이 바뀔 때마다 대비가 같이 계산되므로 어떤 색 위에서도 표시가 묻히지 않습니다.

거리가 목록을 줄이는 축

09 최근 색상은 색마다 RGB 세 축의 유클리드 거리를 재서 기준값보다 가까운 색끼리 한 그룹으로 묶습니다. 선택 이력이 쌓여도 비슷한 색이 하나로 합쳐지므로 목록이 같은 색으로 늘어나지 않습니다. 여기까지가 아홉 화면이 공유하는 세 계산축이고, 다음 절부터는 화면마다 실제 코드를 봅니다.

화면별 코드

01iOS 휠 — 선택 지점의 각도를 색조로 다시 구하는 원형 컬러피커

휠 한 바퀴를 색조 영역으로 쓰는 원형 선택 화면입니다.

각도와 거리를 색으로 되돌리는 계산

웨이포인트 사이를 보간해 선택 지점을 옮기고 그 지점의 각도를 Math.atan2 로 재면 색조가 나옵니다. 중심에서의 거리는 RADIUS 60 으로 나눠 채도가 되고, 나온 RGB 의 밝기가 체크 글자색을 뒤집습니다.

  function apply(t) {
    var p = pointAt(t);
    var angle = Math.atan2(p.y, p.x);
    var hue = ((angle * 180 / Math.PI) + 360) % 360;
    var dist = Math.min(1, Math.hypot(p.x, p.y) / RADIUS);
    var sat = dist * 100;
    var rgb = hslToRgb(hue, sat, LIGHTNESS);
    var hex = '#' + toHex(rgb[0]) + toHex(rgb[1]) + toHex(rgb[2]);
    var brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
    var ink = brightness > 150;

    handleEl.style.transform = 'translate(-50%, -50%) translate(' + p.x.toFixed(2) + 'px, ' + p.y.toFixed(2) + 'px)';
    handleEl.style.background = hex;
    readoutEl.style.background = hex;
    readoutEl.classList.toggle('is-ink', ink);
    hexEl.textContent = hex;
    wheelEl.setAttribute('aria-valuenow', Math.round(hue));
    wheelEl.setAttribute('aria-valuetext', hex);
  }
iOS 휠 — 선택 지점의 각도를 색조로 다시 구하는 원형 컬러피커
새 창에서 열기

01 · iOS 휠 — 선택 지점의 각도를 색조로 다시 구하는 원형 컬러피커 — 측정 누적면적 8.494% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

Math.atan2pointAtaria-valuetext

02Material 슬라이더 — 세 손잡이 위치를 합쳐 미리보기 색을 계산하는 컬러피커

세 손잡이가 색조·채도·명도를 나눠 가진 슬라이더 미리보기입니다.

구간별 값을 모아 미리보기를 갱신하는 흐름

valuesAt 이 한 주기를 세 구간으로 나눠 h/s/l 값을 만듭니다. setThumb 이 손잡이 위치와 채움 막대를 같은 비율로 움직여 세 값이 모이면 미리보기 색이 다시 계산됩니다.

  function valuesAt(t) {
    var p = t / CYCLE_MS;
    var h, s, l;
    if (p < 1 / 3) {
      var local = p / (1 / 3);
      h = local * 360; s = 60; l = 50;
    } else if (p < 2 / 3) {
      var local2 = (p - 1 / 3) / (1 / 3);
      h = 360; s = 20 + local2 * 70; l = 50;
    } else {
      var local3 = (p - 2 / 3) / (1 / 3);
      h = 360; s = 90; l = 20 + local3 * 60;
    }
    return { h: h % 360, s: s, l: l };
  }

  function setThumb(thumbEl, fillEl, ratio) {
    var x = ratio * TRACK_W;
    thumbEl.style.transform = 'translate(calc(-50% + ' + x.toFixed(2) + 'px), -50%)';
    fillEl.style.transform = 'scaleX(' + ratio.toFixed(4) + ')';
  }
Material 슬라이더 — 세 손잡이 위치를 합쳐 미리보기 색을 계산하는 컬러피커
새 창에서 열기

02 · Material 슬라이더 — 세 손잡이 위치를 합쳐 미리보기 색을 계산하는 컬러피커 — 측정 누적면적 17.368% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

valuesAtsetThumbaria-valuenow

03Windows 스펙트럼 — 2차원 위치를 채도·명도로 나눠 구하는 컬러피커

패널의 가로·세로 위치가 채도·명도가 되는 2차원 선택 화면입니다.

6분기로 나뉘는 HSV 변환

hsvToRgb 는 색조를 60 도마다 여섯 갈래로 나눠 RGB 를 계산합니다. toHex 가 padStart 로 자릿수를 맞춰 hex 표기를 완성합니다.

  function hsvToRgb(h, s, v) {
    s /= 100; v /= 100;
    var c = v * s;
    var x = c * (1 - Math.abs(((h / 60) % 2) - 1));
    var m = v - c;
    var r, g, b;
    if (h < 60) { r = c; g = x; b = 0; }
    else if (h < 120) { r = x; g = c; b = 0; }
    else if (h < 180) { r = 0; g = c; b = x; }
    else if (h < 240) { r = 0; g = x; b = c; }
    else if (h < 300) { r = x; g = 0; b = c; }
    else { r = c; g = 0; b = x; }
    return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];
  }

  function toHex(n) {
    return n.toString(16).padStart(2, '0');
  }
Windows 스펙트럼 — 2차원 위치를 채도·명도로 나눠 구하는 컬러피커
새 창에서 열기

03 · Windows 스펙트럼 — 2차원 위치를 채도·명도로 나눠 구하는 컬러피커 — 측정 누적면적 15.937% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

hsvToRgbpointAtaria-valuetext

04macOS 크레용 — 밝기 값으로 테두리 색을 정하는 격자형 컬러피커

격자에 놓인 크레용 칸을 차례로 훑는 선택 화면입니다.

휘도 임계값으로 테두리를 고르는 판정

centerOf 보간으로 테두리가 칸 사이를 부드럽게 지나가고 frac 값이 반을 넘는 순간 선택 칸이 바뀝니다. 선택 색의 휘도를 LUM_THRESHOLD .6 과 비교해 흰 테두리와 검은 테두리를 고릅니다.

  function apply(t) {
    var idx = Math.min(ORDER.length - 2, Math.floor(t / SEG_MS));
    var frac = (t % SEG_MS) / SEG_MS;
    var a = centerOf(ORDER[idx]);
    var b = centerOf(ORDER[idx + 1]);
    var x = a.x + (b.x - a.x) * frac;
    var y = a.y + (b.y - a.y) * frac;
    ringEl.style.transform = 'translate(' + x.toFixed(2) + 'px, ' + y.toFixed(2) + 'px)';

    var selIndex = ORDER[frac < .5 ? idx : idx + 1];
    var c = CRAYONS[selIndex];
    var rgb = hslToRgb(c.h, c.s, c.l);
    var brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000 / 255;
    var white = brightness < LUM_THRESHOLD;
    ringEl.classList.toggle('is-white-ring', white);
    ringEl.classList.toggle('is-black-ring', !white);

    var hex = crayonEls[selIndex].dataset.hex;
    swatchEl.style.background = hex;
    hexEl.textContent = hex;

    for (var i = 0; i < crayonEls.length; i++) {
      crayonEls[i].setAttribute('aria-checked', i === selIndex ? 'true' : 'false');
    }
  }
macOS 크레용 — 밝기 값으로 테두리 색을 정하는 격자형 컬러피커
새 창에서 열기

04 · macOS 크레용 — 밝기 값으로 테두리 색을 정하는 격자형 컬러피커 — 측정 누적면적 14.251% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

role=radiogroupLUM_THRESHOLDcenterOf

05Figma 패널 — 세 표기법을 서로 맞춰 다시 구하는 컬러피커

hex·rgb·hsl 세 표기가 같은 색을 가리키는 패널입니다.

세 표기법을 한 번에 맞추는 동기화

PRESETS 사이를 보간해 h/s/l 을 만들면 세 표기가 한 번에 다시 쓰입니다. 어떤 표기로 읽더라도 나머지 두 표기가 같은 색을 따라갑니다.

  function apply(t) {
    var idx = Math.min(PRESETS.length - 2, Math.floor(t / SEG_MS));
    var frac = (t % SEG_MS) / SEG_MS;
    var a = PRESETS[idx];
    var b = PRESETS[idx + 1];
    var h = a.h + (b.h - a.h) * frac;
    var s = a.s + (b.s - a.s) * frac;
    var l = a.l + (b.l - a.l) * frac;
    var hMod = h % 360;

    var rgb = hslToRgb(h, s, l);
    var hex = '#' + toHex(rgb[0]) + toHex(rgb[1]) + toHex(rgb[2]);
    var hslStr = 'hsl(' + hMod.toFixed(0) + 'deg ' + s.toFixed(0) + '% ' + l.toFixed(0) + '%)';
    var rgbStr = 'rgb(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ')';

    swatchEl.style.background = hslStr;
    hexField.textContent = hex;
    rgbField.textContent = rgbStr;
    hslField.textContent = hslStr;
  }
Figma 패널 — 세 표기법을 서로 맞춰 다시 구하는 컬러피커
새 창에서 열기

05 · Figma 패널 — 세 표기법을 서로 맞춰 다시 구하는 컬러피커 — 측정 누적면적 10.797% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

hexFieldrgbFieldPRESETS

06HSL 슬라이더 — 색조 값에 따라 트랙 그라디언트를 다시 그리는 컬러피커

세 트랙의 배경이 색조에 맞춰 다시 그려지는 슬라이더입니다.

트랙 그라디언트를 다시 그리는 정지점

sin 파형으로 채도·명도를 움직이고 buildGradient 가 GRADIENT_STEPS 20 개 정지점으로 트랙 배경을 재계산합니다. 미리보기와 세 손잡이의 aria-valuenow 가 같은 주기로 갱신됩니다.

  function apply(t) {
    var p = t / CYCLE_MS;
    var hue = (p * 360) % 360;
    var sat = 55 + Math.sin(p * Math.PI * 2 * 1.3) * 35;
    var light = 50 + Math.sin(p * Math.PI * 2 * .9 + 1) * 25;

    setThumb(hThumb, hue / 360);
    setThumb(sThumb, sat / 100);
    setThumb(lThumb, light / 100);

    sTrack.style.background = buildGradient(function (r) {
      return 'hsl(' + hue.toFixed(1) + 'deg ' + (r * 100).toFixed(1) + '% 50%)';
    });
    lTrack.style.background = buildGradient(function (r) {
      return 'hsl(' + hue.toFixed(1) + 'deg ' + sat.toFixed(1) + '% ' + (r * 100).toFixed(1) + '%)';
    });
    previewEl.style.background = 'hsl(' + hue.toFixed(1) + 'deg ' + sat.toFixed(1) + '% ' + light.toFixed(1) + '%)';

    hThumb.setAttribute('aria-valuenow', String(Math.round(hue)));
    sThumb.setAttribute('aria-valuenow', String(Math.round(sat)));
    lThumb.setAttribute('aria-valuenow', String(Math.round(light)));
  }
HSL 슬라이더 — 색조 값에 따라 트랙 그라디언트를 다시 그리는 컬러피커
새 창에서 열기

06 · HSL 슬라이더 — 색조 값에 따라 트랙 그라디언트를 다시 그리는 컬러피커 — 측정 누적면적 15.53% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

hslbuildGradientGRADIENT_STEPS

07스와치 칩 — 밝기 값으로 체크 아이콘 대비를 맞추는 컬러피커

스와치 칩을 순회하며 선택을 옮기는 목록형 화면입니다.

칩마다 밝기를 재는 체크 판정

ORDER 순회 중 frac 이 반을 넘으면 선택 칩이 바뀌고 그 순간 강도가 116.1 까지 치솟습니다. 칩마다 밝기 공식으로 체크 아이콘 색을 정해 대비를 유지합니다.

  function apply(t) {
    var idx = Math.min(ORDER.length - 2, Math.floor(t / SEG_MS));
    var frac = (t % SEG_MS) / SEG_MS;
    var selIndex = ORDER[frac < .5 ? idx : idx + 1];

    for (var i = 0; i < chipEls.length; i++) {
      var isSel = i === selIndex;
      var rgb = HEX[i].rgb;
      var brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
      var ink = brightness > 150;
      chipEls[i].classList.toggle('is-selected', isSel);
      chipEls[i].classList.toggle('is-ink', ink);
      chipEls[i].setAttribute('aria-checked', isSel ? 'true' : 'false');
    }

    hexEl.textContent = HEX[selIndex].hex;
    readoutEl.style.background = chipEls[selIndex].style.background;
    var selBrightness = (HEX[selIndex].rgb[0] * 299 + HEX[selIndex].rgb[1] * 587 + HEX[selIndex].rgb[2] * 114) / 1000;
    readoutEl.classList.toggle('is-ink', selBrightness > 150);
  }
스와치 칩 — 밝기 값으로 체크 아이콘 대비를 맞추는 컬러피커
새 창에서 열기

07 · 스와치 칩 — 밝기 값으로 체크 아이콘 대비를 맞추는 컬러피커 — 측정 누적면적 9.408% · 움직인 프레임 7/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

role=radiogrouparia-checkedSWATCHES

08스포이드 — 추출된 색의 밝기로 미리보기를 다시 구하는 컬러피커

캔버스 위를 스포이드가 지나며 색을 뽑아 오는 화면입니다.

캔버스 좌표에서 픽셀을 꺼내 오는 경로

삼각파와 sin 곡선을 섞은 경로 위에서 getImageData 로 정확히 한 픽셀을 꺼냅니다. 뽑은 색의 밝기가 미리보기 테두리 두께를 MIN_BORDER 1 부터 MAX_BORDER 6 사이에서 정합니다.

  function apply(t) {
    var p = (t / CYCLE_MS) % 1;
    var triangle = p < .5 ? p * 2 : (1 - p) * 2;
    var x = 8 + triangle * (CANVAS_W - 16);
    var y = CANVAS_H / 2 + Math.sin(p * Math.PI * 4) * (CANVAS_H / 2 - 6);
    var xi = Math.max(0, Math.min(CANVAS_W - 1, Math.round(x)));
    var yi = Math.max(0, Math.min(CANVAS_H - 1, Math.round(y)));

    var pixel = ctx.getImageData(xi, yi, 1, 1).data;
    var r = pixel[0], g = pixel[1], b = pixel[2];
    var hex = '#' + toHex(r) + toHex(g) + toHex(b);
    var brightness = (r * 299 + g * 587 + b * 114) / 1000;
    var ink = brightness > 150;
    var borderPx = MIN_BORDER + (brightness / 255) * (MAX_BORDER - MIN_BORDER);

    loupeEl.style.transform = 'translate(-50%, -50%) translate(' + x.toFixed(2) + 'px, ' + y.toFixed(2) + 'px)';
    previewEl.style.background = hex;
    previewEl.style.borderWidth = borderPx.toFixed(1) + 'px';
    previewEl.classList.toggle('is-ink', ink);
    hexEl.textContent = hex;
  }
스포이드 — 추출된 색의 밝기로 미리보기를 다시 구하는 컬러피커
새 창에서 열기

08 · 스포이드 — 추출된 색의 밝기로 미리보기를 다시 구하는 컬러피커 — 측정 누적면적 8.365% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

getImageDataBANDSaria-hidden

09최근 색상 — 색상 간 거리를 계산해 가까운 색을 합치는 목록형 컬러피커

최근에 고른 색을 모아 두고 비슷한 색끼리 합치는 목록입니다.

3차원 거리로 같은 그룹을 찾는 병합

dist 가 RGB 세 축의 유클리드 거리를 재고 MERGE_DIST 30 보다 가까우면 같은 그룹으로 묶입니다. 목록 개수 표시가 병합 전후를 실시간으로 세서 보여줍니다.

  function dist(a, b) {
    return Math.sqrt(
      Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2) + Math.pow(a[2] - b[2], 2)
    );
  }

  var RGB = RAW.map(function (c) { return hslToRgb(c.h, c.s, c.l); });

  var kept = [];
  var groupOf = new Array(RAW.length);
  for (var i = 0; i < RAW.length; i++) {
    var found = -1;
    for (var j = 0; j < kept.length; j++) {
      if (dist(RGB[i], RGB[kept[j]]) < MERGE_DIST) { found = kept[j]; break; }
    }
    if (found === -1) {
      kept.push(i);
      groupOf[i] = i;
    } else {
      groupOf[i] = found;
    }
  }
최근 색상 — 색상 간 거리를 계산해 가까운 색을 합치는 목록형 컬러피커
새 창에서 열기

09 · 최근 색상 — 색상 간 거리를 계산해 가까운 색을 합치는 목록형 컬러피커 — 측정 누적면적 13.808% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

distMERGE_DISThslToRgb

이런 화면에서 쓴다 — 색상 선택 컴포넌트가 필요한 자리

디자인 시스템을 관리하는 사람이 컬러피커를 찾을 때는 대개 이미 정해진 브랜드 색상 팔레트를 편집 화면에 노출해야 하는 상황입니다. 01 처럼 원형 휠로 각도를 조절하게 할지, 05 처럼 세 표기법을 한 화면에 맞춰 보여줄지는 그 편집 화면을 쓰는 사람이 누구인지에 따라 갈립니다.

상품 옵션 화면을 만드는 팀은 조금 다른 문제를 풉니다. 09 의 최근 색상 목록처럼 사용자가 방금 고른 색을 다시 꺼내 쓰게 하되, 미세하게 다른 색까지 전부 남기면 목록이 끝없이 길어집니다. 거리 기준으로 비슷한 색을 합치는 판단을 어디서 내릴지가 이 화면의 핵심 질문입니다.

두 상황 모두 계산 전체를 통째로 붙이기보다 필요한 계산 한두 개만 떼어 쓰고 싶을 때가 많습니다. 화면마다 각도·밝기·거리 중 어느 계산이 실제로 필요한지 먼저 가려내면 아홉 개를 전부 붙이지 않고도 시작할 수 있습니다.

값이 화면을 바꾸는 곳 — 각도·밝기·거리

컬러피커 프로그램을 직접 짤 때 헷갈리는 지점은 색 정의가 아니라 값이 화면으로 흘러가는 길입니다. 이 아홉 화면에서 그 길은 세 가지로 압축됩니다.

각도가 색조가 되는 곳

01 휠의 Math.atan2 는 좌표 차이를 라디안 각도로 돌려주고 여기에 180 을 곱하고 파이(π)로 나눠 도 단위로 바꾼 뒤 360 으로 나머지를 잡습니다. 같은 계산을 06 슬라이더가 시간값 비율에 곱하는 방식으로 쓰면 손잡이 위치와 그라디언트 정지점이 한 값에서 함께 나옵니다. 각도 계산이 앞에 서는 순간 색 영역 표면은 값 몇 개로 정리됩니다.

밝기가 글자색을 정하는 곳

299·587·114 가중치 합은 사람 눈의 초록 감도를 흉내 낸 가중 평균으로, 04·07·08 세 화면이 같은 공식을 다른 곳에 씁니다. 04 는 휘도를 255 로 나눠 임계값과 비교하고 07 은 원값을 150 과 비교하며 08 은 테두리 두께에까지 이어 붙입니다. 같은 계산 한 줄이 세 화면에서 각자 다른 표시를 지탱하는 셈입니다.

거리가 목록을 줄이는 곳

09 의 dist 함수는 세 숫자의 제곱합에 제곱근을 씌운 가장 단순한 유클리드 거리입니다. MERGE_DIST 보다 가까운 색을 만나면 kept 배열에 새로 등록하지 않고 앞 색의 그룹 번호를 물려받으므로 목록 길이가 곧 남은 그룹 수가 됩니다. 거리 기준을 어떻게 잡느냐에 따라 같은 이력이 다른 목록이 되는 것도 이 한 줄에서 갈립니다.

표로 보는 변형 세 가지와 reduced-motion 처리

변형 바꾸는 값 바뀌는 느낌
크레용 밝기 임계값 04 LUM_THRESHOLD .5 → .6 임계값을 .5 로 두면 중간 밝기 색 근처에서 테두리 색이 자주 뒤바뀌어 산만해 보이고, .6 으로 올리면 뒤바뀌는 지점이 밝은 쪽으로 옮겨가 어두운 색 그룹에서는 흰 테두리가 더 오래 유지된다
최근 색상 병합 거리 09 MERGE_DIST 10 → 30 병합 거리를 10 으로 두면 미세하게 다른 색까지 전부 따로 남아 목록이 길어지고, 30 으로 올리면 비슷한 색끼리 잘 합쳐져 목록은 짧아지지만 실제로는 다른 색이 하나로 뭉뚱그려질 위험이 커진다
HSL 슬라이더 그라디언트 스텝 06 GRADIENT_STEPS 6 → 20 스텝을 6 으로 두면 트랙 그라디언트가 계단처럼 뚝뚝 끊겨 보이지만 다시 그리는 비용이 적고, 20 으로 올리면 색이 매끈하게 이어지지만 색조가 바뀔 때마다 다시 계산할 값이 늘어난다

접근성

아홉 화면 모두 prefers-reduced-motion 설정이 켜져 있으면 requestAnimationFrame 루프를 걸지 않고 apply(0) 한 번으로 고정합니다. 정지 상태에서도 각 화면의 값 표시와 선택 상태는 살아 있어서 화면 이해에 움직임이 필수가 아닙니다. 01 휠은 aria-valuenow 와 aria-valuetext 를, 04·07 은 aria-checked 를 매 계산마다 다시 쓰니 화면을 읽는 도구도 선택값을 따라올 수 있습니다.

극단 색상과 연속 중복 선택 — 어디서 계산이 깨지는가

극단 색상 — 휠 중심에서 각도가 흔들린다

01 휠의 채도는 중심 거리를 반지름으로 나눈 값이라 중심 가까이에서는 0 에 수렴합니다. 이 지점에서 Math.atan2 에 들어가는 x·y 가 아주 작아져 부호 반전 한 번으로 각도가 크게 뛸 수 있는데, 채도가 0 이면 색조가 뛰어도 눈에 띄지 않아 계산상으로만 존재하는 흔들림이 됩니다. 웨이포인트가 중심에서 50~56 픽셀 거리를 유지하는 이유입니다.

연속 중복 선택 — 거리 0 은 언제나 병합된다

09 의 병합은 거리가 0 이면 언제나 같은 그룹으로 묶습니다. 그래서 같은 색을 되풀이해서 고르는 시나리오에서는 목록이 늘어나지 않고 한 칸의 선택 횟수만 쌓입니다. 목록이 사용 이력 그 자체를 보여주길 바란다면 병합 기준과 표시 기준을 분리해야 하는데, 이 데모는 묶는 쪽을 기본값으로 두었습니다. 전체 소스는 비밀번호 59xbym8t 로 여는 zip 에 로케일별로 들어 있으니 기준값을 바꿔 두 동작을 비교해 볼 수 있습니다.

투명도 0 — 아홉 화면은 전부 불투명만 다룬다

01 부터 09 까지 어느 화면도 알파 채널을 다루지 않습니다. 색 계산이 전부 RGB 세 축 위에서 끝나므로 rgba 표기가 들어와도 밝기 공식은 알파를 무시한 채 계산합니다. 반투명 색을 골라야 하는 화면이라면 밝기 계산 앞에 배경색과 합성하는 단계가 먼저 필요합니다.

컬러피커를 붙이기 전에 자주 묻는 질문

컬러피커 단축키로 화면을 여는 기능은 이 데모에 있나요?

이 데모 아홉 화면에는 키 입력을 받는 처리가 들어 있지 않습니다. 자동 시연이 값의 흐름을 보여주는 몫만 맡고 있기 때문입니다. 키로 열고 싶다면 화면 바깥에 keydown 이벤트를 붙여 선택 화면을 감췄다 보여주는 방식을 얹으면 되는데, 그 경우에도 색 계산 자체는 이 글의 코드 그대로 씁니다.

스포이드 화면은 왜 EyeDropper API 를 쓰지 않나요?

08 화면은 캔버스에 그린 그림 안에서 좌표를 정해 getImageData 로 한 픽셀을 읽어 오는 방식입니다. 데모 안에서 재현하는 데는 이 경로로 충분하고 셀프 컨테이너 환경 어디서든 같은 결과가 나옵니다. 화면 바깥의 임의 지점을 찍는 기능이 필요해지면 그때 브라우저 제공 스포이드 기능을 확인하는 순서가 됩니다.

컬러피커 라이브러리 대신 이 코드를 가져다 쓰는 이점은 무엇인가요?

아홉 화면의 계산이 전부 눈에 보이는 코드로 열려 있다는 점입니다. 각도·밝기·거리 각 계산이 어느 줄에서 일어나는지 추적할 수 있어서 값을 바꾸거나 그 일부만 떼어 다른 화면에 옮기기가 쉽습니다. 색을 고르는 입력 부품 자체를 바닥부터 조립하고 싶다면 컬러 피커 직접 만들기 편이, 값을 폭으로 조절하는 입력을 다루고 싶다면 css input range 슬라이더 편이 이어지는 길입니다.

더 읽을거리

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.