{
    "@context": "https://schema.org",
    "@type": "Article",
    "@id": "https://appstoryo.com/id/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use",
    "url": "https://appstoryo.com/id/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use",
    "identifier": "https://appstoryo.com/id/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use",
    "name": "HEX vs RGB vs HSL vs CMYK: Format Warna Mana yang Dipakai dan Kapan",
    "headline": "HEX vs RGB vs HSL vs CMYK: Format Warna Mana yang Dipakai dan Kapan",
    "description": "Apa beda HEX, RGB, HSL, dan CMYK? Pelajari format warna mana yang dipakai untuk web, cetak, desain UI, dan media sosial — dengan contoh praktis.",
    "inLanguage": "id",
    "datePublished": "2026-03-21",
    "dateModified": "2026-08-26",
    "author": {
        "@type": "Person",
        "name": "Lubor Šimůnek"
    },
    "publisher": {
        "@type": "Organization",
        "name": "lapnito.cz s.r.o.",
        "url": "https://appstoryo.com"
    },
    "isPartOf": {
        "@type": "WebSite",
        "name": "AppStoryo",
        "url": "https://appstoryo.com"
    },
    "license": "https://creativecommons.org/licenses/by/4.0/",
    "keywords": [
        "Desain",
        "article",
        "AppStoryo"
    ],
    "articleSection": "Desain",
    "image": "https://appstoryo.com/upload/blog/hex-vs-rgb-vs-hsl-vs-cmyk-hero.jpg",
    "encoding": [
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/id/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use.pdf",
            "encodingFormat": "application/pdf"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/id/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use.md",
            "encodingFormat": "text/markdown"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/id/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use.txt",
            "encodingFormat": "text/plain"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/id/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use.json",
            "encodingFormat": "application/json"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/id/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use.epub",
            "encodingFormat": "application/epub+zip"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/id/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use.jats.xml",
            "encodingFormat": "application/xml"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/id/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use.bib",
            "encodingFormat": "application/x-bibtex"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/id/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use.ris",
            "encodingFormat": "application/x-research-info-systems"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/id/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use.csl.json",
            "encodingFormat": "application/vnd.citationstyles.csl+json"
        }
    ],
    "cite": "Lubor Šimůnek (2026). HEX vs RGB vs HSL vs CMYK: Format Warna Mana yang Dipakai dan Kapan. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/id/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use",
    "sections": [
        {
            "level": 2,
            "heading": "Warna yang Sama, Empat Bahasa Berbeda",
            "text": "Pilih warna apa saja — misalnya coral yang hangat. Sekarang jelaskan warna itu dengan empat cara:\n\n- HEX: #E8635A\n- RGB: rgb(232, 99, 90)\n- HSL: hsl(4, 75%, 63%)\n- CMYK: 0, 57, 61, 9\n\nKeempatnya menjelaskan warna yang persis sama. Semuanya bukan standar yang saling bersaing — semuanya adalah representasi warna yang berbeda, dioptimalkan untuk konteks yang berbeda. Kebingungan muncul karena kita tidak tahu konteks mana yang menuntut format mana.\n\nPanduan ini menguraikan setiap format dengan bahasa sederhana: apa itu, cara kerjanya, kapan dipakai, dan kapan justru menjadi pilihan yang keliru. Jika Anda bekerja dengan warna dalam bentuk apa pun — desain, pengembangan, cetak, pemasaran — panduan ini akan menyelamatkan Anda dari salah memilih format untuk proyek Anda."
        },
        {
            "level": 2,
            "heading": "HEX: Standar Web",
            "text": ""
        },
        {
            "level": 3,
            "heading": "Apa itu",
            "text": "HEX (heksadesimal) adalah kode enam karakter yang diawali tanda pagar: #E8635A. Setiap pasang karakter mewakili kanal Merah, Hijau, dan Biru dalam notasi basis-16 (00 hingga FF).\n\nSecara fungsional identik dengan RGB — hanya ditulis berbeda. #E8635A sama dengan rgb(232, 99, 90). HEX hanyalah cara yang lebih ringkas untuk menuliskan nilai RGB."
        },
        {
            "level": 3,
            "heading": "Kapan memakai HEX",
            "text": "- CSS dan pengembangan web — HEX adalah notasi warna bawaan di CSS. Semua peramban memahaminya. color: #E8635A; adalah cara paling umum menentukan warna di web.\n- Alat desain — Figma, Sketch, Adobe XD, dan Canva semuanya memakai HEX sebagai input utama. Saat seorang desainer berkata \"birunya #3B82F6,\" semua orang paham maksudnya.\n- Pedoman merek — panduan merek digital hampir selalu mencantumkan nilai HEX karena pendek, tidak ambigu, dan mudah disalin-tempel.\n- Komunikasi cepat — \"pakai #333\" lebih cepat daripada \"pakai rgb(51, 51, 51)\" dalam pesan Slack."
        },
        {
            "level": 3,
            "heading": "Kapan TIDAK memakai HEX",
            "text": "- Saat Anda butuh transparansi — HEX 6 digit standar tidak mendukung alfa/opasitas. Anda perlu HEX 8 digit (#E8635A80) yang kurang mudah dibaca, atau beralih ke RGBA.\n- Saat Anda perlu menyesuaikan warna secara terprogram — \"buat ini 20% lebih terang\" nyaris mustahil dihitung dalam HEX di kepala. HSL jauh lebih baik untuk ini.\n- Produksi cetak — mesin cetak tidak memakai HEX. Tidak pernah."
        },
        {
            "level": 3,
            "heading": "Contoh nyata",
            "text": "Anda sedang menulis CSS untuk sebuah halaman arahan. Desainer memberi Anda panduan gaya berisi warna merek. Anda menulis:\n\n:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }\n\nHEX sempurna di sini: ringkas, mudah dibaca, dan didukung secara universal."
        },
        {
            "level": 2,
            "heading": "RGB: Model Warna Layar",
            "text": ""
        },
        {
            "level": 3,
            "heading": "Apa itu",
            "text": "RGB adalah singkatan dari Red, Green, Blue — tiga warna cahaya yang dicampur layar untuk menghasilkan setiap warna yang Anda lihat. Setiap kanal berkisar dari 0 hingga 255. rgb(232, 99, 90) berarti 232 unit merah, 99 unit hijau, dan 90 unit biru.\n\nRGB adalah fondasi semua warna digital. HEX hanyalah RGB dalam notasi berbeda. HSL adalah transformasi RGB yang ramah manusia. Semua yang tampil di layar Anda pada akhirnya menjadi nilai RGB yang dikirim ke piksel."
        },
        {
            "level": 3,
            "heading": "Kapan memakai RGB",
            "text": "- Saat Anda butuh transparansi — RGBA menambahkan kanal alfa: rgba(232, 99, 90, 0.5) untuk opasitas 50%. Ini lebih rapi daripada HEX 8 digit dan didukung luas di CSS, alat desain, dan pemrograman.\n- Pemrograman dan pengembangan aplikasi — Swift, Kotlin, Flutter, React Native — kerangka kerja aplikasi umumnya bekerja dengan nilai RGB/RGBA secara internal.\n- LED dan pencahayaan — lampu pintar (Philips Hue, strip LED) memakai nilai RGB. Jika Anda mendesain untuk instalasi cahaya fisik, RGB adalah format aslinya.\n- Matematika warna — mencampur warna, menginterpolasi gradien, atau menghasilkan warna secara terprogram sangat mudah dalam RGB."
        },
        {
            "level": 3,
            "heading": "Kapan TIDAK memakai RGB",
            "text": "- Cetak — layar memancarkan cahaya (pencampuran aditif); kertas memantulkannya (pencampuran subtraktif). RGB tidak bisa merepresentasikan secara akurat hasil yang keluar dari mesin cetak.\n- Menyesuaikan kecerahan atau saturasi — \"kurangi saturasi warna ini 30%\" tidak intuitif dalam RGB. Anda harus mengonversinya ke HSL dulu."
        },
        {
            "level": 3,
            "heading": "Contoh nyata",
            "text": "Anda sedang membangun aplikasi React Native dan butuh lapisan semi-transparan:\n\nbackgroundColor: 'rgba(0, 0, 0, 0.6)'\n\nRGB dengan alfa adalah pilihan alami — langsung, mudah dibaca, dan asli bagi mesin perender."
        },
        {
            "level": 2,
            "heading": "HSL: Format Para Desainer",
            "text": ""
        },
        {
            "level": 3,
            "heading": "Apa itu",
            "text": "HSL adalah singkatan dari Hue, Saturation, Lightness (rona, saturasi, kecerahan):\n\n- Hue (0°–360°) — warnanya sendiri, sebagai posisi pada roda warna. 0° adalah merah, 120° hijau, 240° biru.\n- Saturation (0%–100%) — seberapa pekat warnanya. 0% adalah abu-abu, 100% adalah bentuk termurni dari rona itu.\n- Lightness (0%–100%) — seberapa terang atau gelap. 0% hitam, 100% putih, 50% adalah warna \"sebenarnya\".\n\nhsl(4, 75%, 63%) berarti: rona kemerahan (4°), sangat pekat (saturasi 75%), dan agak terang (63%)."
        },
        {
            "level": 3,
            "heading": "Kapan memakai HSL",
            "text": "- Sistem desain dan tema — HSL adalah format terbaik untuk membuat skala warna yang konsisten. Ingin 10 gradasi dari warna utama Anda? Pertahankan ronanya, variasikan kecerahan dari 10% hingga 95%. Ingin versi yang lebih kalem? Turunkan saturasinya. Ini nyaris mustahil dilakukan secara intuitif dalam HEX atau RGB.\n- Mode gelap / mode terang — berganti tema berarti menyesuaikan kecerahan dan saturasi, yang memetakan langsung ke parameter HSL. Tailwind CSS, Radix Colors, dan banyak sistem desain modern dibangun di atas HSL.\n- Pembuatan warna terprogram — menghasilkan status hover, status nonaktif, latar belakang, dan garis tepi dari satu warna dasar sangat mudah dalam HSL: hsl(4, 75%, 73%) untuk varian lebih terang, hsl(4, 75%, 43%) untuk yang lebih gelap.\n- Aksesibilitas — pemeriksaan rasio kontras menjadi lebih intuitif ketika Anda bisa melihat dan menyesuaikan kecerahan secara langsung."
        },
        {
            "level": 3,
            "heading": "Kapan TIDAK memakai HSL",
            "text": "- Komunikasi lintas tim — kebanyakan orang tidak berpikir dalam derajat dan persentase. Mengatakan \"tombolnya hsl(4, 75%, 63%)\" kurang jelas dibanding \"tombolnya #E8635A\" dalam serah terima desain.\n- Cetak — sama seperti RGB, HSL adalah model warna layar."
        },
        {
            "level": 3,
            "heading": "Contoh nyata",
            "text": "Anda sedang membangun sistem desain di Tailwind CSS dan butuh skala warna yang konsisten:\n\n--brand-50: hsl(4, 75%, 95%);\n--brand-100: hsl(4, 75%, 90%);\n--brand-200: hsl(4, 75%, 80%);\n--brand-500: hsl(4, 75%, 63%);\n--brand-700: hsl(4, 75%, 43%);\n--brand-900: hsl(4, 75%, 25%);\n\nRona sama, saturasi sama, kecerahan berbeda. Skala sempurna dalam 30 detik. Coba lakukan itu dalam HEX."
        },
        {
            "level": 2,
            "heading": "CMYK: Format Cetak",
            "text": ""
        },
        {
            "level": 3,
            "heading": "Apa itu",
            "text": "CMYK adalah singkatan dari Cyan, Magenta, Yellow, Key (hitam). Format ini menjelaskan warna sebagai campuran tinta yang diterapkan pada kertas putih. Setiap nilai berkisar dari 0% hingga 100%: 0, 57, 61, 9 berarti 0% cyan, 57% magenta, 61% kuning, dan 9% hitam.\n\nBerbeda dari RGB (yang menambahkan cahaya untuk membuat warna), CMYK mengurangi dari kertas putih. Makin banyak tinta = warna makin gelap. Karena itulah ia disebut model warna subtraktif."
        },
        {
            "level": 3,
            "heading": "Kapan memakai CMYK",
            "text": "- Desain cetak — kartu nama, brosur, kemasan, poster, majalah. Setiap berkas yang dikirim ke percetakan komersial harus berada dalam mode warna CMYK.\n- Menyiapkan berkas untuk cetak di InDesign, Illustrator — alat-alat ini memungkinkan Anda bekerja dalam mode CMYK untuk melihat pratinjau bagaimana warna akan tampak di atas kertas (yang selalu kurang cerah dibanding di layar).\n- Pemeriksaan warna — memastikan warna desain Anda dapat direproduksi dalam CMYK. Beberapa warna RGB yang mencolok (terutama hijau neon dan biru elektrik) secara fisik mustahil dicetak dalam CMYK — warna-warna itu jatuh \"di luar gamut\"."
        },
        {
            "level": 3,
            "heading": "Kapan TIDAK memakai CMYK",
            "text": "- Apa pun yang tampil di layar — situs web, aplikasi, media sosial, presentasi, surel. Layar memakai RGB. Menentukan CMYK untuk sebuah situs web itu seperti memberi petunjuk arah berkendara dalam mil laut — secara teknis memang satuan jarak, tetapi tidak berguna untuk perjalanannya.\n- Penyuntingan fotografi — sunting dalam RGB, konversikan ke CMYK hanya pada tahap ekspor akhir untuk cetak."
        },
        {
            "level": 3,
            "heading": "Contoh nyata",
            "text": "Anda mendesain sebuah poster di Illustrator. Sebelum mengirimnya ke percetakan, Anda mengonversi dokumen ke mode warna CMYK (File → Document Color Mode → CMYK Color), memeriksa peringatan di luar gamut, dan menyesuaikan biru elektrik yang bergeser menjadi teal keruh. PDF akhir disimpan sebagai CMYK dengan profil ICC percetakan."
        },
        {
            "level": 2,
            "heading": "Tabel Rujukan Cepat",
            "text": "Format | Paling Cocok Untuk | Rentang | Mendukung Transparansi | Mudah Dibaca Manusia | Aman untuk Cetak\nHEX | Web, CSS, pedoman merek | #000000 – #FFFFFF | Hanya 8 digit (#RRGGBBAA) | Sedang | Tidak\nRGB | Layar, aplikasi, gradien | 0–255 per kanal | Ya (RGBA) | Sedang | Tidak\nHSL | Sistem desain, tema | 0°–360°, 0%–100%, 0%–100% | Ya (HSLA) | Tinggi | Tidak\nCMYK | Cetak, kemasan | 0%–100% per kanal | Tidak | Rendah | Ya"
        },
        {
            "level": 2,
            "heading": "Contekan: Format Mana untuk Pekerjaan Mana",
            "text": "Proyek Anda | Pakai Format Ini | Alasannya\nCSS situs web | HEX atau HSL | HEX untuk kesederhanaan; HSL untuk sistem desain bertema\nAplikasi seluler (iOS/Android) | RGB/RGBA | Kerangka kerja asli memakai RGB secara internal\nBerkas desain Figma / Sketch | HEX | Input standar di alat desain\nSistem desain / token | HSL | Skala dan varian sangat mudah dibuat dalam HSL\nGrafis media sosial | HEX atau RGB | Hanya digital; Canva/Photoshop menerima keduanya\nKartu nama / brosur | CMYK | Menuju mesin cetak fisik\nKemasan produk | CMYK + Pantone | Cetak + konsistensi warna merek\nTemplat surel | HEX | Klien surel mendukung HEX dengan andal\nLampu pintar / LED | RGB | Perangkat keras LED memakai RGB secara asli\nDokumen pedoman merek | Keempatnya | Tim yang berbeda butuh format yang berbeda"
        },
        {
            "level": 2,
            "heading": "Bisakah Dikonversi Antarformat?",
            "text": "Bisa — dengan catatan.\n\n- HEX ↔ RGB — tanpa kehilangan data, keduanya data yang sama dalam notasi berbeda.\n- RGB ↔ HSL — tanpa kehilangan data, ini transformasi matematis.\n- RGB → CMYK — ada kehilangan. Sebagian warna RGB (biru pekat, neon, hijau terang) tidak dapat direproduksi dalam CMYK. Konversi akan menggesernya ke padanan tercetak terdekat, yang sering terlihat lebih kusam.\n- CMYK → RGB — secara teknis mungkin, tetapi hasilnya bergantung pada profil ICC yang dipakai. Dua pengonversi bisa memberi nilai RGB yang sedikit berbeda untuk masukan CMYK yang sama.\n\nUntuk konversi cepat saat bepergian, pemilih warna di ponsel yang menampilkan keempat format sekaligus adalah alur kerja tercepat. Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) melakukan persis itu — arahkan kamera Anda ke warna apa pun dan lihat HEX, RGB, HSL, dan CMYK berdampingan. Satu ketukan menyalin nilai mana pun. Tersedia di iPhone (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) dan Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker)."
        },
        {
            "level": 2,
            "heading": "Kesalahan Umum",
            "text": ""
        },
        {
            "level": 3,
            "heading": "1. Mendesain untuk cetak dalam RGB",
            "text": "Ini kesalahan klasik pemula. Anda mendesain poster yang cerah di Photoshop dalam mode RGB, mengirimkannya ke percetakan, dan hasilnya tampak pudar — terutama hijau dan biru. Selalu konversikan ke CMYK sebelum mengekspor untuk cetak, dan periksa peringatan gamut."
        },
        {
            "level": 3,
            "heading": "2. Memakai HEX saat Anda butuh transparansi",
            "text": "Jika desain Anda menuntut lapisan semi-transparan, bayangan, atau efek glassmorphism, beralihlah ke RGBA atau HSLA. HEX 6 digit standar tidak membawa informasi opasitas, dan HEX 8 digit jarang dipakai karena sulit dibaca."
        },
        {
            "level": 3,
            "heading": "3. Membangun sistem desain dalam HEX",
            "text": "\"#3B82F6 tetapi 20% lebih terang\" memerlukan konversi, perhitungan, lalu konversi balik. Dalam HSL: naikkan kecerahannya 20%. Token desain, generator tema, dan properti kustom CSS modern bekerja jauh lebih baik dalam HSL."
        },
        {
            "level": 3,
            "heading": "4. Mengonversi CMYK ke HEX untuk web dan berharap warnanya sama",
            "text": "Merek yang didefinisikan dalam CMYK untuk cetak akan tampak berbeda saat dikonversi mentah-mentah ke HEX untuk web. Pendekatan yang benar: cocokkan warna di layar secara visual dengan versi cetaknya, lalu tetapkan nilai HEX terpisah untuk penggunaan digital. Pedoman merek sebaiknya mencantumkan keduanya."
        },
        {
            "level": 2,
            "heading": "Tanya Jawab",
            "text": ""
        },
        {
            "level": 3,
            "heading": "Apa beda HEX dan RGB?",
            "text": "Tidak ada beda pada warnanya — hanya pada notasinya. HEX menuliskan nilai Merah/Hijau/Biru yang sama dalam basis-16. #FF0000 identik dengan rgb(255, 0, 0). HEX lebih pendek diketik; RGB lebih mudah dimodifikasi secara terprogram dan mendukung kanal alfa (RGBA)."
        },
        {
            "level": 3,
            "heading": "Kapan saya harus memakai CMYK alih-alih RGB?",
            "text": "Kapan pun hasil akhir Anda dicetak pada bahan fisik — kertas, karton, kain, plastik. Jika tetap di layar, pakai RGB (atau HEX/HSL). Jika dicetak, beralihlah ke CMYK pada tahap ekspor."
        },
        {
            "level": 3,
            "heading": "Apakah HSL lebih baik daripada HEX?",
            "text": "Untuk sistem desain, penataan tema, dan manipulasi warna — ya. Untuk komunikasi cepat dan salin-tempel ke berbagai alat — HEX lebih praktis. Keduanya menjelaskan warna yang sama; HSL hanya menata informasinya dengan cara yang sesuai dengan cara manusia memikirkan warna (rona → kepekatan → kecerahan)."
        },
        {
            "level": 3,
            "heading": "Bisakah ponsel saya menampilkan keempat format sekaligus?",
            "text": "Bisa. Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) menangkap warna dari kamera atau foto Anda dan menampilkan HEX, RGB, HSL, dan CMYK secara bersamaan. Ketuk nilai mana pun untuk menyalinnya. Aplikasi ini berfungsi sebagai kalkulator format warna dunia nyata — satu tangkapan, empat format."
        },
        {
            "level": 2,
            "heading": "Intinya",
            "text": "HEX untuk web dan komunikasi cepat. RGB untuk pengembangan aplikasi dan transparansi. HSL untuk sistem desain dan manipulasi warna. CMYK untuk cetak.\n\nAnda tidak perlu memilih satu — Anda perlu memakai yang tepat untuk setiap konteks. Dan ketika Anda perlu mengonversi antarformat atau menangkap warna dunia nyata dalam keempat format sekaligus, pemilih warna di ponsel adalah alat tercepat yang tersedia.\n\nUnduh Color Picker Camera untuk iPhone (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) | Unduh untuk Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker)"
        }
    ],
    "text": "Warna yang Sama, Empat Bahasa Berbeda\n\nPilih warna apa saja — misalnya coral yang hangat. Sekarang jelaskan warna itu dengan empat cara:\n\n- HEX: #E8635A\n- RGB: rgb(232, 99, 90)\n- HSL: hsl(4, 75%, 63%)\n- CMYK: 0, 57, 61, 9\n\nKeempatnya menjelaskan warna yang persis sama. Semuanya bukan standar yang saling bersaing — semuanya adalah representasi warna yang berbeda, dioptimalkan untuk konteks yang berbeda. Kebingungan muncul karena kita tidak tahu konteks mana yang menuntut format mana.\n\nPanduan ini menguraikan setiap format dengan bahasa sederhana: apa itu, cara kerjanya, kapan dipakai, dan kapan justru menjadi pilihan yang keliru. Jika Anda bekerja dengan warna dalam bentuk apa pun — desain, pengembangan, cetak, pemasaran — panduan ini akan menyelamatkan Anda dari salah memilih format untuk proyek Anda.\n\nHEX: Standar Web\n\nApa itu\n\nHEX (heksadesimal) adalah kode enam karakter yang diawali tanda pagar: #E8635A. Setiap pasang karakter mewakili kanal Merah, Hijau, dan Biru dalam notasi basis-16 (00 hingga FF).\n\nSecara fungsional identik dengan RGB — hanya ditulis berbeda. #E8635A sama dengan rgb(232, 99, 90). HEX hanyalah cara yang lebih ringkas untuk menuliskan nilai RGB.\n\nKapan memakai HEX\n\n- CSS dan pengembangan web — HEX adalah notasi warna bawaan di CSS. Semua peramban memahaminya. color: #E8635A; adalah cara paling umum menentukan warna di web.\n- Alat desain — Figma, Sketch, Adobe XD, dan Canva semuanya memakai HEX sebagai input utama. Saat seorang desainer berkata \"birunya #3B82F6,\" semua orang paham maksudnya.\n- Pedoman merek — panduan merek digital hampir selalu mencantumkan nilai HEX karena pendek, tidak ambigu, dan mudah disalin-tempel.\n- Komunikasi cepat — \"pakai #333\" lebih cepat daripada \"pakai rgb(51, 51, 51)\" dalam pesan Slack.\n\nKapan TIDAK memakai HEX\n\n- Saat Anda butuh transparansi — HEX 6 digit standar tidak mendukung alfa/opasitas. Anda perlu HEX 8 digit (#E8635A80) yang kurang mudah dibaca, atau beralih ke RGBA.\n- Saat Anda perlu menyesuaikan warna secara terprogram — \"buat ini 20% lebih terang\" nyaris mustahil dihitung dalam HEX di kepala. HSL jauh lebih baik untuk ini.\n- Produksi cetak — mesin cetak tidak memakai HEX. Tidak pernah.\n\nContoh nyata\n\nAnda sedang menulis CSS untuk sebuah halaman arahan. Desainer memberi Anda panduan gaya berisi warna merek. Anda menulis:\n\n:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }\n\nHEX sempurna di sini: ringkas, mudah dibaca, dan didukung secara universal.\n\nRGB: Model Warna Layar\n\nApa itu\n\nRGB adalah singkatan dari Red, Green, Blue — tiga warna cahaya yang dicampur layar untuk menghasilkan setiap warna yang Anda lihat. Setiap kanal berkisar dari 0 hingga 255. rgb(232, 99, 90) berarti 232 unit merah, 99 unit hijau, dan 90 unit biru.\n\nRGB adalah fondasi semua warna digital. HEX hanyalah RGB dalam notasi berbeda. HSL adalah transformasi RGB yang ramah manusia. Semua yang tampil di layar Anda pada akhirnya menjadi nilai RGB yang dikirim ke piksel.\n\nKapan memakai RGB\n\n- Saat Anda butuh transparansi — RGBA menambahkan kanal alfa: rgba(232, 99, 90, 0.5) untuk opasitas 50%. Ini lebih rapi daripada HEX 8 digit dan didukung luas di CSS, alat desain, dan pemrograman.\n- Pemrograman dan pengembangan aplikasi — Swift, Kotlin, Flutter, React Native — kerangka kerja aplikasi umumnya bekerja dengan nilai RGB/RGBA secara internal.\n- LED dan pencahayaan — lampu pintar (Philips Hue, strip LED) memakai nilai RGB. Jika Anda mendesain untuk instalasi cahaya fisik, RGB adalah format aslinya.\n- Matematika warna — mencampur warna, menginterpolasi gradien, atau menghasilkan warna secara terprogram sangat mudah dalam RGB.\n\nKapan TIDAK memakai RGB\n\n- Cetak — layar memancarkan cahaya (pencampuran aditif); kertas memantulkannya (pencampuran subtraktif). RGB tidak bisa merepresentasikan secara akurat hasil yang keluar dari mesin cetak.\n- Menyesuaikan kecerahan atau saturasi — \"kurangi saturasi warna ini 30%\" tidak intuitif dalam RGB. Anda harus mengonversinya ke HSL dulu.\n\nContoh nyata\n\nAnda sedang membangun aplikasi React Native dan butuh lapisan semi-transparan:\n\nbackgroundColor: 'rgba(0, 0, 0, 0.6)'\n\nRGB dengan alfa adalah pilihan alami — langsung, mudah dibaca, dan asli bagi mesin perender.\n\nHSL: Format Para Desainer\n\nApa itu\n\nHSL adalah singkatan dari Hue, Saturation, Lightness (rona, saturasi, kecerahan):\n\n- Hue (0°–360°) — warnanya sendiri, sebagai posisi pada roda warna. 0° adalah merah, 120° hijau, 240° biru.\n- Saturation (0%–100%) — seberapa pekat warnanya. 0% adalah abu-abu, 100% adalah bentuk termurni dari rona itu.\n- Lightness (0%–100%) — seberapa terang atau gelap. 0% hitam, 100% putih, 50% adalah warna \"sebenarnya\".\n\nhsl(4, 75%, 63%) berarti: rona kemerahan (4°), sangat pekat (saturasi 75%), dan agak terang (63%).\n\nKapan memakai HSL\n\n- Sistem desain dan tema — HSL adalah format terbaik untuk membuat skala warna yang konsisten. Ingin 10 gradasi dari warna utama Anda? Pertahankan ronanya, variasikan kecerahan dari 10% hingga 95%. Ingin versi yang lebih kalem? Turunkan saturasinya. Ini nyaris mustahil dilakukan secara intuitif dalam HEX atau RGB.\n- Mode gelap / mode terang — berganti tema berarti menyesuaikan kecerahan dan saturasi, yang memetakan langsung ke parameter HSL. Tailwind CSS, Radix Colors, dan banyak sistem desain modern dibangun di atas HSL.\n- Pembuatan warna terprogram — menghasilkan status hover, status nonaktif, latar belakang, dan garis tepi dari satu warna dasar sangat mudah dalam HSL: hsl(4, 75%, 73%) untuk varian lebih terang, hsl(4, 75%, 43%) untuk yang lebih gelap.\n- Aksesibilitas — pemeriksaan rasio kontras menjadi lebih intuitif ketika Anda bisa melihat dan menyesuaikan kecerahan secara langsung.\n\nKapan TIDAK memakai HSL\n\n- Komunikasi lintas tim — kebanyakan orang tidak berpikir dalam derajat dan persentase. Mengatakan \"tombolnya hsl(4, 75%, 63%)\" kurang jelas dibanding \"tombolnya #E8635A\" dalam serah terima desain.\n- Cetak — sama seperti RGB, HSL adalah model warna layar.\n\nContoh nyata\n\nAnda sedang membangun sistem desain di Tailwind CSS dan butuh skala warna yang konsisten:\n\n--brand-50: hsl(4, 75%, 95%);\n--brand-100: hsl(4, 75%, 90%);\n--brand-200: hsl(4, 75%, 80%);\n--brand-500: hsl(4, 75%, 63%);\n--brand-700: hsl(4, 75%, 43%);\n--brand-900: hsl(4, 75%, 25%);\n\nRona sama, saturasi sama, kecerahan berbeda. Skala sempurna dalam 30 detik. Coba lakukan itu dalam HEX.\n\nCMYK: Format Cetak\n\nApa itu\n\nCMYK adalah singkatan dari Cyan, Magenta, Yellow, Key (hitam). Format ini menjelaskan warna sebagai campuran tinta yang diterapkan pada kertas putih. Setiap nilai berkisar dari 0% hingga 100%: 0, 57, 61, 9 berarti 0% cyan, 57% magenta, 61% kuning, dan 9% hitam.\n\nBerbeda dari RGB (yang menambahkan cahaya untuk membuat warna), CMYK mengurangi dari kertas putih. Makin banyak tinta = warna makin gelap. Karena itulah ia disebut model warna subtraktif.\n\nKapan memakai CMYK\n\n- Desain cetak — kartu nama, brosur, kemasan, poster, majalah. Setiap berkas yang dikirim ke percetakan komersial harus berada dalam mode warna CMYK.\n- Menyiapkan berkas untuk cetak di InDesign, Illustrator — alat-alat ini memungkinkan Anda bekerja dalam mode CMYK untuk melihat pratinjau bagaimana warna akan tampak di atas kertas (yang selalu kurang cerah dibanding di layar).\n- Pemeriksaan warna — memastikan warna desain Anda dapat direproduksi dalam CMYK. Beberapa warna RGB yang mencolok (terutama hijau neon dan biru elektrik) secara fisik mustahil dicetak dalam CMYK — warna-warna itu jatuh \"di luar gamut\".\n\nKapan TIDAK memakai CMYK\n\n- Apa pun yang tampil di layar — situs web, aplikasi, media sosial, presentasi, surel. Layar memakai RGB. Menentukan CMYK untuk sebuah situs web itu seperti memberi petunjuk arah berkendara dalam mil laut — secara teknis memang satuan jarak, tetapi tidak berguna untuk perjalanannya.\n- Penyuntingan fotografi — sunting dalam RGB, konversikan ke CMYK hanya pada tahap ekspor akhir untuk cetak.\n\nContoh nyata\n\nAnda mendesain sebuah poster di Illustrator. Sebelum mengirimnya ke percetakan, Anda mengonversi dokumen ke mode warna CMYK (File → Document Color Mode → CMYK Color), memeriksa peringatan di luar gamut, dan menyesuaikan biru elektrik yang bergeser menjadi teal keruh. PDF akhir disimpan sebagai CMYK dengan profil ICC percetakan.\n\nTabel Rujukan Cepat\n\nFormat | Paling Cocok Untuk | Rentang | Mendukung Transparansi | Mudah Dibaca Manusia | Aman untuk Cetak\nHEX | Web, CSS, pedoman merek | #000000 – #FFFFFF | Hanya 8 digit (#RRGGBBAA) | Sedang | Tidak\nRGB | Layar, aplikasi, gradien | 0–255 per kanal | Ya (RGBA) | Sedang | Tidak\nHSL | Sistem desain, tema | 0°–360°, 0%–100%, 0%–100% | Ya (HSLA) | Tinggi | Tidak\nCMYK | Cetak, kemasan | 0%–100% per kanal | Tidak | Rendah | Ya\n\nContekan: Format Mana untuk Pekerjaan Mana\n\nProyek Anda | Pakai Format Ini | Alasannya\nCSS situs web | HEX atau HSL | HEX untuk kesederhanaan; HSL untuk sistem desain bertema\nAplikasi seluler (iOS/Android) | RGB/RGBA | Kerangka kerja asli memakai RGB secara internal\nBerkas desain Figma / Sketch | HEX | Input standar di alat desain\nSistem desain / token | HSL | Skala dan varian sangat mudah dibuat dalam HSL\nGrafis media sosial | HEX atau RGB | Hanya digital; Canva/Photoshop menerima keduanya\nKartu nama / brosur | CMYK | Menuju mesin cetak fisik\nKemasan produk | CMYK + Pantone | Cetak + konsistensi warna merek\nTemplat surel | HEX | Klien surel mendukung HEX dengan andal\nLampu pintar / LED | RGB | Perangkat keras LED memakai RGB secara asli\nDokumen pedoman merek | Keempatnya | Tim yang berbeda butuh format yang berbeda\n\nBisakah Dikonversi Antarformat?\n\nBisa — dengan catatan.\n\n- HEX ↔ RGB — tanpa kehilangan data, keduanya data yang sama dalam notasi berbeda.\n- RGB ↔ HSL — tanpa kehilangan data, ini transformasi matematis.\n- RGB → CMYK — ada kehilangan. Sebagian warna RGB (biru pekat, neon, hijau terang) tidak dapat direproduksi dalam CMYK. Konversi akan menggesernya ke padanan tercetak terdekat, yang sering terlihat lebih kusam.\n- CMYK → RGB — secara teknis mungkin, tetapi hasilnya bergantung pada profil ICC yang dipakai. Dua pengonversi bisa memberi nilai RGB yang sedikit berbeda untuk masukan CMYK yang sama.\n\nUntuk konversi cepat saat bepergian, pemilih warna di ponsel yang menampilkan keempat format sekaligus adalah alur kerja tercepat. Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) melakukan persis itu — arahkan kamera Anda ke warna apa pun dan lihat HEX, RGB, HSL, dan CMYK berdampingan. Satu ketukan menyalin nilai mana pun. Tersedia di iPhone (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) dan Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker).\n\nKesalahan Umum\n\n1. Mendesain untuk cetak dalam RGB\n\nIni kesalahan klasik pemula. Anda mendesain poster yang cerah di Photoshop dalam mode RGB, mengirimkannya ke percetakan, dan hasilnya tampak pudar — terutama hijau dan biru. Selalu konversikan ke CMYK sebelum mengekspor untuk cetak, dan periksa peringatan gamut.\n\n2. Memakai HEX saat Anda butuh transparansi\n\nJika desain Anda menuntut lapisan semi-transparan, bayangan, atau efek glassmorphism, beralihlah ke RGBA atau HSLA. HEX 6 digit standar tidak membawa informasi opasitas, dan HEX 8 digit jarang dipakai karena sulit dibaca.\n\n3. Membangun sistem desain dalam HEX\n\n\"#3B82F6 tetapi 20% lebih terang\" memerlukan konversi, perhitungan, lalu konversi balik. Dalam HSL: naikkan kecerahannya 20%. Token desain, generator tema, dan properti kustom CSS modern bekerja jauh lebih baik dalam HSL.\n\n4. Mengonversi CMYK ke HEX untuk web dan berharap warnanya sama\n\nMerek yang didefinisikan dalam CMYK untuk cetak akan tampak berbeda saat dikonversi mentah-mentah ke HEX untuk web. Pendekatan yang benar: cocokkan warna di layar secara visual dengan versi cetaknya, lalu tetapkan nilai HEX terpisah untuk penggunaan digital. Pedoman merek sebaiknya mencantumkan keduanya.\n\nTanya Jawab\n\nApa beda HEX dan RGB?\n\nTidak ada beda pada warnanya — hanya pada notasinya. HEX menuliskan nilai Merah/Hijau/Biru yang sama dalam basis-16. #FF0000 identik dengan rgb(255, 0, 0). HEX lebih pendek diketik; RGB lebih mudah dimodifikasi secara terprogram dan mendukung kanal alfa (RGBA).\n\nKapan saya harus memakai CMYK alih-alih RGB?\n\nKapan pun hasil akhir Anda dicetak pada bahan fisik — kertas, karton, kain, plastik. Jika tetap di layar, pakai RGB (atau HEX/HSL). Jika dicetak, beralihlah ke CMYK pada tahap ekspor.\n\nApakah HSL lebih baik daripada HEX?\n\nUntuk sistem desain, penataan tema, dan manipulasi warna — ya. Untuk komunikasi cepat dan salin-tempel ke berbagai alat — HEX lebih praktis. Keduanya menjelaskan warna yang sama; HSL hanya menata informasinya dengan cara yang sesuai dengan cara manusia memikirkan warna (rona → kepekatan → kecerahan).\n\nBisakah ponsel saya menampilkan keempat format sekaligus?\n\nBisa. Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) menangkap warna dari kamera atau foto Anda dan menampilkan HEX, RGB, HSL, dan CMYK secara bersamaan. Ketuk nilai mana pun untuk menyalinnya. Aplikasi ini berfungsi sebagai kalkulator format warna dunia nyata — satu tangkapan, empat format.\n\nIntinya\n\nHEX untuk web dan komunikasi cepat. RGB untuk pengembangan aplikasi dan transparansi. HSL untuk sistem desain dan manipulasi warna. CMYK untuk cetak.\n\nAnda tidak perlu memilih satu — Anda perlu memakai yang tepat untuk setiap konteks. Dan ketika Anda perlu mengonversi antarformat atau menangkap warna dunia nyata dalam keempat format sekaligus, pemilih warna di ponsel adalah alat tercepat yang tersedia.\n\nUnduh Color Picker Camera untuk iPhone (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) | Unduh untuk Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker)",
    "markdown": "## Warna yang Sama, Empat Bahasa Berbeda\n\nPilih warna apa saja — misalnya coral yang hangat. Sekarang jelaskan warna itu dengan empat cara:\n\n- **HEX:** #E8635A\n- **RGB:** rgb(232, 99, 90)\n- **HSL:** hsl(4, 75%, 63%)\n- **CMYK:** 0, 57, 61, 9\n\nKeempatnya menjelaskan warna yang persis sama. Semuanya bukan standar yang saling bersaing — semuanya adalah *representasi* warna yang berbeda, dioptimalkan untuk konteks yang berbeda. Kebingungan muncul karena kita tidak tahu konteks mana yang menuntut format mana.\n\nPanduan ini menguraikan setiap format dengan bahasa sederhana: apa itu, cara kerjanya, kapan dipakai, dan kapan justru menjadi pilihan yang keliru. Jika Anda bekerja dengan warna dalam bentuk apa pun — desain, pengembangan, cetak, pemasaran — panduan ini akan menyelamatkan Anda dari salah memilih format untuk proyek Anda.\n\n## HEX: Standar Web\n\n### Apa itu\n\nHEX (heksadesimal) adalah kode enam karakter yang diawali tanda pagar: `#E8635A`. Setiap pasang karakter mewakili kanal Merah, Hijau, dan Biru dalam notasi basis-16 (00 hingga FF).\n\nSecara fungsional identik dengan RGB — hanya ditulis berbeda. `#E8635A` sama dengan `rgb(232, 99, 90)`. HEX hanyalah cara yang lebih ringkas untuk menuliskan nilai RGB.\n\n### Kapan memakai HEX\n\n- **CSS dan pengembangan web** — HEX adalah notasi warna bawaan di CSS. Semua peramban memahaminya. `color: #E8635A;` adalah cara paling umum menentukan warna di web.\n- **Alat desain** — Figma, Sketch, Adobe XD, dan Canva semuanya memakai HEX sebagai input utama. Saat seorang desainer berkata \"birunya #3B82F6,\" semua orang paham maksudnya.\n- **Pedoman merek** — panduan merek digital hampir selalu mencantumkan nilai HEX karena pendek, tidak ambigu, dan mudah disalin-tempel.\n- **Komunikasi cepat** — \"pakai #333\" lebih cepat daripada \"pakai rgb(51, 51, 51)\" dalam pesan Slack.\n\n### Kapan TIDAK memakai HEX\n\n- **Saat Anda butuh transparansi** — HEX 6 digit standar tidak mendukung alfa/opasitas. Anda perlu HEX 8 digit (`#E8635A80`) yang kurang mudah dibaca, atau beralih ke RGBA.\n- **Saat Anda perlu menyesuaikan warna secara terprogram** — \"buat ini 20% lebih terang\" nyaris mustahil dihitung dalam HEX di kepala. HSL jauh lebih baik untuk ini.\n- **Produksi cetak** — mesin cetak tidak memakai HEX. Tidak pernah.\n\n### Contoh nyata\n\nAnda sedang menulis CSS untuk sebuah halaman arahan. Desainer memberi Anda panduan gaya berisi warna merek. Anda menulis:\n\n`:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }`\n\nHEX sempurna di sini: ringkas, mudah dibaca, dan didukung secara universal.\n\n## RGB: Model Warna Layar\n\n### Apa itu\n\nRGB adalah singkatan dari Red, Green, Blue — tiga warna cahaya yang dicampur layar untuk menghasilkan setiap warna yang Anda lihat. Setiap kanal berkisar dari 0 hingga 255. `rgb(232, 99, 90)` berarti 232 unit merah, 99 unit hijau, dan 90 unit biru.\n\nRGB adalah fondasi semua warna digital. HEX hanyalah RGB dalam notasi berbeda. HSL adalah transformasi RGB yang ramah manusia. Semua yang tampil di layar Anda pada akhirnya menjadi nilai RGB yang dikirim ke piksel.\n\n### Kapan memakai RGB\n\n- **Saat Anda butuh transparansi** — RGBA menambahkan kanal alfa: `rgba(232, 99, 90, 0.5)` untuk opasitas 50%. Ini lebih rapi daripada HEX 8 digit dan didukung luas di CSS, alat desain, dan pemrograman.\n- **Pemrograman dan pengembangan aplikasi** — Swift, Kotlin, Flutter, React Native — kerangka kerja aplikasi umumnya bekerja dengan nilai RGB/RGBA secara internal.\n- **LED dan pencahayaan** — lampu pintar (Philips Hue, strip LED) memakai nilai RGB. Jika Anda mendesain untuk instalasi cahaya fisik, RGB adalah format aslinya.\n- **Matematika warna** — mencampur warna, menginterpolasi gradien, atau menghasilkan warna secara terprogram sangat mudah dalam RGB.\n\n### Kapan TIDAK memakai RGB\n\n- **Cetak** — layar memancarkan cahaya (pencampuran aditif); kertas memantulkannya (pencampuran subtraktif). RGB tidak bisa merepresentasikan secara akurat hasil yang keluar dari mesin cetak.\n- **Menyesuaikan kecerahan atau saturasi** — \"kurangi saturasi warna ini 30%\" tidak intuitif dalam RGB. Anda harus mengonversinya ke HSL dulu.\n\n### Contoh nyata\n\nAnda sedang membangun aplikasi React Native dan butuh lapisan semi-transparan:\n\n`backgroundColor: 'rgba(0, 0, 0, 0.6)'`\n\nRGB dengan alfa adalah pilihan alami — langsung, mudah dibaca, dan asli bagi mesin perender.\n\n## HSL: Format Para Desainer\n\n### Apa itu\n\nHSL adalah singkatan dari Hue, Saturation, Lightness (rona, saturasi, kecerahan):\n\n- **Hue** (0°–360°) — warnanya sendiri, sebagai posisi pada roda warna. 0° adalah merah, 120° hijau, 240° biru.\n- **Saturation** (0%–100%) — seberapa pekat warnanya. 0% adalah abu-abu, 100% adalah bentuk termurni dari rona itu.\n- **Lightness** (0%–100%) — seberapa terang atau gelap. 0% hitam, 100% putih, 50% adalah warna \"sebenarnya\".\n\n`hsl(4, 75%, 63%)` berarti: rona kemerahan (4°), sangat pekat (saturasi 75%), dan agak terang (63%).\n\n### Kapan memakai HSL\n\n- **Sistem desain dan tema** — HSL adalah format terbaik untuk membuat skala warna yang konsisten. Ingin 10 gradasi dari warna utama Anda? Pertahankan ronanya, variasikan kecerahan dari 10% hingga 95%. Ingin versi yang lebih kalem? Turunkan saturasinya. Ini nyaris mustahil dilakukan secara intuitif dalam HEX atau RGB.\n- **Mode gelap / mode terang** — berganti tema berarti menyesuaikan kecerahan dan saturasi, yang memetakan langsung ke parameter HSL. Tailwind CSS, Radix Colors, dan banyak sistem desain modern dibangun di atas HSL.\n- **Pembuatan warna terprogram** — menghasilkan status hover, status nonaktif, latar belakang, dan garis tepi dari satu warna dasar sangat mudah dalam HSL: `hsl(4, 75%, 73%)` untuk varian lebih terang, `hsl(4, 75%, 43%)` untuk yang lebih gelap.\n- **Aksesibilitas** — pemeriksaan rasio kontras menjadi lebih intuitif ketika Anda bisa melihat dan menyesuaikan kecerahan secara langsung.\n\n### Kapan TIDAK memakai HSL\n\n- **Komunikasi lintas tim** — kebanyakan orang tidak berpikir dalam derajat dan persentase. Mengatakan \"tombolnya hsl(4, 75%, 63%)\" kurang jelas dibanding \"tombolnya #E8635A\" dalam serah terima desain.\n- **Cetak** — sama seperti RGB, HSL adalah model warna layar.\n\n### Contoh nyata\n\nAnda sedang membangun sistem desain di Tailwind CSS dan butuh skala warna yang konsisten:\n\n`--brand-50: hsl(4, 75%, 95%);--brand-100: hsl(4, 75%, 90%);--brand-200: hsl(4, 75%, 80%);--brand-500: hsl(4, 75%, 63%);--brand-700: hsl(4, 75%, 43%);--brand-900: hsl(4, 75%, 25%);`\n\nRona sama, saturasi sama, kecerahan berbeda. Skala sempurna dalam 30 detik. Coba lakukan itu dalam HEX.\n\n## CMYK: Format Cetak\n\n### Apa itu\n\nCMYK adalah singkatan dari Cyan, Magenta, Yellow, Key (hitam). Format ini menjelaskan warna sebagai campuran tinta yang diterapkan pada kertas putih. Setiap nilai berkisar dari 0% hingga 100%: `0, 57, 61, 9` berarti 0% cyan, 57% magenta, 61% kuning, dan 9% hitam.\n\nBerbeda dari RGB (yang menambahkan cahaya untuk membuat warna), CMYK mengurangi dari kertas putih. Makin banyak tinta = warna makin gelap. Karena itulah ia disebut model warna **subtraktif**.\n\n### Kapan memakai CMYK\n\n- **Desain cetak** — kartu nama, brosur, kemasan, poster, majalah. Setiap berkas yang dikirim ke percetakan komersial harus berada dalam mode warna CMYK.\n- **Menyiapkan berkas untuk cetak di InDesign, Illustrator** — alat-alat ini memungkinkan Anda bekerja dalam mode CMYK untuk melihat pratinjau bagaimana warna akan tampak di atas kertas (yang selalu kurang cerah dibanding di layar).\n- **Pemeriksaan warna** — memastikan warna desain Anda dapat direproduksi dalam CMYK. Beberapa warna RGB yang mencolok (terutama hijau neon dan biru elektrik) secara fisik mustahil dicetak dalam CMYK — warna-warna itu jatuh \"di luar gamut\".\n\n### Kapan TIDAK memakai CMYK\n\n- **Apa pun yang tampil di layar** — situs web, aplikasi, media sosial, presentasi, surel. Layar memakai RGB. Menentukan CMYK untuk sebuah situs web itu seperti memberi petunjuk arah berkendara dalam mil laut — secara teknis memang satuan jarak, tetapi tidak berguna untuk perjalanannya.\n- **Penyuntingan fotografi** — sunting dalam RGB, konversikan ke CMYK hanya pada tahap ekspor akhir untuk cetak.\n\n### Contoh nyata\n\nAnda mendesain sebuah poster di Illustrator. Sebelum mengirimnya ke percetakan, Anda mengonversi dokumen ke mode warna CMYK (`File → Document Color Mode → CMYK Color`), memeriksa peringatan di luar gamut, dan menyesuaikan biru elektrik yang bergeser menjadi teal keruh. PDF akhir disimpan sebagai CMYK dengan profil ICC percetakan.\n\n## Tabel Rujukan Cepat\n\n| Format | Paling Cocok Untuk | Rentang | Mendukung Transparansi | Mudah Dibaca Manusia | Aman untuk Cetak |\n| --- | --- | --- | --- | --- | --- |\n| HEX | Web, CSS, pedoman merek | #000000 – #FFFFFF | Hanya 8 digit (#RRGGBBAA) | Sedang | Tidak |\n| RGB | Layar, aplikasi, gradien | 0–255 per kanal | Ya (RGBA) | Sedang | Tidak |\n| HSL | Sistem desain, tema | 0°–360°, 0%–100%, 0%–100% | Ya (HSLA) | Tinggi | Tidak |\n| CMYK | Cetak, kemasan | 0%–100% per kanal | Tidak | Rendah | Ya |\n\n## Contekan: Format Mana untuk Pekerjaan Mana\n\n| Proyek Anda | Pakai Format Ini | Alasannya |\n| --- | --- | --- |\n| CSS situs web | HEX atau HSL | HEX untuk kesederhanaan; HSL untuk sistem desain bertema |\n| Aplikasi seluler (iOS/Android) | RGB/RGBA | Kerangka kerja asli memakai RGB secara internal |\n| Berkas desain Figma / Sketch | HEX | Input standar di alat desain |\n| Sistem desain / token | HSL | Skala dan varian sangat mudah dibuat dalam HSL |\n| Grafis media sosial | HEX atau RGB | Hanya digital; Canva/Photoshop menerima keduanya |\n| Kartu nama / brosur | CMYK | Menuju mesin cetak fisik |\n| Kemasan produk | CMYK + Pantone | Cetak + konsistensi warna merek |\n| Templat surel | HEX | Klien surel mendukung HEX dengan andal |\n| Lampu pintar / LED | RGB | Perangkat keras LED memakai RGB secara asli |\n| Dokumen pedoman merek | Keempatnya | Tim yang berbeda butuh format yang berbeda |\n\n## Bisakah Dikonversi Antarformat?\n\nBisa — dengan catatan.\n\n- **HEX ↔ RGB** — tanpa kehilangan data, keduanya data yang sama dalam notasi berbeda.\n- **RGB ↔ HSL** — tanpa kehilangan data, ini transformasi matematis.\n- **RGB → CMYK** — ada kehilangan. Sebagian warna RGB (biru pekat, neon, hijau terang) tidak dapat direproduksi dalam CMYK. Konversi akan menggesernya ke padanan tercetak terdekat, yang sering terlihat lebih kusam.\n- **CMYK → RGB** — secara teknis mungkin, tetapi hasilnya bergantung pada profil ICC yang dipakai. Dua pengonversi bisa memberi nilai RGB yang sedikit berbeda untuk masukan CMYK yang sama.\n\nUntuk konversi cepat saat bepergian, pemilih warna di ponsel yang menampilkan keempat format sekaligus adalah alur kerja tercepat. **[Color Picker Camera: HEX RGB](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)** melakukan persis itu — arahkan kamera Anda ke warna apa pun dan lihat HEX, RGB, HSL, dan CMYK berdampingan. Satu ketukan menyalin nilai mana pun. Tersedia di [iPhone](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) dan [Android](https://play.google.com/store/apps/details?id=com.tomas.color_picker).\n\n## Kesalahan Umum\n\n### 1. Mendesain untuk cetak dalam RGB\n\nIni kesalahan klasik pemula. Anda mendesain poster yang cerah di Photoshop dalam mode RGB, mengirimkannya ke percetakan, dan hasilnya tampak pudar — terutama hijau dan biru. Selalu konversikan ke CMYK sebelum mengekspor untuk cetak, dan periksa peringatan gamut.\n\n### 2. Memakai HEX saat Anda butuh transparansi\n\nJika desain Anda menuntut lapisan semi-transparan, bayangan, atau efek glassmorphism, beralihlah ke RGBA atau HSLA. HEX 6 digit standar tidak membawa informasi opasitas, dan HEX 8 digit jarang dipakai karena sulit dibaca.\n\n### 3. Membangun sistem desain dalam HEX\n\n\"#3B82F6 tetapi 20% lebih terang\" memerlukan konversi, perhitungan, lalu konversi balik. Dalam HSL: naikkan kecerahannya 20%. Token desain, generator tema, dan properti kustom CSS modern bekerja jauh lebih baik dalam HSL.\n\n### 4. Mengonversi CMYK ke HEX untuk web dan berharap warnanya sama\n\nMerek yang didefinisikan dalam CMYK untuk cetak akan tampak berbeda saat dikonversi mentah-mentah ke HEX untuk web. Pendekatan yang benar: cocokkan warna di layar secara visual dengan versi cetaknya, lalu tetapkan nilai HEX terpisah untuk penggunaan digital. Pedoman merek sebaiknya mencantumkan keduanya.\n\n## Tanya Jawab\n\n### Apa beda HEX dan RGB?\n\nTidak ada beda pada warnanya — hanya pada notasinya. HEX menuliskan nilai Merah/Hijau/Biru yang sama dalam basis-16. `#FF0000` identik dengan `rgb(255, 0, 0)`. HEX lebih pendek diketik; RGB lebih mudah dimodifikasi secara terprogram dan mendukung kanal alfa (RGBA).\n\n### Kapan saya harus memakai CMYK alih-alih RGB?\n\nKapan pun hasil akhir Anda dicetak pada bahan fisik — kertas, karton, kain, plastik. Jika tetap di layar, pakai RGB (atau HEX/HSL). Jika dicetak, beralihlah ke CMYK pada tahap ekspor.\n\n### Apakah HSL lebih baik daripada HEX?\n\nUntuk sistem desain, penataan tema, dan manipulasi warna — ya. Untuk komunikasi cepat dan salin-tempel ke berbagai alat — HEX lebih praktis. Keduanya menjelaskan warna yang sama; HSL hanya menata informasinya dengan cara yang sesuai dengan cara manusia memikirkan warna (rona → kepekatan → kecerahan).\n\n### Bisakah ponsel saya menampilkan keempat format sekaligus?\n\nBisa. [Color Picker Camera: HEX RGB](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) menangkap warna dari kamera atau foto Anda dan menampilkan HEX, RGB, HSL, dan CMYK secara bersamaan. Ketuk nilai mana pun untuk menyalinnya. Aplikasi ini berfungsi sebagai kalkulator format warna dunia nyata — satu tangkapan, empat format.\n\n## Intinya\n\n**HEX** untuk web dan komunikasi cepat. **RGB** untuk pengembangan aplikasi dan transparansi. **HSL** untuk sistem desain dan manipulasi warna. **CMYK** untuk cetak.\n\nAnda tidak perlu memilih satu — Anda perlu memakai yang tepat untuk setiap konteks. Dan ketika Anda perlu mengonversi antarformat atau menangkap warna dunia nyata dalam keempat format sekaligus, pemilih warna di ponsel adalah alat tercepat yang tersedia.\n\n[Unduh Color Picker Camera untuk iPhone](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) | [Unduh untuk Android](https://play.google.com/store/apps/details?id=com.tomas.color_picker)",
    "html": "<h2>Warna yang Sama, Empat Bahasa Berbeda</h2><p>Pilih warna apa saja — misalnya coral yang hangat. Sekarang jelaskan warna itu dengan empat cara:</p><ul><li><strong>HEX:</strong> #E8635A</li><li><strong>RGB:</strong> rgb(232, 99, 90)</li><li><strong>HSL:</strong> hsl(4, 75%, 63%)</li><li><strong>CMYK:</strong> 0, 57, 61, 9</li></ul><p>Keempatnya menjelaskan warna yang persis sama. Semuanya bukan standar yang saling bersaing — semuanya adalah <em>representasi</em> warna yang berbeda, dioptimalkan untuk konteks yang berbeda. Kebingungan muncul karena kita tidak tahu konteks mana yang menuntut format mana.</p><p>Panduan ini menguraikan setiap format dengan bahasa sederhana: apa itu, cara kerjanya, kapan dipakai, dan kapan justru menjadi pilihan yang keliru. Jika Anda bekerja dengan warna dalam bentuk apa pun — desain, pengembangan, cetak, pemasaran — panduan ini akan menyelamatkan Anda dari salah memilih format untuk proyek Anda.</p><h2>HEX: Standar Web</h2><h3>Apa itu</h3><p>HEX (heksadesimal) adalah kode enam karakter yang diawali tanda pagar: <code>#E8635A</code>. Setiap pasang karakter mewakili kanal Merah, Hijau, dan Biru dalam notasi basis-16 (00 hingga FF).</p><p>Secara fungsional identik dengan RGB — hanya ditulis berbeda. <code>#E8635A</code> sama dengan <code>rgb(232, 99, 90)</code>. HEX hanyalah cara yang lebih ringkas untuk menuliskan nilai RGB.</p><h3>Kapan memakai HEX</h3><ul><li><strong>CSS dan pengembangan web</strong> — HEX adalah notasi warna bawaan di CSS. Semua peramban memahaminya. <code>color: #E8635A;</code> adalah cara paling umum menentukan warna di web.</li><li><strong>Alat desain</strong> — Figma, Sketch, Adobe XD, dan Canva semuanya memakai HEX sebagai input utama. Saat seorang desainer berkata \"birunya #3B82F6,\" semua orang paham maksudnya.</li><li><strong>Pedoman merek</strong> — panduan merek digital hampir selalu mencantumkan nilai HEX karena pendek, tidak ambigu, dan mudah disalin-tempel.</li><li><strong>Komunikasi cepat</strong> — \"pakai #333\" lebih cepat daripada \"pakai rgb(51, 51, 51)\" dalam pesan Slack.</li></ul><h3>Kapan TIDAK memakai HEX</h3><ul><li><strong>Saat Anda butuh transparansi</strong> — HEX 6 digit standar tidak mendukung alfa/opasitas. Anda perlu HEX 8 digit (<code>#E8635A80</code>) yang kurang mudah dibaca, atau beralih ke RGBA.</li><li><strong>Saat Anda perlu menyesuaikan warna secara terprogram</strong> — \"buat ini 20% lebih terang\" nyaris mustahil dihitung dalam HEX di kepala. HSL jauh lebih baik untuk ini.</li><li><strong>Produksi cetak</strong> — mesin cetak tidak memakai HEX. Tidak pernah.</li></ul><h3>Contoh nyata</h3><p>Anda sedang menulis CSS untuk sebuah halaman arahan. Desainer memberi Anda panduan gaya berisi warna merek. Anda menulis:</p><p><code>:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }</code></p><p>HEX sempurna di sini: ringkas, mudah dibaca, dan didukung secara universal.</p><h2>RGB: Model Warna Layar</h2><h3>Apa itu</h3><p>RGB adalah singkatan dari Red, Green, Blue — tiga warna cahaya yang dicampur layar untuk menghasilkan setiap warna yang Anda lihat. Setiap kanal berkisar dari 0 hingga 255. <code>rgb(232, 99, 90)</code> berarti 232 unit merah, 99 unit hijau, dan 90 unit biru.</p><p>RGB adalah fondasi semua warna digital. HEX hanyalah RGB dalam notasi berbeda. HSL adalah transformasi RGB yang ramah manusia. Semua yang tampil di layar Anda pada akhirnya menjadi nilai RGB yang dikirim ke piksel.</p><h3>Kapan memakai RGB</h3><ul><li><strong>Saat Anda butuh transparansi</strong> — RGBA menambahkan kanal alfa: <code>rgba(232, 99, 90, 0.5)</code> untuk opasitas 50%. Ini lebih rapi daripada HEX 8 digit dan didukung luas di CSS, alat desain, dan pemrograman.</li><li><strong>Pemrograman dan pengembangan aplikasi</strong> — Swift, Kotlin, Flutter, React Native — kerangka kerja aplikasi umumnya bekerja dengan nilai RGB/RGBA secara internal.</li><li><strong>LED dan pencahayaan</strong> — lampu pintar (Philips Hue, strip LED) memakai nilai RGB. Jika Anda mendesain untuk instalasi cahaya fisik, RGB adalah format aslinya.</li><li><strong>Matematika warna</strong> — mencampur warna, menginterpolasi gradien, atau menghasilkan warna secara terprogram sangat mudah dalam RGB.</li></ul><h3>Kapan TIDAK memakai RGB</h3><ul><li><strong>Cetak</strong> — layar memancarkan cahaya (pencampuran aditif); kertas memantulkannya (pencampuran subtraktif). RGB tidak bisa merepresentasikan secara akurat hasil yang keluar dari mesin cetak.</li><li><strong>Menyesuaikan kecerahan atau saturasi</strong> — \"kurangi saturasi warna ini 30%\" tidak intuitif dalam RGB. Anda harus mengonversinya ke HSL dulu.</li></ul><h3>Contoh nyata</h3><p>Anda sedang membangun aplikasi React Native dan butuh lapisan semi-transparan:</p><p><code>backgroundColor: 'rgba(0, 0, 0, 0.6)'</code></p><p>RGB dengan alfa adalah pilihan alami — langsung, mudah dibaca, dan asli bagi mesin perender.</p><h2>HSL: Format Para Desainer</h2><h3>Apa itu</h3><p>HSL adalah singkatan dari Hue, Saturation, Lightness (rona, saturasi, kecerahan):</p><ul><li><strong>Hue</strong> (0°–360°) — warnanya sendiri, sebagai posisi pada roda warna. 0° adalah merah, 120° hijau, 240° biru.</li><li><strong>Saturation</strong> (0%–100%) — seberapa pekat warnanya. 0% adalah abu-abu, 100% adalah bentuk termurni dari rona itu.</li><li><strong>Lightness</strong> (0%–100%) — seberapa terang atau gelap. 0% hitam, 100% putih, 50% adalah warna \"sebenarnya\".</li></ul><p><code>hsl(4, 75%, 63%)</code> berarti: rona kemerahan (4°), sangat pekat (saturasi 75%), dan agak terang (63%).</p><h3>Kapan memakai HSL</h3><ul><li><strong>Sistem desain dan tema</strong> — HSL adalah format terbaik untuk membuat skala warna yang konsisten. Ingin 10 gradasi dari warna utama Anda? Pertahankan ronanya, variasikan kecerahan dari 10% hingga 95%. Ingin versi yang lebih kalem? Turunkan saturasinya. Ini nyaris mustahil dilakukan secara intuitif dalam HEX atau RGB.</li><li><strong>Mode gelap / mode terang</strong> — berganti tema berarti menyesuaikan kecerahan dan saturasi, yang memetakan langsung ke parameter HSL. Tailwind CSS, Radix Colors, dan banyak sistem desain modern dibangun di atas HSL.</li><li><strong>Pembuatan warna terprogram</strong> — menghasilkan status hover, status nonaktif, latar belakang, dan garis tepi dari satu warna dasar sangat mudah dalam HSL: <code>hsl(4, 75%, 73%)</code> untuk varian lebih terang, <code>hsl(4, 75%, 43%)</code> untuk yang lebih gelap.</li><li><strong>Aksesibilitas</strong> — pemeriksaan rasio kontras menjadi lebih intuitif ketika Anda bisa melihat dan menyesuaikan kecerahan secara langsung.</li></ul><h3>Kapan TIDAK memakai HSL</h3><ul><li><strong>Komunikasi lintas tim</strong> — kebanyakan orang tidak berpikir dalam derajat dan persentase. Mengatakan \"tombolnya hsl(4, 75%, 63%)\" kurang jelas dibanding \"tombolnya #E8635A\" dalam serah terima desain.</li><li><strong>Cetak</strong> — sama seperti RGB, HSL adalah model warna layar.</li></ul><h3>Contoh nyata</h3><p>Anda sedang membangun sistem desain di Tailwind CSS dan butuh skala warna yang konsisten:</p><p><code>--brand-50: hsl(4, 75%, 95%);<br>--brand-100: hsl(4, 75%, 90%);<br>--brand-200: hsl(4, 75%, 80%);<br>--brand-500: hsl(4, 75%, 63%);<br>--brand-700: hsl(4, 75%, 43%);<br>--brand-900: hsl(4, 75%, 25%);</code></p><p>Rona sama, saturasi sama, kecerahan berbeda. Skala sempurna dalam 30 detik. Coba lakukan itu dalam HEX.</p><h2>CMYK: Format Cetak</h2><h3>Apa itu</h3><p>CMYK adalah singkatan dari Cyan, Magenta, Yellow, Key (hitam). Format ini menjelaskan warna sebagai campuran tinta yang diterapkan pada kertas putih. Setiap nilai berkisar dari 0% hingga 100%: <code>0, 57, 61, 9</code> berarti 0% cyan, 57% magenta, 61% kuning, dan 9% hitam.</p><p>Berbeda dari RGB (yang menambahkan cahaya untuk membuat warna), CMYK mengurangi dari kertas putih. Makin banyak tinta = warna makin gelap. Karena itulah ia disebut model warna <strong>subtraktif</strong>.</p><h3>Kapan memakai CMYK</h3><ul><li><strong>Desain cetak</strong> — kartu nama, brosur, kemasan, poster, majalah. Setiap berkas yang dikirim ke percetakan komersial harus berada dalam mode warna CMYK.</li><li><strong>Menyiapkan berkas untuk cetak di InDesign, Illustrator</strong> — alat-alat ini memungkinkan Anda bekerja dalam mode CMYK untuk melihat pratinjau bagaimana warna akan tampak di atas kertas (yang selalu kurang cerah dibanding di layar).</li><li><strong>Pemeriksaan warna</strong> — memastikan warna desain Anda dapat direproduksi dalam CMYK. Beberapa warna RGB yang mencolok (terutama hijau neon dan biru elektrik) secara fisik mustahil dicetak dalam CMYK — warna-warna itu jatuh \"di luar gamut\".</li></ul><h3>Kapan TIDAK memakai CMYK</h3><ul><li><strong>Apa pun yang tampil di layar</strong> — situs web, aplikasi, media sosial, presentasi, surel. Layar memakai RGB. Menentukan CMYK untuk sebuah situs web itu seperti memberi petunjuk arah berkendara dalam mil laut — secara teknis memang satuan jarak, tetapi tidak berguna untuk perjalanannya.</li><li><strong>Penyuntingan fotografi</strong> — sunting dalam RGB, konversikan ke CMYK hanya pada tahap ekspor akhir untuk cetak.</li></ul><h3>Contoh nyata</h3><p>Anda mendesain sebuah poster di Illustrator. Sebelum mengirimnya ke percetakan, Anda mengonversi dokumen ke mode warna CMYK (<code>File → Document Color Mode → CMYK Color</code>), memeriksa peringatan di luar gamut, dan menyesuaikan biru elektrik yang bergeser menjadi teal keruh. PDF akhir disimpan sebagai CMYK dengan profil ICC percetakan.</p><h2>Tabel Rujukan Cepat</h2><table><thead><tr><th>Format</th><th>Paling Cocok Untuk</th><th>Rentang</th><th>Mendukung Transparansi</th><th>Mudah Dibaca Manusia</th><th>Aman untuk Cetak</th></tr></thead><tbody><tr><td><strong>HEX</strong></td><td>Web, CSS, pedoman merek</td><td>#000000 – #FFFFFF</td><td>Hanya 8 digit (#RRGGBBAA)</td><td>Sedang</td><td>Tidak</td></tr><tr><td><strong>RGB</strong></td><td>Layar, aplikasi, gradien</td><td>0–255 per kanal</td><td>Ya (RGBA)</td><td>Sedang</td><td>Tidak</td></tr><tr><td><strong>HSL</strong></td><td>Sistem desain, tema</td><td>0°–360°, 0%–100%, 0%–100%</td><td>Ya (HSLA)</td><td>Tinggi</td><td>Tidak</td></tr><tr><td><strong>CMYK</strong></td><td>Cetak, kemasan</td><td>0%–100% per kanal</td><td>Tidak</td><td>Rendah</td><td>Ya</td></tr></tbody></table><h2>Contekan: Format Mana untuk Pekerjaan Mana</h2><table><thead><tr><th>Proyek Anda</th><th>Pakai Format Ini</th><th>Alasannya</th></tr></thead><tbody><tr><td>CSS situs web</td><td>HEX atau HSL</td><td>HEX untuk kesederhanaan; HSL untuk sistem desain bertema</td></tr><tr><td>Aplikasi seluler (iOS/Android)</td><td>RGB/RGBA</td><td>Kerangka kerja asli memakai RGB secara internal</td></tr><tr><td>Berkas desain Figma / Sketch</td><td>HEX</td><td>Input standar di alat desain</td></tr><tr><td>Sistem desain / token</td><td>HSL</td><td>Skala dan varian sangat mudah dibuat dalam HSL</td></tr><tr><td>Grafis media sosial</td><td>HEX atau RGB</td><td>Hanya digital; Canva/Photoshop menerima keduanya</td></tr><tr><td>Kartu nama / brosur</td><td>CMYK</td><td>Menuju mesin cetak fisik</td></tr><tr><td>Kemasan produk</td><td>CMYK + Pantone</td><td>Cetak + konsistensi warna merek</td></tr><tr><td>Templat surel</td><td>HEX</td><td>Klien surel mendukung HEX dengan andal</td></tr><tr><td>Lampu pintar / LED</td><td>RGB</td><td>Perangkat keras LED memakai RGB secara asli</td></tr><tr><td>Dokumen pedoman merek</td><td>Keempatnya</td><td>Tim yang berbeda butuh format yang berbeda</td></tr></tbody></table><h2>Bisakah Dikonversi Antarformat?</h2><p>Bisa — dengan catatan.</p><ul><li><strong>HEX ↔ RGB</strong> — tanpa kehilangan data, keduanya data yang sama dalam notasi berbeda.</li><li><strong>RGB ↔ HSL</strong> — tanpa kehilangan data, ini transformasi matematis.</li><li><strong>RGB → CMYK</strong> — ada kehilangan. Sebagian warna RGB (biru pekat, neon, hijau terang) tidak dapat direproduksi dalam CMYK. Konversi akan menggesernya ke padanan tercetak terdekat, yang sering terlihat lebih kusam.</li><li><strong>CMYK → RGB</strong> — secara teknis mungkin, tetapi hasilnya bergantung pada profil ICC yang dipakai. Dua pengonversi bisa memberi nilai RGB yang sedikit berbeda untuk masukan CMYK yang sama.</li></ul><p>Untuk konversi cepat saat bepergian, pemilih warna di ponsel yang menampilkan keempat format sekaligus adalah alur kerja tercepat. <strong><a href=\"https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237\">Color Picker Camera: HEX RGB</a></strong> melakukan persis itu — arahkan kamera Anda ke warna apa pun dan lihat HEX, RGB, HSL, dan CMYK berdampingan. Satu ketukan menyalin nilai mana pun. Tersedia di <a href=\"https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237\">iPhone</a> dan <a href=\"https://play.google.com/store/apps/details?id=com.tomas.color_picker\">Android</a>.</p><h2>Kesalahan Umum</h2><h3>1. Mendesain untuk cetak dalam RGB</h3><p>Ini kesalahan klasik pemula. Anda mendesain poster yang cerah di Photoshop dalam mode RGB, mengirimkannya ke percetakan, dan hasilnya tampak pudar — terutama hijau dan biru. Selalu konversikan ke CMYK sebelum mengekspor untuk cetak, dan periksa peringatan gamut.</p><h3>2. Memakai HEX saat Anda butuh transparansi</h3><p>Jika desain Anda menuntut lapisan semi-transparan, bayangan, atau efek glassmorphism, beralihlah ke RGBA atau HSLA. HEX 6 digit standar tidak membawa informasi opasitas, dan HEX 8 digit jarang dipakai karena sulit dibaca.</p><h3>3. Membangun sistem desain dalam HEX</h3><p>\"#3B82F6 tetapi 20% lebih terang\" memerlukan konversi, perhitungan, lalu konversi balik. Dalam HSL: naikkan kecerahannya 20%. Token desain, generator tema, dan properti kustom CSS modern bekerja jauh lebih baik dalam HSL.</p><h3>4. Mengonversi CMYK ke HEX untuk web dan berharap warnanya sama</h3><p>Merek yang didefinisikan dalam CMYK untuk cetak akan tampak berbeda saat dikonversi mentah-mentah ke HEX untuk web. Pendekatan yang benar: cocokkan warna di layar secara visual dengan versi cetaknya, lalu tetapkan nilai HEX terpisah untuk penggunaan digital. Pedoman merek sebaiknya mencantumkan keduanya.</p><h2>Tanya Jawab</h2><h3>Apa beda HEX dan RGB?</h3><p>Tidak ada beda pada warnanya — hanya pada notasinya. HEX menuliskan nilai Merah/Hijau/Biru yang sama dalam basis-16. <code>#FF0000</code> identik dengan <code>rgb(255, 0, 0)</code>. HEX lebih pendek diketik; RGB lebih mudah dimodifikasi secara terprogram dan mendukung kanal alfa (RGBA).</p><h3>Kapan saya harus memakai CMYK alih-alih RGB?</h3><p>Kapan pun hasil akhir Anda dicetak pada bahan fisik — kertas, karton, kain, plastik. Jika tetap di layar, pakai RGB (atau HEX/HSL). Jika dicetak, beralihlah ke CMYK pada tahap ekspor.</p><h3>Apakah HSL lebih baik daripada HEX?</h3><p>Untuk sistem desain, penataan tema, dan manipulasi warna — ya. Untuk komunikasi cepat dan salin-tempel ke berbagai alat — HEX lebih praktis. Keduanya menjelaskan warna yang sama; HSL hanya menata informasinya dengan cara yang sesuai dengan cara manusia memikirkan warna (rona → kepekatan → kecerahan).</p><h3>Bisakah ponsel saya menampilkan keempat format sekaligus?</h3><p>Bisa. <a href=\"https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237\">Color Picker Camera: HEX RGB</a> menangkap warna dari kamera atau foto Anda dan menampilkan HEX, RGB, HSL, dan CMYK secara bersamaan. Ketuk nilai mana pun untuk menyalinnya. Aplikasi ini berfungsi sebagai kalkulator format warna dunia nyata — satu tangkapan, empat format.</p><h2>Intinya</h2><p><strong>HEX</strong> untuk web dan komunikasi cepat. <strong>RGB</strong> untuk pengembangan aplikasi dan transparansi. <strong>HSL</strong> untuk sistem desain dan manipulasi warna. <strong>CMYK</strong> untuk cetak.</p><p>Anda tidak perlu memilih satu — Anda perlu memakai yang tepat untuk setiap konteks. Dan ketika Anda perlu mengonversi antarformat atau menangkap warna dunia nyata dalam keempat format sekaligus, pemilih warna di ponsel adalah alat tercepat yang tersedia.</p><p><a href=\"https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237\">Unduh Color Picker Camera untuk iPhone</a> | <a href=\"https://play.google.com/store/apps/details?id=com.tomas.color_picker\">Unduh untuk Android</a></p>"
}