Color

디자인 시스템에서 미리 정의된 컬러 네임스페이스

enum Color

Overview

Color는 모든 Montage 컴포넌트에서 일관된 색상을 사용할 수 있도록 설계된 색상 체계를 제공합니다. Atomic과 Semantic으로 구분된 두 가지 색상 타입을 지원합니다.

// Atomic 색상 사용
let atomicColor = Color.Atomic.blue50
let uiColor = UIColor.atomic(.blue50)
let swiftUIColor = SwiftUI.Color.atomic(.blue50)

// Semantic 색상 사용
let semanticColor = Color.Semantic.surfaceBrandPrimary
let uiColor = UIColor.semantic(.surfaceBrandPrimary)
let swiftUIColor = SwiftUI.Color.semantic(.surfaceBrandPrimary)

Note

UI 구성요소를 개발할 때는 직접 Atomic 색상을 사용하기보다 Semantic 색상을 사용하는 것이 권장됩니다. 이는 다크 모드와 같은 다양한 환경에서 일관된 디자인을 유지하는 데 도움이 됩니다.

Warning

Color 네임스페이스 충돌

Montage는 public enum Color(이 문서의 enum)와 extension SwiftUI.Color { static func semantic/atomic }를 동시에 정의합니다. 그래서 표현식 Color.semantic(.foo)는 SwiftUI.Color로 잘 해석되지만, 타입 어노테이션 위치에서 그냥 Color라고 쓰면 컴파일러가 Montage.Color(enum)로 추론하여 Cannot convert value of type 'SwiftUI.Color' to specified type 'Color' 에러를 냅니다.

stored property·return type·parameter type 등 타입 위치에는 반드시 SwiftUI.Color 로 한정 표기하십시오.
// ✅ 올바름
private var backgroundColor: SwiftUI.Color {
    Color.semantic(.surfaceElevatedSecondary)
}

// ❌ 빌드 실패
private var backgroundColor: Color { Color.semantic(.surfaceElevatedSecondary) }

Topics

Enumerations

enum Atomic

디자인 시스템에서 정의된 Atomic 컬러 팔레트

Overview

Atomic 색상은 디자인 시스템의 기본 색상 값을 정의합니다. 이 색상들은 직접 사용하기보다는 Semantic 색상의 기반이 되는 기본 색상 팔레트로 활용됩니다.
```
// UIKit에서 사용
view.backgroundColor = UIColor.atomic(.blue50)

// SwiftUI에서 사용
Text("텍스트")
    .foregroundColor(.atomic(.red60))
```
Note

숫자가 높을수록 밝은 색상을 나타내며, 100에 가까울수록 흰색에 가깝고 0에 가까울수록 검은색에 가깝습니다.

Enumeration Cases

case blue0

가장 어두운 파란색 (#000000)

case blue10

매우 어두운 파란색 (#001536)

case blue100

가장 밝은 파란색 (#FFFFFF)

case blue20

거의 검은색 파란색 (#002966)

case blue30

거의 검은색에 가까운 파란색 (#003E9C)

case blue40

매우 어두운 파란색 (#0054D1)

case blue45

어두운 파란색 (#005EEB)

case blue50

중간 어두운 파란색 (#0066FF)

case blue55

어두운 파란색 (#1A75FF)

case blue60

중간 어두운 파란색 (#3385FF)

case blue65

약간 어두운 파란색 (#4F95FF)

case blue70

중간 파란색 (#69A5FF)

case blue80

중간 밝기의 파란색 (#9EC5FF)

case blue90

약간 밝은 파란색 (#C9DEFE)

case blue95

밝은 파란색 (#EAF2FE)

case blue99

매우 밝은 파란색 (#F7FBFF)

case common0

검은색 계열의 기본 색상 (#000000)

case common100

흰색 계열의 기본 색상 (#FFFFFF)

case coolNeutral0

가장 어두운 차가운 중립 색상 (#000000)

case coolNeutral10

매우 어두운 차가운 중립 색상 (#171719)

case coolNeutral100

가장 밝은 차가운 중립 색상 (#FFFFFF)

case coolNeutral15

거의 검은색 차가운 중립 색상 (#1B1C1E)

case coolNeutral17

거의 검은색에 가까운 차가운 중립 색상 (#212225)

case coolNeutral20

매우 어두운 차가운 중립 색상 (#292A2D)

case coolNeutral22

어두운 차가운 중립 색상 (#2E2F33)

case coolNeutral23

매우 어두운 차가운 중립 색상 (#333438)

case coolNeutral25

특별한 어두운 차가운 중립 색상 (#37383C)

case coolNeutral30

매우 어두운 차가운 중립 색상 (#46474C)

case coolNeutral40

어두운 차가운 중립 색상 (#5A5C63)

case coolNeutral5

매우 어두운 차가운 중립 색상 (#0F0F10)

case coolNeutral50

중간 어두운 차가운 중립 색상 (#70737C)

case coolNeutral60

약간 어두운 차가운 중립 색상 (#878A93)

case coolNeutral7

거의 검은색에 가까운 차가운 중립 색상 (#141415)

case coolNeutral70

중간 차가운 중립 색상 (#989BA2)

case coolNeutral80

중간 밝기의 차가운 중립 색상 (#AEB0B6)

case coolNeutral90

약간 밝은 차가운 중립 색상 (#C2C4C8)

case coolNeutral95

밝은 차가운 중립 색상 (#DBDCDF)

case coolNeutral96

중간 밝기의 차가운 중립 색상 (#E1E2E4)

case coolNeutral97

약간 밝은 차가운 중립 색상 (#EAEBEC)

case coolNeutral98

밝은 차가운 중립 색상 (#F4F4F5)

case coolNeutral99

매우 밝은 차가운 중립 색상 (#F7F7F8)

case cyan0

가장 어두운 시안색 (#000000)

case cyan10

거의 검은색 시안색 (#00252B)

case cyan100

가장 밝은 시안색 (#FFFFFF)

case cyan20

거의 검은색에 가까운 시안색 (#004854)

case cyan30

매우 어두운 시안색 (#006F82)

case cyan40

어두운 시안색 (#0098B2)

case cyan50

중간 어두운 시안색 (#00BDDE)

case cyan60

약간 어두운 시안색 (#28D0ED)

case cyan70

중간 시안색 (#57DFF7)

case cyan80

중간 밝기의 시안색 (#8AEDFF)

case cyan90

약간 밝은 시안색 (#B5F4FF)

case cyan95

밝은 시안색 (#DEFAFF)

case cyan99

매우 밝은 시안색 (#F7FEFF)

case green0

가장 어두운 초록색 (#000000)

case green10

거의 검은색 초록색 (#00240C)

case green100

가장 밝은 초록색 (#FFFFFF)

case green20

거의 검은색에 가까운 초록색 (#004517)

case green30

매우 어두운 초록색 (#006E25)

case green40

어두운 초록색 (#009632)

case green50

중간 어두운 초록색 (#00BF40)

case green60

약간 어두운 초록색 (#1ED45A)

case green70

중간 초록색 (#49E57D)

case green80

중간 밝기의 초록색 (#7DF5A5)

case green90

약간 밝은 초록색 (#ACFCC7)

case green95

밝은 초록색 (#D9FFE6)

case green99

매우 밝은 초록색 (#F2FFF6)

case lightBlue0

가장 어두운 하늘색 (#000000)

case lightBlue10

거의 검은색 하늘색 (#002130)

case lightBlue100

가장 밝은 하늘색 (#FFFFFF)

case lightBlue20

거의 검은색에 가까운 하늘색 (#004261)

case lightBlue30

매우 어두운 하늘색 (#006796)

case lightBlue40

어두운 하늘색 (#008DCF)

case lightBlue50

중간 어두운 하늘색 (#00AEFF)

case lightBlue60

약간 어두운 하늘색 (#3DC2FF)

case lightBlue70

중간 하늘색 (#70D2FF)

case lightBlue80

중간 밝기의 하늘색 (#A1E1FF)

case lightBlue90

약간 밝은 하늘색 (#C4ECFE)

case lightBlue95

밝은 하늘색 (#E5F6FE)

case lightBlue99

매우 밝은 하늘색 (#F7FDFF)

case lime0

가장 어두운 라임색 (#000000)

case lime10

거의 검은색 라임색 (#112900)

case lime100

가장 밝은 라임색 (#FFFFFF)

case lime20

거의 검은색에 가까운 라임색 (#225200)

case lime30

매우 어두운 라임색 (#347D00)

case lime37

특별한 어두운 라임색 (#429E00)

case lime40

어두운 라임색 (#48AD00)

case lime50

중간 어두운 라임색 (#58CF04)

case lime60

약간 어두운 라임색 (#6BE016)

case lime70

중간 라임색 (#88F03E)

case lime80

중간 밝기의 라임색 (#AEF779)

case lime90

약간 밝은 라임색 (#CCFCA9)

case lime95

밝은 라임색 (#E6FFD4)

case lime99

매우 밝은 라임색 (#F8FFF2)

case neutral0

가장 어두운 중립 색상 (#000000)

case neutral10

거의 검은색 중립 색상 (#171717)

case neutral100

가장 밝은 중립 색상 (#FFFFFF)

case neutral15

거의 검은색에 가까운 중립 색상 (#1C1C1C)

case neutral20

매우 어두운 중립 색상 (#2A2A2A)

case neutral22

특별한 어두운 중립 색상 (#303030)

case neutral30

매우 어두운 중립 색상 (#474747)

case neutral40

어두운 중립 색상 (#5C5C5C)

case neutral5

매우 어두운 중립 색상 (#0F0F0F)

case neutral50

중간 어두운 중립 색상 (#737373)

case neutral60

약간 어두운 중립 색상 (#8A8A8A)

case neutral70

중간 중립 색상 (#9B9B9B)

case neutral80

중간 밝기의 중립 색상 (#B0B0B0)

case neutral90

약간 밝은 중립 색상 (#C4C4C4)

case neutral95

밝은 중립 색상 (#DCDCDC)

case neutral99

매우 밝은 중립 색상 (#F7F7F7)

case orange0

가장 어두운 주황색 (#000000)

case orange10

거의 검은색 주황색 (#361E00)

case orange100

가장 밝은 주황색 (#FFFFFF)

case orange20

거의 검은색에 가까운 주황색 (#663A00)

case orange30

매우 어두운 주황색 (#9C5800)

case orange39

특별한 어두운 주황색 (#D17600)

case orange40

어두운 주황색 (#D47800)

case orange50

중간 어두운 주황색 (#FF9200)

case orange60

약간 어두운 주황색 (#FFA938)

case orange70

중간 주황색 (#FFC06E)

case orange80

중간 밝기의 주황색 (#FFD49C)

case orange90

약간 밝은 주황색 (#FEE6C6)

case orange95

밝은 주황색 (#FEF4E6)

case orange99

매우 밝은 주황색 (#FFFCF7)

case pink0

가장 어두운 분홍색 (#000000)

case pink10

거의 검은색 분홍색 (#3D0133)

case pink100

가장 밝은 분홍색 (#FFFFFF)

case pink20

거의 검은색에 가까운 분홍색 (#730560)

case pink30

매우 어두운 분홍색 (#A81690)

case pink40

어두운 분홍색 (#D331B8)

case pink46

특별한 어두운 분홍색 (#E846CD)

case pink50

중간 어두운 분홍색 (#F553DA)

case pink60

약간 어두운 분홍색 (#FA73E3)

case pink70

중간 분홍색 (#FF94ED)

case pink80

중간 밝기의 분홍색 (#FFB8F3)

case pink90

약간 밝은 분홍색 (#FED3F7)

case pink95

밝은 분홍색 (#FEECFB)

case pink99

매우 밝은 분홍색 (#FFFAFE)

case purple0

가장 어두운 자주색 (#000000)

case purple10

거의 검은색 자주색 (#290247)

case purple100

가장 밝은 자주색 (#FEFFFF)

case purple20

거의 검은색에 가까운 자주색 (#580A7D)

case purple30

매우 어두운 자주색 (#861CB8)

case purple40

어두운 자주색 (#AD36E3)

case purple50

중간 어두운 자주색 (#CB59FF)

case purple60

약간 어두운 자주색 (#D478FF)

case purple70

중간 자주색 (#DE96FF)

case purple80

중간 밝기의 자주색 (#E9BAFF)

case purple90

약간 밝은 자주색 (#F2D6FF)

case purple95

밝은 자주색 (#F9EDFF)

case purple99

매우 밝은 자주색 (#FEFBFF)

case red0

가장 어두운 빨간색 (#000000)

case red10

거의 검은색 빨간색 (#3B0101)

case red100

가장 밝은 빨간색 (#FFFFFF)

case red20

거의 검은색에 가까운 빨간색 (#730303)

case red30

매우 어두운 빨간색 (#B00C0C)

case red40

어두운 빨간색 (#E52222)

case red50

중간 어두운 빨간색 (#FF4242)

case red60

약간 어두운 빨간색 (#FF6363)

case red70

중간 빨간색 (#FF8C8C)

case red80

중간 밝기의 빨간색 (#FFB5B5)

case red90

약간 밝은 빨간색 (#FED5D5)

case red95

밝은 빨간색 (#FEECEC)

case red99

매우 밝은 빨간색 (#FFFAFA)

case redOrange0

가장 어두운 붉은 주황색 (#000000)

case redOrange10

거의 검은색 붉은 주황색 (#290F00)

case redOrange100

가장 밝은 붉은 주황색 (#FFFFFF)

case redOrange20

거의 검은색에 가까운 붉은 주황색 (#592100)

case redOrange30

매우 어두운 붉은 주황색 (#913500)

case redOrange40

어두운 붉은 주황색 (#C94A00)

case redOrange48

특별한 어두운 붉은 주황색 (#F55A00)

case redOrange50

중간 어두운 붉은 주황색 (#FF5E00)

case redOrange60

약간 어두운 붉은 주황색 (#FF7B2E)

case redOrange70

중간 붉은 주황색 (#FF9B61)

case redOrange80

중간 밝기의 붉은 주황색 (#FFBD96)

case redOrange90

약간 밝은 붉은 주황색 (#FED9C4)

case redOrange95

밝은 붉은 주황색 (#FEEEE5)

case redOrange99

매우 밝은 붉은 주황색 (#FFFAF7)

case violet0

가장 어두운 보라색 (#000000)

case violet10

거의 검은색 보라색 (#11024D)

case violet100

가장 밝은 보라색 (#FFFFFF)

case violet20

거의 검은색에 가까운 보라색 (#23098F)

case violet30

매우 어두운 보라색 (#3A16C9)

case violet40

어두운 보라색 (#4F29E5)

case violet45

특별한 어두운 보라색 (#5B37ED)

case violet50

중간 어두운 보라색 (#6541F2)

case violet60

약간 어두운 보라색 (#7D5EF7)

case violet70

중간 보라색 (#9E86FC)

case violet80

중간 밝기의 보라색 (#C0B0FF)

case violet90

약간 밝은 보라색 (#DBD3FE)

case violet95

밝은 보라색 (#F0ECFE)

case violet99

매우 밝은 보라색 (#FBFAFF)

Initializers

init?(rawValue: String)

Instance Methods

func resolve(UITraitCollection) -> UIColor

주어진 UITraitCollection에 따라 UIColor를 반환합니다.

Parameters

Parameter Description
traitCollection 색상을 해석할 UITraitCollection
Return Value

해석된 UIColor 인스턴스

Parameter	Description
`traitCollection`	색상을 해석할 UITraitCollection

enum Semantic

디자인 시스템에서 정의된 Semantic 컬러 값

Overview

Semantic 색상은 Atomic 색상을 참조하여 의미적 맥락에 따라 적절한 색상을 제공합니다. 다크 모드와 라이트 모드에서 자동으로 적절한 색상으로 변환됩니다.
```
// UIKit에서 사용
label.textColor = UIColor.semantic(.foregroundNeutralPrimary)

// SwiftUI에서 사용
Button("버튼") { }
    .foregroundColor(.semantic(.surfaceBrandPrimary))
    .background(Color.semantic(.backgroundNeutralPrimary))
```

Enumeration Cases

case backgroundNeutralPrimary

기본 배경 색상 (구 backgroundNormal)

case backgroundNeutralSecondary

대체 배경 색상 (구 backgroundNormalAlternative)

case effectDimmerPrimary

딤 효과 색상 (구 materialDimmer)

case effectTransparentPrimary

투명 효과 색상 (구 backgroundTransparent)

case effectTransparentSecondary

대체 투명 효과 색상 (구 backgroundTransparentAlternative)

case foregroundAccentCyan

시안색 강조 전경 색상

case foregroundAccentLightBlue

하늘색 강조 전경 색상

case foregroundAccentLime

라임색 강조 전경 색상

case foregroundAccentPink

분홍색 강조 전경 색상

case foregroundAccentPurple

자주색 강조 전경 색상

case foregroundAccentViolet

보라색 강조 전경 색상

case foregroundBrandInverse

역전 브랜드 전경 색상 (구 inversePrimary)

case foregroundBrandPrimary

브랜드 전경 색상

case foregroundCautionaryPrimary

주의 전경 색상 (구 statusCautionary)

case foregroundDisablePrimary

비활성 전경 색상 (구 labelDisable)

case foregroundInactivePrimary

비활성(inactive) 전경 색상 (구 interactionInactive)

case foregroundNegativePrimary

부정 전경 색상 (구 statusNegative)

case foregroundNegativeStrong

강조된 부정 전경 색상 (구 accentForegroundRed)

case foregroundNeutralInverse

역전 전경 색상 (구 inverseLabel)

case foregroundNeutralPrimary

기본 전경 색상 (구 labelNormal)

case foregroundNeutralQuaternary

4차 전경 색상 (구 labelAssistive)

case foregroundNeutralSecondary

보조 전경 색상 (구 labelNeutral)

case foregroundNeutralStrong

강조 전경 색상 (구 labelStrong)

case foregroundNeutralTertiary

3차 전경 색상 (구 labelAlternative)

case foregroundPositivePrimary

긍정 전경 색상 (구 statusPositive)

case lineAccentCyan

시안색 강조 선 색상

case lineAccentLightBlue

하늘색 강조 선 색상

case lineAccentLime

라임색 강조 선 색상

case lineAccentPink

분홍색 강조 선 색상

case lineAccentPurple

자주색 강조 선 색상

case lineAccentViolet

보라색 강조 선 색상

case lineBrandFocus

브랜드 포커스 선 색상 (구 interactionFocus, e.g. TextField focused)

case lineBrandPrimary

브랜드 선 색상 (구 linePrimaryNormal, e.g. chip)

case lineBrandStrong

강조된 브랜드 선 색상 (구 linePrimaryStrong)

case lineCautionaryPrimary

주의 선 색상 (구 lineStatusCautionaryNormal)

case lineNegativeFocus

부정 포커스 선 색상 (구 interactionNegative, e.g. TextField negative focused)

case lineNegativePrimary

부정 선 색상 (구 lineStatusNegativeNormal, e.g. TextField negative)

case lineNegativeStrong

강조된 부정 선 색상 (구 lineStatusNegativeStrong)

case lineNeutralPrimary

기본 선 색상 (구 lineNormal)

case lineNeutralPrimaryOpaque

기본 실선 색상 (구 lineSolidNormal)

case lineNeutralSecondary

보조 선 색상 (구 lineNeutral)

case lineNeutralSecondaryOpaque

보조 실선 색상 (구 lineSolidNeutral)

case lineNeutralTertiary

3차 선 색상 (구 lineAlternative)

case lineNeutralTertiaryOpaque

3차 실선 색상 (구 lineSolidAlternative)

case linePositivePrimary

긍정 선 색상 (구 lineStatusPositiveNormal)

case staticBlack

정적 검은색 색상

case staticWhite

정적 흰색 색상

case surfaceAccentCyan

시안색 강조 표면 색상

case surfaceAccentCyanOpaque

시안색 강조 표면 색상 (불투명, 구 accentBackgroundCyan)

case surfaceAccentLightBlue

하늘색 강조 표면 색상

case surfaceAccentLightBlueOpaque

하늘색 강조 표면 색상 (불투명, 구 accentBackgroundLightBlue)

case surfaceAccentLime

라임색 강조 표면 색상

case surfaceAccentLimeOpaque

라임색 강조 표면 색상 (불투명, 구 accentBackgroundLime)

case surfaceAccentPink

분홍색 강조 표면 색상

case surfaceAccentPinkOpaque

분홍색 강조 표면 색상 (불투명, 구 accentBackgroundPink)

case surfaceAccentPurple

자주색 강조 표면 색상

case surfaceAccentPurpleOpaque

자주색 강조 표면 색상 (불투명, 구 accentBackgroundPurple)

case surfaceAccentViolet

보라색 강조 표면 색상

case surfaceAccentVioletOpaque

보라색 강조 표면 색상 (불투명, 구 accentBackgroundViolet)

case surfaceBrandHeavy

매우 강조된 브랜드 표면 색상 (구 primaryHeavy)

case surfaceBrandPrimary

브랜드 표면 색상 (구 primaryNormal)

case surfaceBrandStrong

강조된 브랜드 표면 색상 (구 primaryStrong)

case surfaceBrandSubtle

옅은 브랜드 표면 색상 (구 fillPrimary)

case surfaceCautionaryPrimary

주의 표면 색상 (구 backgroundStatusCautionary)

case surfaceDisablePrimary

비활성 표면 색상 (구 interactionDisable)

case surfaceElevatedPrimary

상승된 표면 색상 (구 backgroundElevated)

case surfaceElevatedSecondary

상승된 대체 표면 색상 (구 backgroundElevatedAlternative)

case surfaceNegativePrimary

부정 표면 색상 (구 backgroundStatusNegative)

case surfaceNegativeStrong

강조된 부정 표면 색상 (구 fillNegative)

case surfaceNeutralInverse

역전 표면 색상 (구 inverseBackground)

case surfaceNeutralPrimary

기본 표면 색상

case surfaceNeutralSecondary

보조 표면 색상 (구 fillNormal)

case surfaceNeutralStrong

강조 표면 색상 (구 fillStrong)

case surfaceNeutralTertiary

3차 표면 색상 (구 fillAlternative)

case surfacePositivePrimary

긍정 표면 색상 (구 backgroundStatusPositive)

Initializers

init?(rawValue: String)

Instance Methods

func resolve(UITraitCollection) -> UIColor

주어진 UITraitCollection에 따라 UIColor를 반환합니다.

Parameters

Parameter Description
traitCollection 색상을 해석할 UITraitCollection
Return Value

해석된 UIColor 인스턴스

Parameter	Description
`traitCollection`	색상을 해석할 UITraitCollection

Associated Extensions

extension UIColor

static func atomic(Color.Atomic) -> UIColor

Atomic 색상 타입에 해당하는 UIColor를 생성합니다.

Parameters

Parameter Description
type 생성할 Atomic 색상 타입
Return Value

동적으로 생성된 UIColor 인스턴스

Parameter	Description
`type`	생성할 Atomic 색상 타입

static func semantic(Color.Semantic) -> UIColor

Semantic 색상 타입에 해당하는 UIColor를 생성합니다.

Parameters

Parameter Description
type 생성할 Semantic 색상 타입
Return Value

동적으로 생성된 UIColor 인스턴스

Parameter	Description
`type`	생성할 Semantic 색상 타입

extension Color

static func atomic(Color.Atomic) -> SwiftUI.Color

Atomic 색상 타입에 해당하는 SwiftUI.Color를 생성합니다.

Parameters

Parameter Description
type 생성할 Atomic 색상 타입
Return Value

동적으로 생성된 SwiftUI.Color 인스턴스

Parameter	Description
`type`	생성할 Atomic 색상 타입

static func semantic(Color.Semantic) -> SwiftUI.Color

Semantic 색상 타입에 해당하는 SwiftUI.Color를 생성합니다.

Parameters

Parameter Description
type 생성할 Semantic 색상 타입
Return Value

동적으로 생성된 SwiftUI.Color 인스턴스

Parameter	Description
`type`	생성할 Semantic 색상 타입

var uiColor: UIColor

SwiftUI.Color를 UIColor로 변환합니다.

Return Value

변환된 UIColor 인스턴스