인포그랩design-skills

color-system 가이드

팔레트와 램프를 OKLCH로 계산하고 색역을 확인할 때

한 줄 결과물: 역할 표, OKLCH 표(색역 판정 포함), 램프, 대비 표. 값은 모두 oklch.py와 contrast.py가 계산한다.

스킬 본문: ../../color-system/SKILL.md

언제 쓰나

  • 팔레트, 램프, 의미 색 토큰, 차트 색을 만들거나 검수할 때
  • 색역을 넘는 값, 탁해지는 색, 다크 모드 색을 확인할 때
  • 쓰지 않을 때: 색 하나에 대한 과한 분석, 색 이름 짓기(사람이 짓는다)

샘플

색 팔레트 점검: OKLCH 표, 10단계 램프, 색역 경고, 역할 표

입력값
기준색브랜드 녹색 #328523 (정본: @infograb/design-tokens)
함께 본 색글자용 녹색 #286a1b, 보라 #5941af
명령to-oklch, gamut, ramp --steps 10
결과기준색 oklch(0.5456 0.1551 140.87), 램프 10단계(#E1FFDC ... #002C00)

OKLCH 값, 램프의 hex, 색역 경고(chroma 0.2215)는 아래 명령의 실제 출력이다. 역할 표의 "쓰는 곳"은 모양을 보여 주는 예시다.

따라하기

  1. 역할부터 적는다. 어떤 색이 면, 선, 본문, 행동, 분류, 상태 중 무엇을 맡는지 표로 쓴다.
    color-system 스킬로 우리 팔레트를 점검해 줘.
기준색: #328523, 정본 위치: <토큰 파일 경로>. 역할 표부터 만들어 줘.
  2. 기준색을 OKLCH로 바꾼다.
    python3 color-system/scripts/oklch.py to-oklch '#328523'
# oklch(0.5456 0.1551 140.87)
  3. 색역을 확인한다. 색역 밖이면 명도나 색상을 바꾸지 말고 chroma만 줄인다.
    python3 color-system/scripts/oklch.py gamut 'oklch(0.7 0.3 145)'
# sRGB 색역 밖 | 이 L,H에서 최대 chroma = 0.2215 | 요청 chroma = 0.3000
  4. 램프를 만든다. 색상을 고정하고 명도만 움직인다.
    python3 color-system/scripts/oklch.py ramp '#328523' --steps 10
# step  1  L=0.970  C=0.0557  #E1FFDC  (chroma 0.1551 -> 0.0557 로 감소)
# ...
# step 10  L=0.250  C=0.0970  #002C00  (chroma 0.1551 -> 0.0970 로 감소)
  5. 대비를 계산한다. 글자와 실제 바탕 쌍마다 a11y-audit의 contrast.py를 쓴다.
  6. 보고한다. 역할 표, OKLCH 표, 대비 표, 구조 점검, 제안(정본에 없는 색은 제안으로만) 순서로 낸다.

흔한 실패

  • 정본에 없는 새 색이나 폐기된 색(#579950, #4B24D7, #7e61d5)을 코드에 넣는다. 제안으로만 올린다.
  • 색역 밖 값을 그대로 쓴다. 잘려서 탁해지고 색상이 틀어진다.
  • 색상 중심 조화 규칙(보색, 삼각 배색)만 근거로 삼는다. chroma와 명도가 정서를 더 좌우한다.
  • 다크 모드를 라이트 팔레트의 반전으로 만든다. 별도 팔레트로 계산한다.

다음 스킬