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}
Website CSS	HEX	Chuẩn ngành
App mobile	RGB / RGBA	Framework gốc dùng RGB
Hệ thống TK/token	HSL	Đổi lightness
Chế độ tối	HSL	Giảm lightness
Email HTML	HEX	Tương thích email
Danh thiếp	CMYK	Mực chính xác
Đồ họa MXH	HEX / RGB	Hiển thị màn hình
LED/IoT	RGB	Hardware 3x8bit
Tiếp cận	HSL	Lightness=tương phản
Bao bì	CMYK + Pantone	Màu mực chính xác

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.

Tải cho iOS Tải cho Android