HEX vs RGB vs HSL vs CMYK: Format Warna Mana yang Harus Digunakan dan Kapan

{intro_heading}

{intro_p1}

{intro_p2}

{intro_p3}

{hex_heading}

{hex_what}

{hex_when_heading}

• {hex_when_1}
• {hex_when_2}
• {hex_when_3}
• {hex_when_4}

{hex_not_heading}

• {hex_not_1}
• {hex_not_2}
• {hex_not_3}

{hex_example_heading}

:root {
  --brand-primary: #FF6F61;
  --brand-dark: #CC5850;
  --brand-light: #FF9A91;
  --text-on-primary: #FFFFFF;
}

.button-primary {
  background-color: var(--brand-primary);
  color: var(--text-on-primary);
}

{rgb_heading}

{rgb_what}

{rgb_when_heading}

• {rgb_when_1}
• {rgb_when_2}
• {rgb_when_3}
• {rgb_when_4}

{rgb_not_heading}

• {rgb_not_1}
• {rgb_not_2}

{rgb_example_heading}

const Colors = {
  coral: 'rgba(255, 111, 97, 1.0)',
  coralFaded: 'rgba(255, 111, 97, 0.5)',
  coralOverlay: 'rgba(255, 111, 97, 0.15)',
};

<View style={{ backgroundColor: Colors.coralOverlay }}>
  <Text style={{ color: Colors.coral }}>Hello</Text>
</View>

{hsl_heading}

{hsl_what}

{hsl_when_heading}

• {hsl_when_1}
• {hsl_when_2}
• {hsl_when_3}
• {hsl_when_4}

{hsl_not_heading}

• {hsl_not_1}
• {hsl_not_2}

{hsl_example_heading}

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        coral: {
          50:  'hsl(5, 100%, 95%)',
          100: 'hsl(5, 100%, 90%)',
          200: 'hsl(5, 100%, 82%)',
          300: 'hsl(5, 100%, 75%)',
          400: 'hsl(5, 100%, 69%)', /* base */
          500: 'hsl(5, 85%, 58%)',
          600: 'hsl(5, 70%, 48%)',
          700: 'hsl(5, 65%, 38%)',
          800: 'hsl(5, 60%, 28%)',
          900: 'hsl(5, 55%, 18%)',
        }
      }
    }
  }
}

{cmyk_heading}

{cmyk_what}

{cmyk_when_heading}

• {cmyk_when_1}
• {cmyk_when_2}
• {cmyk_when_3}

{cmyk_not_heading}

• {cmyk_not_1}
• {cmyk_not_2}

{cmyk_example_heading}

/* Illustrator: File > Document Color Mode > CMYK */
/* Export settings for print-ready PDF: */

Color mode:      CMYK
Profile:         U.S. Web Coated (SWOP) v2  /* or your printer's ICC */
Bleed:           3 mm (all sides)
Marks:           Trim marks ON
Flatten:         Transparent objects

{table_heading}

{cheat_heading}

Konversi: Yang Perlu Diketahui

• HEX ↔ RGB — Tanpa kehilangan. #FF6F61 = rgb(255, 111, 97).
• RGB ↔ HSL — Tanpa kehilangan.
• RGB → CMYK — Dengan kehilangan. Gamut CMYK lebih kecil.
• CMYK → RGB — Tergantung profil ICC.

Color Picker Camera menampilkan keempat format sekaligus. Arahkan ke warna apapun, dapatkan HEX, RGB, HSL, CMYK instan.

Kesalahan Umum

1. Kirim RGB ke percetakan

Printer campur tinta, bukan cahaya. Selalu desain cetak dalam CMYK.

2. HEX untuk transparansi

Gunakan rgba() atau hsla() untuk transparansi andal.

3. Desain sistem hanya HEX

HSL memungkinkan ubah lightness langsung untuk skala warna konsisten.

4. CMYK → HEX mengharapkan warna sama

Gamut CMYK lebih kecil. Selalu verifikasi visual.

FAQ

Apa beda HEX dan RGB?

Tidak ada perbedaan warna. HEX adalah cara singkat menulis RGB hex. #FF6F61 = rgb(255, 111, 97). Perbedaan: RGB punya RGBA bawaan.

Kapan pakai CMYK?

Saat desain dicetak fisik. Untuk layar saja, pakai HEX/RGB/HSL.

HSL lebih baik dari RGB?

Lebih mudah dipahami desainer. Untuk app development, pakai RGB.

Ada app yang tampilkan 4 format sekaligus?

Ya. Color Picker Camera — arahkan ke warna apapun, lihat HEX, RGB, HSL, CMYK. iOS dan Android.

Kesimpulan

HEX untuk web. RGB untuk app. HSL untuk desain sistem. CMYK untuk cetak.

Color Picker Camera adalah kalkulator warna dunia nyata Anda.

Unduh untuk iOS Unduh untuk Android