[TIL] Swift Hex CustomColor

Swift CustomColor사용법 근데 Hex를 포함한

디자이너와 협업중 피그마에 있는 hex로 이루어진 컬러를 조금 더 쉽게 외부에서 관리할 수 있는(?) 방법이 없나 생각하고 공부한 내용을 정리

Hex코드를 RGB로 바꾸는법

스위프트는 기본적으로 Hex가 아닌 RGB를 기준으로 컬러를 조절한다
디자이너가 RGB를 기준으로 한 컬러를 제공해줬으면 좋겠지만.. 일단 Hex를 RGB로 바꾸는 코드에 대해 알아보자

convenience init(fromHex: String, alpha: CGFloat = 1.0) {
        let v = fromHex.map { String($0) } + Array(repeating: "0", count: max(6 - fromHex.count, 0))
        let r = CGFloat(Int(v[0] + v[1], radix: 16) ?? 0) / 255.0
        let g = CGFloat(Int(v[2] + v[3], radix: 16) ?? 0) / 255.0
        let b = CGFloat(Int(v[4] + v[5], radix: 16) ?? 0) / 255.0
        self.init(red: r, green: g, blue: b, alpha: alpha)
    }

코드에 일부분을 가저와서 안 쪽 내용만 확인하면 된다 hexString을 가저와서 분리된 각 문자 두 개를 합쳐 16진수로 변환한 후, 255로 나눠서 0~1 사이의 값을 얻습니다. 이 값은 각각 빨강, 초록, 파랑 색상의 강도를 나타낸다.
*아마 더 좋은 코드가 있을것 같아 수정을 할 필요가 있을 것 같다

컬러 이름 정해서 사용하기

우선 전에 텍스트를 사용했던 것 처럼 UIColor 를 extension해준다

extension UIColor {
}

위에 만든 Hex => RGB코드를 추가하고
RGB값을 넣은 변수를 선언해서 외부에서 UIColor.mainColor()이런식으로 사용할 수 있다.
아래는 alpha 즉 opacity값도 추가로 변경해 줄 수 있는 코드 전체이다.

extension UIColor {
    // Hex color 코드를 UIColor로 변환하는 메서드
    convenience init(fromHex: String, alpha: CGFloat = 1.0) {
        let v = fromHex.map { String($0) } + Array(repeating: "0", count: max(6 - fromHex.count, 0))
        let r = CGFloat(Int(v[0] + v[1], radix: 16) ?? 0) / 255.0
        let g = CGFloat(Int(v[2] + v[3], radix: 16) ?? 0) / 255.0
        let b = CGFloat(Int(v[4] + v[5], radix: 16) ?? 0) / 255.0
        self.init(red: r, green: g, blue: b, alpha: alpha)
    }
    static func Black(alpha: CGFloat = 1.0) -> UIColor {
        return UIColor(fromHex: "000000", alpha: alpha)
    }
}

이런식으로 선언해주면 외부에서 사용할 때

 $0.textColor = UIColor.Black()
  $0.textColor = UIColor.Black(alpha: 0.5)

이런식으로 사용할 수 있다 alpha값을 정의하지 않으면 기존 init코드에 의해서 1.0으로 들어간다.