Konversi Warna

Konversi HEX, RGB, HSL

HEX

#6366F1

RGB

rgb(99, 102, 241)

HSL

hsl(239, 84%, 67%)

Hasil akan dihitung secara otomatis saat input terisi

Apa itu Kalkulator Konversi Warna?

Kalkulator Konversi Warna Kalkulab adalah alat esensial bagi web designer, UI/UX designer, graphic designer, dan front-end developer di Indonesia yang bekerja dengan berbagai format warna digital. Tool ini mendukung konversi dua arah antar lima format warna utama: HEX (Hexadecimal), RGB (Red, Green, Blue), HSL (Hue, Saturation, Lightness), HSV/HSB (Hue, Saturation, Value/Brightness), dan CMYK (Cyan, Magenta, Yellow, Key/Black). Dalam desain web dan pengembangan aplikasi modern, pemahaman format warna sangat krusial. CSS menggunakan format HEX (#FF5733) dan RGB (rgb(255, 87, 51)) untuk styling web. Untuk desain grafis dan percetakan, format CMYK digunakan karena merupakan model warna subtractive yang sesuai dengan tinta cetak. Sementara itu, HSL sangat populer di kalangan designer karena lebih intuitif: Hue (warna, 0-360°), Saturation (kejenuhan, 0-100%), Lightness (kecerahan, 0-100%). Kalkulator ini juga dilengkapi dengan color picker visual dan preview warna real-time, sehingga Anda bisa melihat langsung hasil konversi tanpa perlu membuka aplikasi desain tambahan. Fitur ini sangat membantu ketika melakukan prototyping desain, debugging CSS, atau memastikan konsistensi warna antar media digital dan cetak. Baik Anda sedang membuat website company profile, aplikasi mobile, atau mendesain brosur perusahaan, kalkulator ini memastikan akurasi warna di berbagai format dengan mudah dan gratis.

Rumus Konversi Format Warna

HEX → RGB: Parse hex digit pairs | RGB → HSL: Complex formulas | RGB → CMYK: Subtractive conversionRumus: HSL: Hue(0°-360°) + Sat(0-100%) + Light(0-100%)

Keterangan:

  • HEX (#RRGGBB)Hexadecimal Color
    6 digit hex: 2 digit merah, 2 hijau, 2 biru. 00-FF setiap komponen.(contoh: #FF5733 = RGB(255,87,51))
    💡 CSS styling, HTML color codes, web design
  • RGB (R,G,B)Red, Green, Blue
    Additive color model. 0-255 setiap channel. Semua max = putih, semua min = hitam.(contoh: rgb(255, 87, 51))
    💡 Web design, screen display, digital art
  • HSL (H,S,L)Hue, Saturation, Lightness
    Lebih intuitif: Hue (0-360°), Sat (0-100%), Light (0-100%)(contoh: hsl(11, 100%, 60%))
    💡 CSS modern, dynamic theming, color manipulation
  • HSV/HSBHue, Saturation, Value/Brightness
    Mirip HSL tapi Value adalah kecerahan dari hitam, bukan lightness.(contoh: hsv(11, 80%, 100%))
    💡 Color picker tools, graphic software
  • CMYK (C,M,Y,K)Cyan, Magenta, Yellow, Key
    Subtractive color untuk cetak. 0-100% setiap komponen.(contoh: cmyk(0%, 66%, 80%, 0%))
    💡 Percetakan, print design, publishing

Kategori:

HEX → RGBWeb Color Conversion
RGB → HSLIntuitive Color Model
RGB → CMYKPrint Color Conversion
All FormatsUniversal Conversion

Cara Menggunakan Kalkulator Konversi Warna Kalkulab

Konversi warna belum pernah semudah ini. Ikuti langkah-langkah berikut:

  1. 1

    Pilih Format Input

    Pilih format warna asal: HEX, RGB, HSL, HSV, atau CMYK. Anda juga bisa menggunakan color picker visual.

  2. 2

    Masukkan Nilai Warna

    Input nilai sesuai format: HEX (#FF5733), RGB (255,87,51), HSL (11,100%,60%), dll.

  3. 3

    Lihat Konversi Otomatis

    Semua format warna lainnya akan ditampilkan secara instan beserta preview warna visual.

  4. 4

    Salin Kode untuk Desain

    Salin kode warna yang dibutuhkan (HEX untuk CSS, CMYK untuk Photoshop, dll) dengan satu klik.

💡 Tips Penggunaan:

  • •HEX adalah format paling umum untuk CSS (HTML color codes)
  • •Gunakan HSL untuk membuat variasi warna (ubah Lightness saja)
  • •CMYK hanya untuk cetak, tidak akurat untuk tampilan layar
  • •Hue 0° = Merah, 120° = Hijau, 240° = Biru (color wheel standar)
  • •Gunakan color picker untuk eksplorasi warna yang lebih mudah

Contoh Perhitungan

Contoh 1: Web Designer Mengkonversi Warna Brand Logo ke CSS

Soal:

Seorang web designer di Jakarta diminta klien untuk mengimplementasikan warna logo brand (#3498DB - biru terang) ke dalam CSS menggunakan format RGB dan HSL.

Penyelesaian:
  1. 1.HEX input: #3498DB
  2. 2.Parse hex: R=34₁₆=52, G=98₁₆=152, B=DB₁₆=219
  3. 3.RGB output: rgb(52, 152, 219)
  4. 4.Konversi ke HSL: Hue ≈ 204°, Sat ≈ 70%, Light ≈ 53%
  5. 5.CSS: background-color: #3498DB; atau hsl(204, 70%, 53%);
Hasil:rgb(52, 152, 219) | hsl(204, 70%, 53%)

Web designer berhasil mengkonversi warna brand ke format CSS yang digunakan dalam stylesheet. HSL sangat berguna untuk membuat variasi warna yang harmonis dengan mengubah nilai Lightness.

Contoh 2: Graphic Designer Mempersiapkan File untuk Percetakan

Soal:

Seorang desainer grafis ingin mencetak brosur dengan warna RGB(255, 200, 50) - kuning emas. Konversi ke CMYK untuk hasil cetak akurat.

Penyelesaian:
  1. 1.RGB input: (255, 200, 50)
  2. 2.K (Key/Black) = 1 - max(R,G,B)/255 = 1 - 255/255 = 0%
  3. 3.C (Cyan) = (1 - R/255 - K)/(1 - K) = (1 - 1 - 0)/1 = 0%
  4. 4.M (Magenta) = (1 - G/255 - K)/(1 - K) = (1 - 0.78 - 0)/1 = 22%
  5. 5.Y (Yellow) = (1 - B/255 - K)/(1 - K) = (1 - 0.20 - 0)/1 = 80%
Hasil:cmyk(0%, 22%, 80%, 0%)

Desainer grafis mendapatkan kode CMYK untuk aplikasi desain (Adobe InDesign, Illustrator) agar hasil cetak brosur sesuai dengan warna di layar (meski ada sedikit perbedaan karena media yang berbeda).

Contoh 3: Front-end Developer Membuat Dark Mode Theme

Soal:

Developer React ingin membuat dark mode dengan warna background HSL(220, 20%, 98%) dan primary button HSL(220, 90%, 50%). Cek hasil konversi ke HEX.

Penyelesaian:
  1. 1.HSL primary: (220, 90%, 50%)
  2. 2.Konversi ke RGB: R ≈ 13, G ≈ 99, B ≈ 242
  3. 3.Konversi ke HEX: #0D63F2
  4. 4.Background: HSL(220, 20%, 98%) → #F2F5FA
  5. 5.CSS Variables: --primary: #0D63F2; --bg: #F2F5FA;
Hasil:Primary: #0D63F2 | Background: #F2F5FA

Developer dapat menggunakan kode HEX di CSS variables untuk implementasi dark mode yang bersih dan modern. HSL sangat membantu untuk membuat shades warna yang konsisten.

Contoh 4: UI/UX Designer Membuat Palet Warna Harmonis

Soal:

Seorang UI designer ingin membuat palet warna complementary (berlawanan) dari warna primary #FF6B6B (merah muda). Gunakan color wheel.

Penyelesaian:
  1. 1.HEX #FF6B6B → HSL ≈ (0, 100%, 71%)
  2. 2.Complementary: Hue + 180° = 180° (HSL 180, 100%, 71% = #6BFFFF)
  3. 3.Analogous: Hue ± 30° = HSL(330,100%,71%) dan HSL(30,100%,71%)
  4. 4.Triadic: Hue + 120° dan + 240° = HSL(120,100%,71%) dan HSL(240,100%,71%)
  5. 5.Palet lengkap: #FF6B6B, #6BFFFF, #6BFF6B, #FF6BFF
Hasil:Palet Complementary: #FF6B6B & #6BFFFF

UI designer berhasil membuat palet warna yang harmonis menggunakan prinsip color wheel. Kalkulator konversi membantu memverifikasi kode HEX dari setiap variasi HSL.

Contoh 5: Social Media Admin Membuat Konten Instagram

Soal:

Admin Instagram @brand_indonesia ingin menggunakan warna brand mereka (#2ECC71 - hijau) di feed dan story. Cek format RGB dan HSV untuk tools editing.

Penyelesaian:
  1. 1.HEX #2ECC71 → RGB: R=46, G=204, B=113
  2. 2.RGB (46, 204, 113) → HSV: Hue ≈ 146°, Sat ≈ 77%, Value ≈ 80%
  3. 3.Untuk gradient: Gunakan HSV, turunkan Value untuk warna lebih gelap
  4. 4.HSV(146, 77%, 60%) → #1A7A43 (darker green)
  5. 5.Gunakan kedua warna: #2ECC71 (main) dan #1A7A43 (accent)
Hasil:RGB: (46,204,113) | HSV: (146°,77%,80%)

Admin social media dapat menggunakan berbagai format warna untuk editing di tools berbeda (Canva, Adobe Express, Figma). HSV sangat berguna untuk membuat variasi shade dengan mengubah Value/Brightness.

Pertanyaan yang Sering Diajukan (FAQ)

Apa perbedaan antara model warna RGB dan CMYK?
RGB (Red, Green, Blue) adalah additive color model untuk layar (monitor, smartphone). Cahaya dari ketiga warna digabung untuk membuat warna: semua max = putih. CMYK (Cyan, Magenta, Yellow, Key/Black) adalah subtractive color model untuk cetak. Tinta menyerap cahaya: semua max = hitam. Warna RGB bisa terlihat berbeda saat dicetak CMYK karena gamut (rentang warna) yang berbeda. Selalu konversi ke CMYK sebelum mencetak.
Mengapa format HSL lebih disukai desainer dibandingkan RGB?
HSL (Hue, Saturation, Lightness) lebih intuitif: (1) Hue (0°-360°) langsung menunjukkan warna (0°=merah, 120°=hijau, 240°=biru), (2) Saturation (0-100%) mengontrol kejenuhan (abu-abu vs warna penuh), (3) Lightness (0-100%) mengontrol kecerahan (hitam vs normal vs putih). Untuk membuat variasi warna (darker, lighter), cukup ubah Lightness. Di RGB, Anda harus menebak angka ketiga komponen.
Apa itu alpha channel dan opacity dalam warna?
Alpha channel mengontrol transparansi (0 = transparan penuh, 1 = solid penuh). Dalam CSS: rgba(255,0,0,0.5) = merah dengan 50% transparansi. HSLA menambahkan alpha: hsla(0,100%,50%,0.5). Transparansi berguna untuk overlay, shadow, dan efek UI modern. Di format HEX, transparansi tidak didukung (selalu solid).
Bagaimana memilih palet warna yang harmonis untuk UI design?
Gunakan teori color wheel: (1) Monochromatic: variasi Lightness dari satu Hue, (2) Analogous: Hue berdekatan (±30°), (3) Complementary: Hue berlawanan (±180°), (4) Triadic: segitiga sama sisi (±120°), (5) Split-Complementary: Hue + dua lawan adjacent. Tools: Adobe Color, Coolors.co, atau gunakan HSL dan ubah nilai Hue sesuai rumus di atas.
Mengapa warna di layar berbeda dengan hasil cetak (printer)?
Layar menggunakan RGB (additive, cahaya), printer menggunakan CMYK (subtractive, tinta). Gamut RGB lebih luas (bisa menampilkan warna lebih cerah) daripada CMYK. Warna neon/bright di layar akan terlihat lebih pudar saat dicetak. Solusi: (1) Preview desain dalam mode CMYK di software desain, (2) Gunakan printer yang kalibrasi warna (ICC profile), (3) Minta proof (tes cetak) sebelum cetak massal.
Apa itu hex code shorthands seperti #FFF dan #000?
HEX shorthand adalah versi pendek 3 digit untuk warna yang pasangan digitnya sama. #FFFFFF (putih) bisa ditulis #FFF, #000000 (hitam) = #000, #FF0000 (merah) = #F00. Browser otomatis mengulang digit: #F00 = #FF0000. Namun, tidak semua warna bisa ditulis shorthand. Contoh: #FF5733 tidak bisa disingkat karena digitnya berbeda.
Bagaimana cara membuat dark mode dengan CSS menggunakan HSL?
Gunakan CSS custom properties dengan HSL. Contoh: --primary-hue: 220; --primary: hsl(var(--primary-hue), 90%, 50%); Untuk dark mode: --primary: hsl(var(--primary-hue), 90%, 70%); (lebih terang). Atau gunakan media query: @media (prefers-color-scheme: dark) { --primary: hsl(220, 90%, 70%); }. HSL memudahkan pembuatan shade tanpa mengubah hue dan saturasi.
Apa itu color contrast ratio dan mengapa penting untuk accessibility (a11y)?
Color contrast ratio mengukur perbedaan luminance antara foreground (teks) dan background. WCAG (Web Content Accessibility Guidelines) mensyaratkan minimal 4.5:1 untuk teks normal, 3:1 untuk teks besar. Jika menggunakan background HSL(0,0%,95%) (hampir putih), pastikan teks memiliki foreground HSL(0,0%,20%) (gelap) agar kontras cukup. Tools: WebAIM Contrast Checker. Kalkulator konversi membantu mendapatkan nilai HSL/RGB yang tepat untuk menghitung kontras.

Kalkulator Terkait

Biner-Desimal

Pemahaman bilangan hex untuk kode warna

Sistem Bilangan

Konversi basis bilangan termasuk hex

Konversi Data

Ukuran file gambar dan aset digital

Kalkulator Dasar

Operasi perhitungan untuk konversi warna

Referensi