我們先挑一個比較簡單的練習來熱身。
做一個可以即時調整顏色的 調色盤 小工具。

我們的目標是做出一個介面，使用者可以透過 三個滑桿 或 直接輸入數字 的方式，自由調整 **R、G、B **的數值（0~255），並即時在畫面上看到混合後的顏色。

這邊是我們最後要完成的樣子。

上方是一個顏色顯示區塊，下方則是三組滑桿 + 文字輸入欄 + 數值標籤。不管是拖曳滑桿還是直接輸入數字，都能即時改變顯示區塊的顏色。

介面元件介紹

以下是我們會用到的 UIKit 元件，並在 Storyboard 中拉好對應的 IBOutlet：

// MARK: - IBOutlet
    // 顏色顯示區塊
    @IBOutlet weak var vRGB: UIView!
    
    // 顯示紅、綠、藍標籤
    @IBOutlet weak var lbRed: UILabel!
    @IBOutlet weak var lbGreen: UILabel!
    @IBOutlet weak var lbBlue: UILabel!

    // 紅、綠、藍三個滑桿
    @IBOutlet weak var sldRedValue: UISlider!
    @IBOutlet weak var sldGreenValue: UISlider!
    @IBOutlet weak var sldBlueValue: UISlider!
    
    // 紅、綠、藍三個文字欄位
    @IBOutlet weak var txfRedText: UITextField!
    @IBOutlet weak var txfGreenText:UITextField!
    @IBOutlet weak var txfBlueText: UITextField!

這邊我們會用到的元件有這些：

• UIView：顯示混合後的 RGB 顏色
• UILabel：顯示紅、綠、藍三個數值
• UISlider：調整紅、綠、藍數值（0~255）
• UITextField：直接輸入紅、綠、藍數值

結語

今天我們的重點是介面設計與元件連接，明天再來讓這個程式可以跑起來。