HEX vs RGB vs HSL vs CMYK

{intro_heading}

{intro_p1}

HEX: #FF6F61
RGB: rgb(255, 111, 97)
HSL: hsl(5, 100%, 69%)
CMYK: 0, 56, 62, 0

{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}

{table_format}	{table_example}	{table_best_for}	{table_range}	{table_transparency}	{table_readability}	{table_print_safe}
HEX	`#FF6F61`	{table_hex_best}	{table_hex_range}	{table_hex_transparency}	{table_hex_readability}	{table_hex_print}
RGB	`rgb(255,111,97)`	{table_rgb_best}	{table_rgb_range}	{table_rgb_transparency}	{table_rgb_readability}	{table_rgb_print}
HSL	`hsl(5,100%,69%)`	{table_hsl_best}	{table_hsl_range}	{table_hsl_transparency}	{table_hsl_readability}	{table_hsl_print}
CMYK	`0,56,62,0`	{table_cmyk_best}	{table_cmyk_range}	{table_cmyk_transparency}	{table_cmyk_readability}	{table_cmyk_print}

{cheat_heading}

{cheat_project}	{cheat_format}	{cheat_why}
CSS sitesi	HEX	Endüstri standardı
Mobil app	RGB / RGBA	Native RGB
Tasarım sistemi	HSL	Açıklık değiştir
Karanlık mod	HSL	Açıklık azalt
HTML email	HEX	Email uyumlu
Kartvizit	CMYK	Mürekkep eşleşmesi
Sosyal medya	HEX / RGB	Ekranda görünür
LED/IoT	RGB	3x8-bit kanal
Erişilebilirlik	HSL	Kontrast gösterir
Ambalaj	CMYK + Pantone	Marka mürrekkebi

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.

İndir: iOS İndir: Android