{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} |
|---|---|---|
| Strona CSS | HEX | Standard branżowy |
| App mobilna | RGB / RGBA | Frameworki używają RGB |
| System projektowy | HSL | Łatwe skale |
| Tryb ciemny | HSL | Zmniejsz jasność |
| Email HTML | HEX | Kompatybilność email |
| Wizytówka | CMYK | Dokładny tusz |
| Grafika SM | HEX / RGB | Ekran, oba OK |
| LED/IoT | RGB | 3x8-bit |
| Dostępność | HSL | Jasność=kontrast |
| Opakowanie | CMYK + Pantone | Dokładny kolor |
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.