brand
--bbc-color-text-brand-primary
- text-brand-primary
- custom value
- #3b51db
--bbc-color-text-brand-primary-deep
- text-brand-primary-deep
- custom value
- #3045c7
Semantic Colors
디자인 시스템에서 사용하는 Semantic 색상 변수에 대한 정의와 활용 가이드입니다.
각 색상은 의미 기반의 Token으로 구성되어 있으며, var(--bbc-color-...) 형태의 CSS 변수로 제공됩니다.
컴포넌트 개발 또는 페이지 구현 시, 이 가이드를 참고하여 브랜드 일관성을 유지하고
접근성과 시각적 명확성을 갖춘 UI를 구현할 수 있습니다.
Theme
Semantic 색상 테마를 전환해 확인할 수 있습니다.
text
기본 본문, 캡션, 버튼 등 UI 전반의 텍스트에 사용되는 색상입니다.
natural
--bbc-color-text-natural-0
- text-natural-0
- custom value
- #2d2d2d
--bbc-color-text-natural-1
- text-natural-1
- custom value
- #6f6f6f
--bbc-color-text-natural-2
- text-natural-2
- custom value
- #ffffff
accent
--bbc-color-text-accent-0
- text-accent-0
- custom value
- #ffffff
positive
--bbc-color-text-positive-0
- text-positive-0
- custom value
- #077045
attention
--bbc-color-text-attention-0
- text-attention-0
- custom value
- #a46013
negative
--bbc-color-text-negative-0
- text-negative-0
- custom value
- #da201c
disable
--bbc-color-text-disable-0
- text-disable-0
- custom value
- #8e8e8e
placeholder
--bbc-color-text-placeholder-0
- text-placeholder-0
- custom value
- #757575
required
--bbc-color-text-required-0
- text-required-0
- custom value
- #cd1e39
icon
아이콘 버튼이나 시각적 보조 역할을 하는 아이콘 표현에 사용됩니다.
아이콘 버튼이나 시각적 보조 역할을 하는 아이콘 표현에 사용됩니다.
- AA: 사용자와 상호작용이 필요한 경우 사용(IconButton)
- AA (Large): 보조(디자인요소) 아이콘에 사용
brand
--bbc-color-icon-brand-primary
- icon-brand-primary
- custom value
- #3b51db
--bbc-color-icon-brand-primary-deep
- icon-brand-primary-deep
- custom value
- #3045c7
natural
--bbc-color-icon-natural-0
- icon-natural-0
- custom value
- #929292
--bbc-color-icon-natural-1
- icon-natural-1
- custom value
- #6f6f6f
--bbc-color-icon-natural-2
- icon-natural-2
- custom value
- #2d2d2d
--bbc-color-icon-natural-3
- icon-natural-3
- custom value
- #ffffff
accent
--bbc-color-icon-accent-0
- icon-accent-0
- custom value
- #ffffff
positive
--bbc-color-icon-positive-0
- icon-positive-0
- custom value
- #077045
attention
--bbc-color-icon-attention-0
- icon-attention-0
- custom value
- #a46013
negative
--bbc-color-icon-negative-0
- icon-negative-0
- custom value
- #da201c
disable
--bbc-color-icon-disable-0
- icon-disable-0
- custom value
- #929292
--bbc-color-icon-disable-1
- icon-disable-1
- custom value
- #b5b5b5
required
--bbc-color-icon-required-0
- icon-required-0
- custom value
- #cd1e39
alert
--bbc-color-icon-alert-0
- icon-alert-0
- custom value
- #e74c3c
--bbc-color-icon-like
- icon-like
- custom value
- #f05f4b
layer
layer 카테고리 색상입니다.
brand
--bbc-color-layer-brand-primary
- layer-brand-primary
- custom value
- #daecf8
floor
--bbc-color-layer-floor-0
- layer-floor-0
- custom value
- #ffffff
overlay
--bbc-color-layer-overlay-0
- layer-overlay-0
- custom value
- rgba(#000000, 0.5)
fill
fill 카테고리 색상입니다.
brand
--bbc-color-fill-brand-primary
- fill-brand-primary
- custom value
- #3b51db
--bbc-color-fill-brand-primary-hovered
- fill-brand-primary-hovered
- custom value
- #3045c7
--bbc-color-fill-brand-primary-pressed
- fill-brand-primary-pressed
- custom value
- #2438b3
--bbc-color-fill-brand-primary-subtle
- fill-brand-primary-subtle
- custom value
- #eceeff
--bbc-color-fill-brand-primary-subtle-hovered
- fill-brand-primary-subtle-hovered
- custom value
- #e3e5fe
--bbc-color-fill-brand-primary-subtle-pressed
- fill-brand-primary-subtle-pressed
- custom value
- #e3e5fe
--bbc-color-fill-brand-secondary
- fill-brand-secondary
- custom value
- #426ada
natural
--bbc-color-fill-natural-0
- fill-natural-0
- custom value
- #f5f5f5
--bbc-color-fill-natural-1
- fill-natural-1
- custom value
- #f3f3f3
--bbc-color-fill-natural-2
- fill-natural-2
- custom value
- #e9e9e9
--bbc-color-fill-natural-3
- fill-natural-3
- custom value
- #ffffff
--bbc-color-fill-natural-3-a70
- fill-natural-3-a70
- custom value
- rgba(#ffffff, 0.7)
--bbc-color-fill-natural-3-a40
- fill-natural-3-a40
- custom value
- rgba(#ffffff, 0.4)
--bbc-color-fill-natural-3-a20
- fill-natural-3-a20
- custom value
- rgba(#ffffff, 0.2)
--bbc-color-fill-natural-4
- fill-natural-4
- custom value
- #606060
--bbc-color-fill-natural-5
- fill-natural-5
- custom value
- #434343
accent
--bbc-color-fill-accent-0
- fill-accent-0
- custom value
- #ffffff
positive
--bbc-color-fill-positive-0-subtle
- fill-positive-0-subtle
- custom value
- #dcf6ee
attention
--bbc-color-fill-attention-0-subtle
- fill-attention-0-subtle
- custom value
- #fef2f2
negative
--bbc-color-fill-negative-0-subtle
- fill-negative-0-subtle
- custom value
- #fff4e1
disable
--bbc-color-fill-disable-0
- fill-disable-0
- custom value
- #dddddd
--bbc-color-fill-disable-1
- fill-disable-1
- custom value
- #e4e4e4
--bbc-color-fill-tablefix
- fill-tablefix
- custom value
- #f6faff
stroke
요소를 구분하기 위한 외곽선, 요소간의 구분선 등 경계 강조에 사용되는 색상입니다.
brand
--bbc-color-stroke-brand-primary
- stroke-brand-primary
- custom value
- #3b51db
natural
--bbc-color-stroke-natural-0
- stroke-natural-0
- custom value
- #e4e4e4
--bbc-color-stroke-natural-1
- stroke-natural-1
- custom value
- #c6c6c6
--bbc-color-stroke-natural-2
- stroke-natural-2
- custom value
- #9f9f9f
--bbc-color-stroke-natural-3
- stroke-natural-3
- custom value
- #2d2d2d
--bbc-color-stroke-natural-4
- stroke-natural-4
- custom value
- #ffffff
--bbc-color-stroke-natural-4-a70
- stroke-natural-4-a70
- custom value
- rgba(#ffffff, 0.7)
--bbc-color-stroke-natural-5
- stroke-natural-5
- custom value
- #e9e9e9
accent
--bbc-color-stroke-accent-0
- stroke-accent-0
- custom value
- #ffffff
positive
--bbc-color-stroke-positive-0
- stroke-positive-0
- custom value
- #077045
attention
--bbc-color-stroke-attention-0
- stroke-attention-0
- custom value
- #a46013
negative
--bbc-color-stroke-negative-0
- stroke-negative-0
- custom value
- #da201c
disable
--bbc-color-stroke-disable-0
- stroke-disable-0
- custom value
- #b5b5b5
required
--bbc-color-stroke-required-0
- stroke-required-0
- custom value
- #cd1e39
chip
chip 카테고리 색상입니다.
text
--bbc-color-chip-text-green
- chip-text-green
- custom value
- #067346
--bbc-color-chip-text-brown
- chip-text-brown
- custom value
- #a6470b
--bbc-color-chip-text-navy
- chip-text-navy
- custom value
- #2b3cd5
--bbc-color-chip-text-purple
- chip-text-purple
- custom value
- #b312b9
--bbc-color-chip-text-teal
- chip-text-teal
- custom value
- #086f91
--bbc-color-chip-text-red
- chip-text-red
- custom value
- #d51e1a
--bbc-color-chip-text-blue
- chip-text-blue
- custom value
- #0062ea
--bbc-color-chip-text-gray
- chip-text-gray
- custom value
- #5e5e5e
--bbc-color-chip-text-olive
- chip-text-olive
- custom value
- #567817
fill
--bbc-color-chip-fill-green
- chip-fill-green
- custom value
- #dcf6ee
--bbc-color-chip-fill-brown
- chip-fill-brown
- custom value
- #fdf3dc
--bbc-color-chip-fill-navy
- chip-fill-navy
- custom value
- #e4e7ff
--bbc-color-chip-fill-purple
- chip-fill-purple
- custom value
- #feeeff
--bbc-color-chip-fill-teal
- chip-fill-teal
- custom value
- #e7f2f6
--bbc-color-chip-fill-red
- chip-fill-red
- custom value
- #fef2f2
--bbc-color-chip-fill-blue
- chip-fill-blue
- custom value
- #eaf4ff
--bbc-color-chip-fill-gray
- chip-fill-gray
- custom value
- #eff2f8
--bbc-color-chip-fill-olive
- chip-fill-olive
- custom value
- #f1f6de
shadow
shadow 카테고리 색상입니다.
natural
--bbc-color-shadow-natural-0
- shadow-natural-0
- custom value
- 0 8px 20px rgba(#000000, 0.05)
--bbc-color-shadow-natural-1
- shadow-natural-1
- custom value
- 0 4px 8px rgba(#000000, 0.15)
--bbc-color-shadow-natural-2
- shadow-natural-2
- custom value
- 0 10px 20px rgba(#000000, 0.2)
gradient
gradient 카테고리 색상입니다.
brand
--bbc-color-gradient-brand-primary
- gradient-brand-primary
- custom value
- "#B9EEF7 0%, #4BABD9 100%"
natural
--bbc-color-gradient-natural-0
- gradient-natural-0
- custom value
- "#EFEFEF 0%, #D5D5D5 100%"
etc
etc 카테고리 색상입니다.
balloon
--bbc-color-etc-balloon-fill
- etc-balloon-fill
- custom value
- #ffc929
keyword
--bbc-color-etc-keyword-fill
- etc-keyword-fill
- custom value
- #fff3c9
chatbot
--bbc-color-etc-chatbot-fill
- etc-chatbot-fill
- custom value
- #00a6ff
--bbc-color-etc-chatbot-fill-hoverd
- etc-chatbot-fill-hoverd
- custom value
- #0095e4
--bbc-color-etc-chatbot-fill-pressed
- etc-chatbot-fill-pressed
- custom value
- #0281c5
popup
--bbc-color-etc-popup-text-0
- etc-popup-text-0
- custom value
- #97c2ff
comment
--bbc-color-etc-comment-text
- etc-comment-text
- custom value
- #1f5dc0
doc
--bbc-color-etc-doc-hwp
- etc-doc-hwp
- custom value
- #009ee2
--bbc-color-etc-doc-acrobat
- etc-doc-acrobat
- custom value
- #ef5151
--bbc-color-etc-doc-excel
- etc-doc-excel
- custom value
- #107c41
--bbc-color-etc-doc-ppt
- etc-doc-ppt
- custom value
- #c43e1c
--bbc-color-etc-doc-word
- etc-doc-word
- custom value
- #185abd
util
유틸리티용 특수 색상입니다.
--bbc-color-util-focus
- util-focus
- custom value
- #00cbde
--bbc-color-util-scroll-thumb
- util-scroll-thumb
- custom value
- rgba(#373737, 0.3)
--bbc-color-util-scroll-track
- util-scroll-track
- custom value
- rgba(#373737, 0.15)
data
data 카테고리 색상입니다.
graph
--bbc-color-data-graph-red
- data-graph-red
- custom value
- #e25d5d
--bbc-color-data-graph-pink
- data-graph-pink
- custom value
- #ff71a5
--bbc-color-data-graph-yellow
- data-graph-yellow
- custom value
- #ffc31f
--bbc-color-data-graph-yellowred
- data-graph-yellowred
- custom value
- #ff924c
--bbc-color-data-graph-greenyellow
- data-graph-greenyellow
- custom value
- #91d22a
--bbc-color-data-graph-green
- data-graph-green
- custom value
- #43af70
--bbc-color-data-graph-bluegreen
- data-graph-bluegreen
- custom value
- #36d0a4
--bbc-color-data-graph-lightblue
- data-graph-lightblue
- custom value
- #1da8d4
--bbc-color-data-graph-blue
- data-graph-blue
- custom value
- #4974c3
--bbc-color-data-graph-blue-a50
- data-graph-blue-a50
- custom value
- rgba(#4974c3, 0.5)
--bbc-color-data-graph-blue-a30
- data-graph-blue-a30
- custom value
- rgba(#4974c3, 0.3)
--bbc-color-data-graph-blue-a15
- data-graph-blue-a15
- custom value
- rgba(#4974c3, 0.15)
--bbc-color-data-graph-blue-a7
- data-graph-blue-a7
- custom value
- rgba(#4974c3, 0.07)
--bbc-color-data-graph-purpleblue
- data-graph-purpleblue
- custom value
- #34529f
--bbc-color-data-graph-purple
- data-graph-purple
- custom value
- #7f53cf
--bbc-color-data-graph-redpurple
- data-graph-redpurple
- custom value
- #cb62e4
--bbc-color-data-graph-gray
- data-graph-gray
- custom value
- #e8e8e8
text
기본 본문, 캡션, 버튼 등 UI 전반의 텍스트에 사용되는 색상입니다.
brand
--bbc-color-text-brand-primary
- text-brand-primary
- custom value
- #c84b1d
--bbc-color-text-brand-primary-deep
- text-brand-primary-deep
- custom value
- #b74319
natural
--bbc-color-text-natural-0
- text-natural-0
- custom value
- #2d2d2d
--bbc-color-text-natural-1
- text-natural-1
- custom value
- #6f6f6f
--bbc-color-text-natural-2
- text-natural-2
- custom value
- #ffffff
accent
--bbc-color-text-accent-0
- text-accent-0
- custom value
- #ffffff
positive
--bbc-color-text-positive-0
- text-positive-0
- custom value
- #077045
attention
--bbc-color-text-attention-0
- text-attention-0
- custom value
- #a46013
negative
--bbc-color-text-negative-0
- text-negative-0
- custom value
- #da201c
disable
--bbc-color-text-disable-0
- text-disable-0
- custom value
- #8e8e8e
placeholder
--bbc-color-text-placeholder-0
- text-placeholder-0
- custom value
- #757575
required
--bbc-color-text-required-0
- text-required-0
- custom value
- #cd1e39
icon
아이콘 버튼이나 시각적 보조 역할을 하는 아이콘 표현에 사용됩니다.
아이콘 버튼이나 시각적 보조 역할을 하는 아이콘 표현에 사용됩니다.
- AA: 사용자와 상호작용이 필요한 경우 사용(IconButton)
- AA (Large): 보조(디자인요소) 아이콘에 사용
brand
--bbc-color-icon-brand-primary
- icon-brand-primary
- custom value
- #b54200
--bbc-color-icon-brand-primary-deep
- icon-brand-primary-deep
- custom value
- #ac3f00
natural
--bbc-color-icon-natural-0
- icon-natural-0
- custom value
- #929292
--bbc-color-icon-natural-1
- icon-natural-1
- custom value
- #6f6f6f
--bbc-color-icon-natural-2
- icon-natural-2
- custom value
- #2d2d2d
--bbc-color-icon-natural-3
- icon-natural-3
- custom value
- #ffffff
accent
--bbc-color-icon-accent-0
- icon-accent-0
- custom value
- #ffffff
positive
--bbc-color-icon-positive-0
- icon-positive-0
- custom value
- #077045
attention
--bbc-color-icon-attention-0
- icon-attention-0
- custom value
- #a46013
negative
--bbc-color-icon-negative-0
- icon-negative-0
- custom value
- #da201c
disable
--bbc-color-icon-disable-0
- icon-disable-0
- custom value
- #929292
--bbc-color-icon-disable-1
- icon-disable-1
- custom value
- #b5b5b5
required
--bbc-color-icon-required-0
- icon-required-0
- custom value
- #cd1e39
alert
--bbc-color-icon-alert-0
- icon-alert-0
- custom value
- #e74c3c
--bbc-color-icon-like
- icon-like
- custom value
- #f05f4b
layer
layer 카테고리 색상입니다.
brand
--bbc-color-layer-brand-primary
- layer-brand-primary
- custom value
- #fcf6e2
floor
--bbc-color-layer-floor-0
- layer-floor-0
- custom value
- #ffffff
overlay
--bbc-color-layer-overlay-0
- layer-overlay-0
- custom value
- rgba(#000000, 0.5)
fill
fill 카테고리 색상입니다.
brand
--bbc-color-fill-brand-primary
- fill-brand-primary
- custom value
- #b54200
--bbc-color-fill-brand-primary-hovered
- fill-brand-primary-hovered
- custom value
- #ac3f00
--bbc-color-fill-brand-primary-pressed
- fill-brand-primary-pressed
- custom value
- #a63d00
--bbc-color-fill-brand-primary-subtle
- fill-brand-primary-subtle
- custom value
- #fcf0e2
--bbc-color-fill-brand-primary-subtle-hovered
- fill-brand-primary-subtle-hovered
- custom value
- #fcebd8
--bbc-color-fill-brand-primary-subtle-pressed
- fill-brand-primary-subtle-pressed
- custom value
- #fcebd8
--bbc-color-fill-brand-secondary
- fill-brand-secondary
- custom value
- #ca4a00
natural
--bbc-color-fill-natural-0
- fill-natural-0
- custom value
- #f5f5f5
--bbc-color-fill-natural-1
- fill-natural-1
- custom value
- #f3f3f3
--bbc-color-fill-natural-2
- fill-natural-2
- custom value
- #e9e9e9
--bbc-color-fill-natural-3
- fill-natural-3
- custom value
- #ffffff
--bbc-color-fill-natural-3-a70
- fill-natural-3-a70
- custom value
- rgba(#ffffff, 0.7)
--bbc-color-fill-natural-3-a40
- fill-natural-3-a40
- custom value
- rgba(#ffffff, 0.4)
--bbc-color-fill-natural-3-a20
- fill-natural-3-a20
- custom value
- rgba(#ffffff, 0.2)
--bbc-color-fill-natural-4
- fill-natural-4
- custom value
- #606060
--bbc-color-fill-natural-5
- fill-natural-5
- custom value
- #434343
accent
--bbc-color-fill-accent-0
- fill-accent-0
- custom value
- #ffffff
positive
--bbc-color-fill-positive-0-subtle
- fill-positive-0-subtle
- custom value
- #dcf6ee
attention
--bbc-color-fill-attention-0-subtle
- fill-attention-0-subtle
- custom value
- #fef2f2
negative
--bbc-color-fill-negative-0-subtle
- fill-negative-0-subtle
- custom value
- #fff4e1
disable
--bbc-color-fill-disable-0
- fill-disable-0
- custom value
- #dddddd
--bbc-color-fill-disable-1
- fill-disable-1
- custom value
- #e4e4e4
--bbc-color-fill-tablefix
- fill-tablefix
- custom value
- #f6faff
stroke
요소를 구분하기 위한 외곽선, 요소간의 구분선 등 경계 강조에 사용되는 색상입니다.
brand
--bbc-color-stroke-brand-primary
- stroke-brand-primary
- custom value
- #c84b1d
natural
--bbc-color-stroke-natural-0
- stroke-natural-0
- custom value
- #e4e4e4
--bbc-color-stroke-natural-1
- stroke-natural-1
- custom value
- #c6c6c6
--bbc-color-stroke-natural-2
- stroke-natural-2
- custom value
- #9f9f9f
--bbc-color-stroke-natural-3
- stroke-natural-3
- custom value
- #2d2d2d
--bbc-color-stroke-natural-4
- stroke-natural-4
- custom value
- #ffffff
--bbc-color-stroke-natural-4-a70
- stroke-natural-4-a70
- custom value
- rgba(#ffffff, 0.7)
--bbc-color-stroke-natural-5
- stroke-natural-5
- custom value
- #e9e9e9
accent
--bbc-color-stroke-accent-0
- stroke-accent-0
- custom value
- #ffffff
positive
--bbc-color-stroke-positive-0
- stroke-positive-0
- custom value
- #077045
attention
--bbc-color-stroke-attention-0
- stroke-attention-0
- custom value
- #a46013
negative
--bbc-color-stroke-negative-0
- stroke-negative-0
- custom value
- #da201c
disable
--bbc-color-stroke-disable-0
- stroke-disable-0
- custom value
- #b5b5b5
required
--bbc-color-stroke-required-0
- stroke-required-0
- custom value
- #cd1e39
chip
chip 카테고리 색상입니다.
text
--bbc-color-chip-text-green
- chip-text-green
- custom value
- #067346
--bbc-color-chip-text-brown
- chip-text-brown
- custom value
- #a6470b
--bbc-color-chip-text-navy
- chip-text-navy
- custom value
- #2b3cd5
--bbc-color-chip-text-purple
- chip-text-purple
- custom value
- #b312b9
--bbc-color-chip-text-teal
- chip-text-teal
- custom value
- #086f91
--bbc-color-chip-text-red
- chip-text-red
- custom value
- #d51e1a
--bbc-color-chip-text-blue
- chip-text-blue
- custom value
- #0062ea
--bbc-color-chip-text-gray
- chip-text-gray
- custom value
- #5e5e5e
--bbc-color-chip-text-olive
- chip-text-olive
- custom value
- #567817
fill
--bbc-color-chip-fill-green
- chip-fill-green
- custom value
- #dcf6ee
--bbc-color-chip-fill-brown
- chip-fill-brown
- custom value
- #fdf3dc
--bbc-color-chip-fill-navy
- chip-fill-navy
- custom value
- #e4e7ff
--bbc-color-chip-fill-purple
- chip-fill-purple
- custom value
- #feeeff
--bbc-color-chip-fill-teal
- chip-fill-teal
- custom value
- #e7f2f6
--bbc-color-chip-fill-red
- chip-fill-red
- custom value
- #fef2f2
--bbc-color-chip-fill-blue
- chip-fill-blue
- custom value
- #eaf4ff
--bbc-color-chip-fill-gray
- chip-fill-gray
- custom value
- #eff2f8
--bbc-color-chip-fill-olive
- chip-fill-olive
- custom value
- #f1f6de
shadow
shadow 카테고리 색상입니다.
natural
--bbc-color-shadow-natural-0
- shadow-natural-0
- custom value
- 0 8px 20px rgba(#000000, 0.05)
--bbc-color-shadow-natural-1
- shadow-natural-1
- custom value
- 0 4px 8px rgba(#000000, 0.15)
--bbc-color-shadow-natural-2
- shadow-natural-2
- custom value
- 0 10px 20px rgba(#000000, 0.2)
gradient
gradient 카테고리 색상입니다.
brand
--bbc-color-gradient-brand-primary
- gradient-brand-primary
- custom value
- "#F7D5B9 0%, #FFB171 100%"
natural
--bbc-color-gradient-natural-0
- gradient-natural-0
- custom value
- "#EFEFEF 0%, #D5D5D5 100%"
etc
etc 카테고리 색상입니다.
balloon
--bbc-color-etc-balloon-fill
- etc-balloon-fill
- custom value
- #ffc929
keyword
--bbc-color-etc-keyword-fill
- etc-keyword-fill
- custom value
- #fff3c9
chatbot
--bbc-color-etc-chatbot-fill
- etc-chatbot-fill
- custom value
- #00a6ff
--bbc-color-etc-chatbot-fill-hoverd
- etc-chatbot-fill-hoverd
- custom value
- #0095e4
--bbc-color-etc-chatbot-fill-pressed
- etc-chatbot-fill-pressed
- custom value
- #0281c5
popup
--bbc-color-etc-popup-text-0
- etc-popup-text-0
- custom value
- #97c2ff
comment
--bbc-color-etc-comment-text
- etc-comment-text
- custom value
- #1f5dc0
doc
--bbc-color-etc-doc-hwp
- etc-doc-hwp
- custom value
- #009ee2
--bbc-color-etc-doc-acrobat
- etc-doc-acrobat
- custom value
- #ef5151
--bbc-color-etc-doc-excel
- etc-doc-excel
- custom value
- #107c41
--bbc-color-etc-doc-ppt
- etc-doc-ppt
- custom value
- #c43e1c
--bbc-color-etc-doc-word
- etc-doc-word
- custom value
- #185abd
util
유틸리티용 특수 색상입니다.
--bbc-color-util-focus
- util-focus
- custom value
- #00cbde
--bbc-color-util-scroll-thumb
- util-scroll-thumb
- custom value
- rgba(#373737, 0.3)
--bbc-color-util-scroll-track
- util-scroll-track
- custom value
- rgba(#373737, 0.15)
data
data 카테고리 색상입니다.
graph
--bbc-color-data-graph-red
- data-graph-red
- custom value
- #e25d5d
--bbc-color-data-graph-pink
- data-graph-pink
- custom value
- #ff71a5
--bbc-color-data-graph-yellow
- data-graph-yellow
- custom value
- #ffc31f
--bbc-color-data-graph-yellowred
- data-graph-yellowred
- custom value
- #ff924c
--bbc-color-data-graph-greenyellow
- data-graph-greenyellow
- custom value
- #91d22a
--bbc-color-data-graph-green
- data-graph-green
- custom value
- #43af70
--bbc-color-data-graph-bluegreen
- data-graph-bluegreen
- custom value
- #36d0a4
--bbc-color-data-graph-lightblue
- data-graph-lightblue
- custom value
- #1da8d4
--bbc-color-data-graph-blue
- data-graph-blue
- custom value
- #4974c3
--bbc-color-data-graph-blue-a50
- data-graph-blue-a50
- custom value
- rgba(#4974c3, 0.5)
--bbc-color-data-graph-blue-a30
- data-graph-blue-a30
- custom value
- rgba(#4974c3, 0.3)
--bbc-color-data-graph-blue-a15
- data-graph-blue-a15
- custom value
- rgba(#4974c3, 0.15)
--bbc-color-data-graph-blue-a7
- data-graph-blue-a7
- custom value
- rgba(#4974c3, 0.07)
--bbc-color-data-graph-purpleblue
- data-graph-purpleblue
- custom value
- #34529f
--bbc-color-data-graph-purple
- data-graph-purple
- custom value
- #7f53cf
--bbc-color-data-graph-redpurple
- data-graph-redpurple
- custom value
- #cb62e4
--bbc-color-data-graph-gray
- data-graph-gray
- custom value
- #e8e8e8
text
기본 본문, 캡션, 버튼 등 UI 전반의 텍스트에 사용되는 색상입니다.
brand
--bbc-color-text-brand-primary
- text-brand-primary
- custom value
- #0a7f5c
--bbc-color-text-brand-primary-deep
- text-brand-primary-deep
- custom value
- #097454
natural
--bbc-color-text-natural-0
- text-natural-0
- custom value
- #2d2d2d
--bbc-color-text-natural-1
- text-natural-1
- custom value
- #6f6f6f
--bbc-color-text-natural-2
- text-natural-2
- custom value
- #ffffff
accent
--bbc-color-text-accent-0
- text-accent-0
- custom value
- #ffffff
positive
--bbc-color-text-positive-0
- text-positive-0
- custom value
- #077045
negative
--bbc-color-text-negative-0
- text-negative-0
- custom value
- #da201c
attention
--bbc-color-text-attention-0
- text-attention-0
- custom value
- #a46013
disable
--bbc-color-text-disable-0
- text-disable-0
- custom value
- #8e8e8e
placeholder
--bbc-color-text-placeholder-0
- text-placeholder-0
- custom value
- #757575
required
--bbc-color-text-required-0
- text-required-0
- custom value
- #cd1e39
icon
아이콘 버튼이나 시각적 보조 역할을 하는 아이콘 표현에 사용됩니다.
아이콘 버튼이나 시각적 보조 역할을 하는 아이콘 표현에 사용됩니다.
- AA: 사용자와 상호작용이 필요한 경우 사용(IconButton)
- AA (Large): 보조(디자인요소) 아이콘에 사용
brand
--bbc-color-icon-brand-primary
- icon-brand-primary
- custom value
- #0a7f5c
--bbc-color-icon-brand-primary-deep
- icon-brand-primary-deep
- custom value
- #097454
natural
--bbc-color-icon-natural-0
- icon-natural-0
- custom value
- #929292
--bbc-color-icon-natural-1
- icon-natural-1
- custom value
- #6f6f6f
--bbc-color-icon-natural-2
- icon-natural-2
- custom value
- #2d2d2d
--bbc-color-icon-natural-3
- icon-natural-3
- custom value
- #ffffff
accent
--bbc-color-icon-accent-0
- icon-accent-0
- custom value
- #ffffff
positive
--bbc-color-icon-positive-0
- icon-positive-0
- custom value
- #077045
attention
--bbc-color-icon-attention-0
- icon-attention-0
- custom value
- #a46013
negative
--bbc-color-icon-negative-0
- icon-negative-0
- custom value
- #da201c
disable
--bbc-color-icon-disable-0
- icon-disable-0
- custom value
- #929292
--bbc-color-icon-disable-1
- icon-disable-1
- custom value
- #b5b5b5
required
--bbc-color-icon-required-0
- icon-required-0
- custom value
- #cd1e39
alert
--bbc-color-icon-alert-0
- icon-alert-0
- custom value
- #e74c3c
--bbc-color-icon-like
- icon-like
- custom value
- #f05f4b
layer
layer 카테고리 색상입니다.
brand
--bbc-color-layer-brand-primary
- layer-brand-primary
- custom value
- #e6f5ff
floor
--bbc-color-layer-floor-0
- layer-floor-0
- custom value
- #ffffff
overlay
--bbc-color-layer-overlay-0
- layer-overlay-0
- custom value
- rgba(#000000, 0.5)
fill
fill 카테고리 색상입니다.
brand
--bbc-color-fill-brand-primary
- fill-brand-primary
- custom value
- #0a7f5c
--bbc-color-fill-brand-primary-hovered
- fill-brand-primary-hovered
- custom value
- #04684a
--bbc-color-fill-brand-primary-pressed
- fill-brand-primary-pressed
- custom value
- #076448
--bbc-color-fill-brand-primary-subtle
- fill-brand-primary-subtle
- custom value
- #e6fdf2
--bbc-color-fill-brand-primary-subtle-hovered
- fill-brand-primary-subtle-hovered
- custom value
- #dcf2e7
--bbc-color-fill-brand-primary-subtle-pressed
- fill-brand-primary-subtle-pressed
- custom value
- #dcf2e7
--bbc-color-fill-brand-secondary
- fill-brand-secondary
- custom value
- #0c8460
natural
--bbc-color-fill-natural-0
- fill-natural-0
- custom value
- #f5f5f5
--bbc-color-fill-natural-1
- fill-natural-1
- custom value
- #f3f3f3
--bbc-color-fill-natural-2
- fill-natural-2
- custom value
- #e9e9e9
--bbc-color-fill-natural-3
- fill-natural-3
- custom value
- #ffffff
--bbc-color-fill-natural-3-a70
- fill-natural-3-a70
- custom value
- rgba(#ffffff, 0.7)
--bbc-color-fill-natural-3-a40
- fill-natural-3-a40
- custom value
- rgba(#ffffff, 0.4)
--bbc-color-fill-natural-3-a20
- fill-natural-3-a20
- custom value
- rgba(#ffffff, 0.2)
--bbc-color-fill-natural-4
- fill-natural-4
- custom value
- #606060
--bbc-color-fill-natural-5
- fill-natural-5
- custom value
- #434343
accent
--bbc-color-fill-accent-0
- fill-accent-0
- custom value
- #ffffff
positive
--bbc-color-fill-positive-0-subtle
- fill-positive-0-subtle
- custom value
- #dcf6ee
attention
--bbc-color-fill-attention-0-subtle
- fill-attention-0-subtle
- custom value
- #fef2f2
negative
--bbc-color-fill-negative-0-subtle
- fill-negative-0-subtle
- custom value
- #fff4e1
disable
--bbc-color-fill-disable-0
- fill-disable-0
- custom value
- #dddddd
--bbc-color-fill-disable-1
- fill-disable-1
- custom value
- #e4e4e4
--bbc-color-fill-tablefix
- fill-tablefix
- custom value
- #f6faff
stroke
요소를 구분하기 위한 외곽선, 요소간의 구분선 등 경계 강조에 사용되는 색상입니다.
brand
--bbc-color-stroke-brand-primary
- stroke-brand-primary
- custom value
- #0a7f5c
natural
--bbc-color-stroke-natural-0
- stroke-natural-0
- custom value
- #e4e4e4
--bbc-color-stroke-natural-1
- stroke-natural-1
- custom value
- #c6c6c6
--bbc-color-stroke-natural-2
- stroke-natural-2
- custom value
- #9f9f9f
--bbc-color-stroke-natural-3
- stroke-natural-3
- custom value
- #2d2d2d
--bbc-color-stroke-natural-4
- stroke-natural-4
- custom value
- #ffffff
--bbc-color-stroke-natural-4-a70
- stroke-natural-4-a70
- custom value
- rgba(#ffffff, 0.7)
--bbc-color-stroke-natural-5
- stroke-natural-5
- custom value
- #e9e9e9
accent
--bbc-color-stroke-accent-0
- stroke-accent-0
- custom value
- #ffffff
positive
--bbc-color-stroke-positive-0
- stroke-positive-0
- custom value
- #077045
attention
--bbc-color-stroke-attention-0
- stroke-attention-0
- custom value
- #a46013
negative
--bbc-color-stroke-negative-0
- stroke-negative-0
- custom value
- #da201c
disable
--bbc-color-stroke-disable-0
- stroke-disable-0
- custom value
- #b5b5b5
required
--bbc-color-stroke-required-0
- stroke-required-0
- custom value
- #cd1e39
chip
chip 카테고리 색상입니다.
text
--bbc-color-chip-text-green
- chip-text-green
- custom value
- #067346
--bbc-color-chip-text-brown
- chip-text-brown
- custom value
- #a6470b
--bbc-color-chip-text-navy
- chip-text-navy
- custom value
- #2b3cd5
--bbc-color-chip-text-purple
- chip-text-purple
- custom value
- #b312b9
--bbc-color-chip-text-teal
- chip-text-teal
- custom value
- #086f91
--bbc-color-chip-text-red
- chip-text-red
- custom value
- #d51e1a
--bbc-color-chip-text-blue
- chip-text-blue
- custom value
- #0062ea
--bbc-color-chip-text-gray
- chip-text-gray
- custom value
- #5e5e5e
--bbc-color-chip-text-olive
- chip-text-olive
- custom value
- #567817
fill
--bbc-color-chip-fill-green
- chip-fill-green
- custom value
- #dcf6ee
--bbc-color-chip-fill-brown
- chip-fill-brown
- custom value
- #fdf3dc
--bbc-color-chip-fill-navy
- chip-fill-navy
- custom value
- #e4e7ff
--bbc-color-chip-fill-purple
- chip-fill-purple
- custom value
- #feeeff
--bbc-color-chip-fill-teal
- chip-fill-teal
- custom value
- #e7f2f6
--bbc-color-chip-fill-red
- chip-fill-red
- custom value
- #fef2f2
--bbc-color-chip-fill-blue
- chip-fill-blue
- custom value
- #eaf4ff
--bbc-color-chip-fill-gray
- chip-fill-gray
- custom value
- #eff2f8
--bbc-color-chip-fill-olive
- chip-fill-olive
- custom value
- #f1f6de
shadow
shadow 카테고리 색상입니다.
natural
--bbc-color-shadow-natural-0
- shadow-natural-0
- custom value
- 0 8px 20px rgba(#000000, 0.05)
--bbc-color-shadow-natural-1
- shadow-natural-1
- custom value
- 0 4px 8px rgba(#000000, 0.15)
--bbc-color-shadow-natural-2
- shadow-natural-2
- custom value
- 0 10px 20px rgba(#000000, 0.2)
gradient
gradient 카테고리 색상입니다.
brand
--bbc-color-gradient-brand-primary
- gradient-brand-primary
- custom value
- "#C9EBE1 0%, #9DECD5 100%"
natural
--bbc-color-gradient-natural-0
- gradient-natural-0
- custom value
- "#EFEFEF 0%, #D5D5D5 100%"
etc
etc 카테고리 색상입니다.
balloon
--bbc-color-etc-balloon-fill
- etc-balloon-fill
- custom value
- #ffc929
keyword
--bbc-color-etc-keyword-fill
- etc-keyword-fill
- custom value
- #fff3c9
chatbot
--bbc-color-etc-chatbot-fill
- etc-chatbot-fill
- custom value
- #00a6ff
--bbc-color-etc-chatbot-fill-hoverd
- etc-chatbot-fill-hoverd
- custom value
- #0095e4
--bbc-color-etc-chatbot-fill-pressed
- etc-chatbot-fill-pressed
- custom value
- #0281c5
popup
--bbc-color-etc-popup-text-0
- etc-popup-text-0
- custom value
- #97c2ff
comment
--bbc-color-etc-comment-text
- etc-comment-text
- custom value
- #1f5dc0
doc
--bbc-color-etc-doc-hwp
- etc-doc-hwp
- custom value
- #009ee2
--bbc-color-etc-doc-acrobat
- etc-doc-acrobat
- custom value
- #ef5151
--bbc-color-etc-doc-excel
- etc-doc-excel
- custom value
- #107c41
--bbc-color-etc-doc-ppt
- etc-doc-ppt
- custom value
- #c43e1c
--bbc-color-etc-doc-word
- etc-doc-word
- custom value
- #185abd
util
유틸리티용 특수 색상입니다.
--bbc-color-util-focus
- util-focus
- custom value
- #00cbde
--bbc-color-util-scroll-thumb
- util-scroll-thumb
- custom value
- rgba(#373737, 0.3)
--bbc-color-util-scroll-track
- util-scroll-track
- custom value
- rgba(#373737, 0.15)
data
data 카테고리 색상입니다.
graph
--bbc-color-data-graph-red
- data-graph-red
- custom value
- #e25d5d
--bbc-color-data-graph-pink
- data-graph-pink
- custom value
- #ff71a5
--bbc-color-data-graph-yellow
- data-graph-yellow
- custom value
- #ffc31f
--bbc-color-data-graph-yellowred
- data-graph-yellowred
- custom value
- #ff924c
--bbc-color-data-graph-greenyellow
- data-graph-greenyellow
- custom value
- #91d22a
--bbc-color-data-graph-green
- data-graph-green
- custom value
- #43af70
--bbc-color-data-graph-bluegreen
- data-graph-bluegreen
- custom value
- #36d0a4
--bbc-color-data-graph-lightblue
- data-graph-lightblue
- custom value
- #1da8d4
--bbc-color-data-graph-blue
- data-graph-blue
- custom value
- #4974c3
--bbc-color-data-graph-blue-a50
- data-graph-blue-a50
- custom value
- rgba(#4974c3, 0.5)
--bbc-color-data-graph-blue-a30
- data-graph-blue-a30
- custom value
- rgba(#4974c3, 0.3)
--bbc-color-data-graph-blue-a15
- data-graph-blue-a15
- custom value
- rgba(#4974c3, 0.15)
--bbc-color-data-graph-blue-a7
- data-graph-blue-a7
- custom value
- rgba(#4974c3, 0.07)
--bbc-color-data-graph-purpleblue
- data-graph-purpleblue
- custom value
- #34529f
--bbc-color-data-graph-purple
- data-graph-purple
- custom value
- #7f53cf
--bbc-color-data-graph-redpurple
- data-graph-redpurple
- custom value
- #cb62e4
--bbc-color-data-graph-gray
- data-graph-gray
- custom value
- #e8e8e8