Cara Convert Warna HEX ke RGB ke HSL - Color Converter

Format Warna Digital

Dalam desain digital, ada 3 format warna utama:

1. HEX (Hexadecimal)

Format 6 digit hexadecimal. Contoh: #2563EB

2. RGB (Red Green Blue)

Kombinasi 3 warna cahaya (0-255). Contoh: rgb(37, 99, 235)

3. HSL (Hue Saturation Lightness)

Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Contoh: hsl(221, 83%, 53%)

Apa Itu Color Converter?

Color Converter adalah tools untuk convert warna antara format HEX, RGB, dan HSL secara instant. Sangat berguna untuk designer dan developer yang bekerja dengan warna di berbagai tools.

Perbedaan HEX, RGB, dan HSL

🔷 HEX (Hexadecimal)

Format: #RRGGBB

• RR = Red (00-FF)
• GG = Green (00-FF)
• BB = Blue (00-FF)

Contoh:

#2563EB  → Biru
#FF0000  → Merah
#00FF00  → Hijau
#0000FF  → Biru Murni
#FFFFFF  → Putih
#000000  → Hitam

Digunakan di: CSS, HTML, design tools (Figma, Sketch)

🔴 RGB (Red Green Blue)

Format: rgb(R, G, B)

• R = Red (0-255)
• G = Green (0-255)
• B = Blue (0-255)

Contoh:

rgb(255, 0, 0)    → Merah
rgb(0, 255, 0)    → Hijau
rgb(0, 0, 255)    → Biru
rgb(255, 255, 255) → Putih
rgb(0, 0, 0)      → Hitam

Digunakan di: Screens, digital displays, photography

🎨 HSL (Hue Saturation Lightness)

Format: hsl(H, S%, L%)

• H = Hue (0-360°) — warna dasar di color wheel
• S = Saturation (0-100%) — intensitas warna
• L = Lightness (0-100%) — terang/gelap

Contoh:

hsl(0, 100%, 50%)    → Merah
hsl(120, 100%, 50%)  → Hijau
hsl(240, 100%, 50%)  → Biru
hsl(0, 0%, 100%)     → Putih
hsl(0, 0%, 0%)       → Hitam

Digunakan di: Color pickers, intuitive color adjustment

Color Wheel (Hue)

        0° - Merah
          / \
         /   \
  300°  /     \  60° - Kuning
 Ungu  |       |
       |       |
  240° |       |  120° - Hijau
 Biru   \     /
         \   /
          \ /
       180° - Cyan

Fitur Color Converter TulisSurat

✅ Real-time Conversion

Convert otomatis saat input berubah.

✅ Color Picker Interaktif

Pilih warna visual dengan mudah.

✅ Color Variations

Generate lighter/darker shades otomatis.

✅ Color Harmony

Complementary, analogous, triadic colors.

✅ Copy Formats

Copy HEX, RGB, HSL, atau CSS code.

✅ Download Palette

Export color palette ke file.

Cara Menggunakan Color Converter

Langkah 1: Buka Tools

Kunjungi halaman Color Converter di TulisSurat.

Langkah 2: Input Warna

Masukkan warna di salah satu format:

• HEX: #2563EB
• RGB: 37, 99, 235
• HSL: 221, 83, 53
• Color Picker: Klik dan pilih warna

Langkah 3: Auto Convert

Format lain akan otomatis ter-convert.

Langkah 4: Lihat Variations

Scroll ke bawah untuk lihat:

• Color Variations (lighter/darker)
• Color Harmony (complementary, analogous, triadic)

Langkah 5: Copy atau Download

Salin format yang diinginkan atau download palette.

Contoh Conversion

Dari HEX ke RGB dan HSL

Input:  #2563EB

Output:
RGB:  rgb(37, 99, 235)
HSL:  hsl(221, 83%, 53%)

Dari RGB ke HEX dan HSL

Input:  rgb(255, 99, 71)

Output:
HEX:  #FF6347
HSL:  hsl(9, 100%, 64%)

Dari HSL ke HEX dan RGB

Input:  hsl(120, 100%, 50%)

Output:
HEX:  #00FF00
RGB:  rgb(0, 255, 0)

Color Harmony Types

🔵 Complementary

Warna berseberangan di color wheel (180° apart).

Base:        hsl(221, 83%, 53%)  → Biru
Complement:  hsl(41, 83%, 53%)   → Orange

🟢 Analogous

Warna berdampingan di color wheel (±30°).

Base:         hsl(221, 83%, 53%)  → Biru
Analogous 1:  hsl(191, 83%, 53%)  → Cyan
Analogous 2:  hsl(251, 83%, 53%)  → Purple

🔺 Triadic

3 warna berjarak sama (120° apart).

Base:      hsl(221, 83%, 53%)  → Biru
Triadic 1: hsl(341, 83%, 53%)  → Red-Pink
Triadic 2: hsl(101, 83%, 53%)  → Green

Color Variations

Lighter Shades (Increase Lightness)

Base:     hsl(221, 83%, 53%)  → #2563EB
Light 1:  hsl(221, 83%, 63%)  → #4A80F0
Light 2:  hsl(221, 83%, 73%)  → #789EF5
Light 3:  hsl(221, 83%, 83%)  → #A9BFF9

Darker Shades (Decrease Lightness)

Base:     hsl(221, 83%, 53%)  → #2563EB
Dark 1:   hsl(221, 83%, 43%)  → #1E50C7
Dark 2:   hsl(221, 83%, 33%)  → #173D99
Dark 3:   hsl(221, 83%, 23%)  → #102A6B

CSS Usage Examples

HEX in CSS

.button {
  background-color: #2563EB;
  color: #FFFFFF;
}

RGB in CSS

.button {
  background-color: rgb(37, 99, 235);
  color: rgb(255, 255, 255);
}

HSL in CSS

.button {
  background-color: hsl(221, 83%, 53%);
  color: hsl(0, 0%, 100%);
}

RGBA (with Transparency)

.overlay {
  background-color: rgba(37, 99, 235, 0.5);  /* 50% transparent */
}

HSLA (with Transparency)

.overlay {
  background-color: hsla(221, 83%, 53%, 0.5);  /* 50% transparent */
}

Tips Memilih Warna

1. Gunakan HSL untuk Adjustments

Original:  hsl(221, 83%, 53%)
Lighter:   hsl(221, 83%, 73%)  // Increase L
Darker:    hsl(221, 83%, 33%)  // Decrease L
Muted:     hsl(221, 50%, 53%)  // Decrease S

2. 60-30-10 Rule

60% - Dominant color (background)
30% - Secondary color (elements)
10% - Accent color (CTA, highlights)

3. Check Contrast

Pastikan text readable:

• WCAG AA: Minimum 4.5:1 untuk normal text
• WCAG AAA: Minimum 7:1 untuk normal text

4. Test di Grayscale

Convert ke grayscale untuk check contrast tanpa distraction dari warna.

Accessibility Considerations

Color Blindness

8% pria mengalami color blindness (merah-hijau). Jangan rely hanya pada warna!

Good:

✅ Success (green) + ✓ icon
❌ Error (red) + ✗ icon

Bad:

❌ Hanya warna hijau/merah tanpa icon

Contrast Ratio

✅ Good:  #000000 on #FFFFFF (21:1)
❌ Bad:   #999999 on #FFFFFF (2.5:1)

Tools Integration

Figma/Sketch

• Paste HEX code langsung
• Color picker auto-fill

VS Code

• CSS Intellisense show color preview
• Extensions: Color Highlight

Chrome DevTools

• Click color swatch di Styles panel
• Convert antara format

Kesimpulan

Color Converter adalah tools essential untuk designer dan developer yang bekerja dengan warna. Dengan real-time conversion, color picker, variations, dan harmony features, tools ini memudahkan memilih dan convert warna.

Mulai convert warna sekarang di Color Converter!

Baca juga:

• Cara Format Validate JSON
• Cara Encode Decode Base64
• Cara Hitung Diskon

💡 Tip: Gunakan HSL untuk adjust colors secara intuitif. Ubah Lightness untuk membuat warna lebih terang/gelap tanpa mengubah hue!