Color palettes

Color palettes (컬러 팔레트)

데이터 시각화용 컬러 팔레트는 IBM 디자인 언어 컬러 팔레트에서 선택된 하위 집합이에요. 페이지 안에서 접근성과 조화를 극대화하도록 설계되었습니다.

출처: Color palettes

본문

참고: 이 가이드는 작업 진행 중이에요. 로드맵을 보거나 기능을 요청하거나 기여하려면 carbon-charts GitHub 저장소로 이동하세요.

범주형 팔레트 (Categorical palettes)

범주형(또는 질적) 팔레트는 고유한 상관 관계가 없는 별개의 데이터 범주를 구분하려 할 때 가장 좋아요.

이 팔레트의 색상은 아래에 설명된 대로 엄격히 순서대로 적용해야 합니다. 이 순서는 이웃 색상 사이의 대비를 극대화해 시각적 구분을 돕도록 신중히 큐레이션되었습니다.

  1. Purple 70 6929c4
  2. Cyan 50 1192e8
  3. Teal 70 005d5d
  4. Magenta 70 9f1853
  5. Red 50 fa4d56
  6. Red 90 570408
  7. Green 60 198038
  8. Blue 80 002d9c
  9. Magenta 50 ee538b
  10. Yellow 50 b28600
  11. Teal 50 009d9a
  12. Cyan 90 012749
  13. Orange 70 8a3800
  14. Purple 50 a56eff

데이터 범주의 정확한 개수를 예측할 수 있다면 다음 팔레트 중 하나로 범주형 순서를 재정의할 수 있어요.

1-색상 그룹

  • Option 1: Purple 70 6929c4
  • Option 2: Blue 80 002d9c
  • Option 3: Cyan 50 1192e8
  • Option 4: Teal 70 005d5d

순차 팔레트 (Sequential palettes)

단색 (Monochromatic)

단색 팔레트는 관계 차트와 트렌드 차트에 좋아요. 라이트 테마에서 가장 어두운 색이 가장 큰 값을 나타냅니다. 다크 테마에서 가장 밝은 색이 가장 큰 값을 나타냅니다.

Option 1 (Blue)

  • Blue 10 edf5ff
  • Blue 20 d0e2ff
  • Blue 30 a6c8ff
  • Blue 40 78a9ff
  • Blue 50 4589ff
  • Blue 60 0f62fe
  • Blue 70 0043ce
  • Blue 80 002d9c
  • Blue 90 001d6c
  • Blue 100 001141

Option 2 (Purple)

  • Purple 10 f6f2ff
  • Purple 20 e8daff
  • Purple 30 d4bbff
  • Purple 40 be95ff
  • Purple 50 a56eff
  • Purple 60 8a3ffc
  • Purple 70 6929c4
  • Purple 80 491d8b
  • Purple 90 31135e
  • Purple 100 1c0f30

Option 3 (Cyan)

  • Cyan 10 e5f6ff
  • Cyan 20 bae6ff
  • Cyan 30 82cfff
  • Cyan 40 33b1ff
  • Cyan 50 1192e8
  • Cyan 60 0072c3
  • Cyan 70 00539a
  • Cyan 80 003a6d
  • Cyan 90 012749
  • Cyan 100 1c0f30

Option 4 (Teal)

  • Teal 10 d9fbfb
  • Teal 20 9ef0f0
  • Teal 30 3ddbd9
  • Teal 40 08bdba
  • Teal 50 009d9a
  • Teal 60 007d79
  • Teal 70 005d5d
  • Teal 80 004144
  • Teal 90 022b30
  • Teal 100 081a1c

발산 팔레트 (Diverging palettes)

발산 팔레트는 라이트와 다크 테마를 구분하지 않는다는 점에 유의하세요.

팔레트 1 (Palette 1)

적-청록(red-cyan) 팔레트는 온도와 자연스러운 연관이 있어요. 더움-대-추움(hot-vs-cold)을 나타내는 데이터에 이 팔레트를 사용하세요.

팔레트 2 (Palette 2)

보라-청록(purple-teal) 팔레트는 성과, 판매, 변화율처럼 온도와 연관이 없는 데이터에 좋아요.

Option 1 (Red-Cyan)

  • Red 80 750e13
  • Red 70 a2191f
  • Red 60 da1e28
  • Red 50 fa4d56
  • Red 40 ff8389
  • Red 30 ffb3b8
  • Red 20 ffd7d9
  • Red 10 fff1f1
  • Cyan 10 e5f6ff
  • Cyan 20 bae6ff
  • Cyan 30 82cfff
  • Cyan 40 33b1ff
  • Cyan 50 1192e8
  • Cyan 60 0072c3
  • Cyan 70 00539a
  • Cyan 80 003a6d

Option 2 (Purple-Teal)

  • Purple 80 491d8b
  • Purple 70 6929c4
  • Purple 60 8a3ffc
  • Purple 50 a56eff
  • Purple 40 be95ff
  • Purple 30 d4bbff
  • Purple 20 e8daff
  • Purple 10 f6f2ff
  • Teal 10 d9fbfb
  • Teal 20 9ef0f0
  • Teal 30 3ddbd9
  • Teal 40 08bdba
  • Teal 50 009d9a
  • Teal 60 007d79
  • Teal 70 005d5d
  • Teal 80 004144

알림 팔레트 (Alert palette)

알림 색상은 상태를 반영하는 데 사용됩니다. 일반적으로 빨간색은 위험 또는 오류, 주황색은 심각한 경고, 노란색은 일반 경고, 초록색은 정상 또는 성공을 나타냅니다.

    1. Red 60 da1e28
    1. Orange 40 ff832b
    1. Yellow 30 f1c21b
    1. Green 60 198038

그라디언트 사용 (Gradient use)

참고: 그라디언트는 아직 Carbon Charts에서 지원되지 않아요. 이 탐구는 변경될 수 있습니다.

그라디언트는 값 범위에서 극단을 강조하는 데 좋아요. 필요한 경우에만 단일 카테고리 시각화에 그라디언트를 사용하세요. 여러 그라디언트는 종종 접근 불가능하며 우리 시스템에서는 권장되지 않습니다. 그라디언트는 어떤 의미 있는 진행이나 발산을 나타내는 데 사용해서는 안 됩니다. 순차 팔레트 대신 그라디언트를 절대 사용하지 마세요.

승인된 그라디언트 옵션 전체 목록은 IBM 디자인 언어 Color 페이지를 참고하세요.

실제 색상 사용 (Color in action)

여러 사업부와 애플리케이션에 걸쳐 IBM 디자인 컬러 팔레트가 실제로 사용되는 것을 확인하세요. 의도적인 색상 포인트가 풍부한 중성색과 결합되어 균형 잡히고 응집력 있는 경험을 만듭니다.

더 알아보기 (Learn more)

데이터 시각화 컬러 팔레트는 IBM 디자인 언어 팔레트의 선택된 하위 집합으로, 접근성과 페이지 조화를 우선합니다. 범주가 뚜렷하면 범주형 팔레트를, 관계·트렌드에는 단색 순차 팔레트를, 온도 연관 데이터에는 발산 팔레트를 고르세요. 색상 값은 프로그램에서 라이트/다크 테마를 구분할 때 주의하고, 그라디언트는 아직 지원되지 않으므로 순차 팔레트를 대신 사용하는 게 좋습니다.