CGColor dan CGColorSpace: apa itu, model warna dan cara mengelolanya

Apa itu CGColor dan CGColorSpace?

CGColor — adalah objek fundamental Core Graphics yang mewakili warna. Dalam struktur CGColor disimpan nilai numerik dari komponen warna dan referensi ke CGColorSpace — ruang warna di mana komponen-komponen ini diinterpretasikan. Tanpa keterikatan ke ruang warna, nilai numerik komponen tidak memiliki arti: nilai (1.0, 0.0, 0.0) di RGB adalah merah, tetapi di CMYK adalah cyan (Cyan).

CGColorSpace — adalah objek yang mendefinisikan model warna dan rentang nilai yang dapat diwakili (gamut). Ruang warna menetapkan aturan di mana komponen numerik diubah menjadi warna yang terlihat pada perangkat keluaran tertentu. Core Graphics mendukung ruang standar dengan profil ICC maupun ruang khusus yang dibuat melalui CGColorSpace dengan tabel konversi khusus.

Arsitektur pemisahan warna dan ruang warna — fitur kunci Core Graphics yang membedakannya dari API di mana warna disimpan sebagai kumpulan angka sederhana. Pendekatan ini memungkinkan Core Graphics melakukan manajemen warna yang independen dari perangkat keras: objek CGColor yang sama dapat ditampilkan dengan benar di layar yang berbeda berkat konversi otomatis komponen melalui profil CGColorSpace.

Bagaimana warna bekerja di Core Graphics

Core Graphics mengimplementasikan warna melalui model yang didasarkan pada profil ICC (International Color Consortium). Setiap CGColorSpace berisi referensi ke profil ICC — deskripsi standar tentang bagaimana komponen warna diubah menjadi CIE XYZ — ruang warna yang independen dari perangkat keras. Ini memungkinkan Core Graphics melakukan kompensasi kolorimetrik otomatis antar layar yang berbeda.

Siklus hidup objek CGColor

Saat membuat CGColor melalui fungsi CGColorCreate, komponen diambil dari array yang diberikan dan diikat ke CGColorSpace yang ditentukan. Core Graphics menyalin komponen ke representasi internal dan membuat asosiasi dengan ruang warna. Setelah itu, warna siap digunakan dalam operasi grafis apa pun — isian, goresan, gradien, bayangan.

Manajemen warna melalui ColorSync

Di macOS manajemen warna dilakukan melalui framework ColorSync yang terintegrasi ke dalam Core Graphics. ColorSync melacak kalibrasi layar dan secara otomatis mengonversi komponen dari ruang warna sumber ke ruang perangkat target. Di iOS manajemen warna diimplementasikan melalui Quartz Core dengan dukungan gamut warna lebar (Display P3), mulai dari iPhone 7.

Model warna utama di CGColorSpace

CGColorSpace mendukung empat model warna dasar: RGB (DeviceRGB, sRGB, Display P3), Gray (DeviceGray), CMYK (DeviceCMYK) dan Lab. Setiap model menentukan jumlah dan arti komponen warna. RGB menggunakan tiga saluran — merah, hijau, biru; Gray — satu saluran kecerahan; CMYK — empat saluran untuk pencetakan; Lab — tiga saluran: kecerahan dan dua komponen perbedaan warna.

DeviceRGB dan sRGB

DeviceRGB — adalah ruang warna default Core Graphics yang paling umum. Ini menggunakan gamut warna layar LCD standar tanpa profil ICC. Saat membuat konteks grafis UIView atau NSView, Core Graphics secara otomatis menetapkan DeviceRGB sebagai ruang warna default. sRGB — versi dengan profil ICC dengan gamut dan gamma tetap, direkomendasikan untuk konten web.

Display P3 — gamut warna lebar

Display P3 — ruang warna berdasarkan standar DCI-P3, digunakan di perangkat iOS modern dengan layar gamut warna lebar. Ini mencakup sekitar 25% lebih banyak warna yang terlihat daripada sRGB, terutama di area hijau dan merah spektrum. Untuk bekerja dengan Display P3 di iOS, konstanta kCGColorSpaceDisplayP3 digunakan, tersedia sejak iOS 9.3.

Membuat dan mengelola CGColor

CGColor dibuat melalui fungsi CGColorCreate, yang menerima CGColorSpace dan array komponen bertipe CGFloat. Jumlah komponen tergantung pada model warna: untuk Gray — 1, untuk RGB — 3, untuk CMYK — 4. Setelah dibuat, CGColor adalah objek yang tidak dapat diubah (immutable) — komponennya tidak dapat diubah, hanya warna baru yang dapat dibuat.

Core Graphics juga menyediakan fungsi CGColorCreateGenericRGB, CGColorCreateGenericGray dan CGColorCreateGenericCMYK untuk membuat warna di ruang warna standar (generic). Fungsi-fungsi ini menyederhanakan kode, menghilangkan kebutuhan untuk membuat CGColorSpace secara eksplisit. Selain itu, di Quartz 2D didefinisikan konstanta warna dasar: kCGColorWhite, kCGColorBlack, kCGColorClear.

Saat membuat warna, urutan penentuan komponen penting — harus sesuai dengan urutan saluran yang ditentukan oleh model ruang warna. RGB: merah (0.0–1.0), hijau, biru, alfa (0.0–1.0). Gray: kecerahan, alfa. CMYK: cyan, magenta, kuning, hitam, alfa. Pelanggaran urutan komponen menyebabkan tampilan warna yang salah tanpa kesalahan kompilasi.

Saluran alfa dan transparansi

Saluran alfa — komponen keempat (atau kedua untuk Gray) yang mengontrol transparansi warna. Nilai 1.0 sesuai dengan tidak tembus cahaya sepenuhnya, 0.0 — tembus cahaya sepenuhnya. Saluran alfa di CGColor bersifat opsional: fungsi CGColorGetAlpha mengembalikan nilai alfa saat ini, yang secara default adalah 1.0 saat dibuat melalui fungsi dasar. Saat mencampur warna, Core Graphics menggunakan komposit alfa menurut aturan Porter-Duff Source Over.

Bekerja dengan CGColorSpace

CGColorSpace dibuat melalui fungsi pabrik Core Graphics: CGColorSpaceCreateDeviceRGB, CGColorSpaceCreateDeviceGray, CGColorSpaceCreateDeviceCMYK atau CGColorSpaceCreateWithName untuk ruang bernama (sRGB, Display P3, Generic Gray). Objek CGColorSpace tidak dapat diubah dan thread-safe — objek yang sama dapat digunakan di beberapa konteks grafis.

Mendapatkan CGColorSpace dasar

Core Graphics menyediakan beberapa ruang warna yang telah ditentukan melalui konstanta bernama: kCGColorSpaceSRGB, kCGColorSpaceDisplayP3, kCGColorSpaceGenericGrayGamma2_2. Konstanta ini diteruskan ke CGColorSpaceCreateWithName. Untuk perangkat iOS dengan gamut warna lebar, disarankan menggunakan Display P3, karena sRGB mungkin tidak sepenuhnya memanfaatkan kemampuan layar.

Profil ICC dan CGColorSpace khusus

Profil ICC — adalah file standar yang menggambarkan karakteristik warna perangkat. Core Graphics memungkinkan pembuatan CGColorSpace berdasarkan profil ICC apa pun melalui CGColorSpaceCreateWithICCProfile. Ini digunakan dalam aplikasi profesional untuk pencetakan foto dan prepress, di mana diperlukan kesesuaian yang tepat dengan printer atau monitor tertentu.

Konversi antar ruang warna

Core Graphics melakukan konversi antar ruang warna secara otomatis saat menggambar melalui fungsi CGContextSetFillColorWithColor atau CGContextSetStrokeColorWithColor. Jika ruang warna konteks grafis berbeda dari ruang warna CGColor yang diberikan, Quartz 2D melakukan konversi menggunakan profil ICC dari kedua ruang.

Untuk konversi warna eksplisit, digunakan CGColorCreateCopyByMatchingToColorSpace — fungsi membuat CGColor baru yang komponennya dihitung ulang dari ruang sumber ke ruang target. Menurut Apple Technical Note TN2313 (2024), saat mengonversi dari Display P3 ke sRGB, warna di luar gamut sRGB dipotong, yang menyebabkan hilangnya saturasi. Ini terutama terlihat pada corak hijau dan merah terang.

ColorSync di macOS menyediakan manajemen warna sistem pada tingkat tumpukan grafis. Jika aplikasi tidak menentukan ruang warna eksplisit, Core Graphics menggunakan ruang layar yang diperoleh dari ColorSync. Ini menjamin bahwa warna akan terlihat sama di monitor yang berbeda, bahkan jika mereka menggunakan profil warna yang berbeda.

Contoh kode di Swift

Mari kita lihat contoh praktis membuat dan menggunakan CGColor dan CGColorSpace di aplikasi iOS. Kode ditulis dalam Swift menggunakan fungsi Core Graphics.

Membuat CGColor dengan ruang warna berbeda

Contoh ini menunjukkan pembuatan warna merah di tiga ruang warna berbeda. Meskipun komponen RGB sama, warna akan terlihat berbeda tergantung pada gamut warna CGColorSpace.

import CoreGraphics

// Membuat warna di DeviceRGB
let rgbSpace = CGColorSpaceCreateDeviceRGB()
let redColor = CGColorCreate(rgbSpace, [1.0, 0.0, 0.0, 1.0])

// Membuat warna di Display P3
let p3Space = CGColorSpaceCreateWithName(kCGColorSpaceDisplayP3)
let p3RedColor = CGColorCreate(p3Space, [1.0, 0.0, 0.0, 1.0])

// Membuat warna abu-abu
let graySpace = CGColorSpaceCreateDeviceGray()
let grayColor = CGColorCreate(graySpace, [0.5, 1.0])

Konversi warna antar ruang warna

Dalam contoh, konversi warna hijau terang dari Display P3 ke sRGB dilakukan. Pada konversi seperti itu, warna di luar gamut sRGB akan disesuaikan, yang dapat mengubah rona.

let p3Space = CGColorSpaceCreateWithName(kCGColorSpaceDisplayP3)
let sRGBSpace = CGColorSpaceCreateWithName(kCGColorSpaceSRGB)

// Hijau terang di Display P3 (di luar gamut sRGB)
let p3Green = CGColorCreate(p3Space, [0.0, 1.0, 0.0, 1.0])

// Mengonversi ke sRGB
let srgbGreen = CGColorCreateCopyByMatchingToColorSpace(
    sRGBSpace, p3Green, kCGRenderingIntentDefault
)

Menggunakan CGColor dalam konteks grafis

Contoh ini mendemonstrasikan menggambar lingkaran terisi menggunakan CGColor di UIView kustom. Metode draw mendapatkan konteks grafis saat ini UIGraphicsGetCurrentContext, di mana warna isian diatur.

class ColorView: UIView {
    override func draw(rect: CGRect) {
        guard let ctx = UIGraphicsGetCurrentContext()
        else { return }

        let rgbSpace = CGColorSpaceCreateDeviceRGB()
        let blueColor = CGColorCreate(
            rgbSpace,
            [0.2, 0.4, 1.0, 1.0]
        )

        ctx.setFillColor(blueColor)
        ctx.fillEllipse(in: CGRect(x: 50, y: 50,
                                  width: 200, height: 200))
    }
}