LDII SAMPIT - KOTAWARINGIN TIMUR

• Kalkulator
• Teori Warna
• Color Wheel
• Palet Warna
• Kode HTML

Mengenal Warna dan Kode dalam HTML

Panduan lengkap teori warna, konversi kode HEX-RGB-HSL, dan color wheel interaktif untuk web design modern

Tools

Kalkulator Konversi Warna

Konversi warna real-time antara HEX, RGB, dan HSL

🎨 HEX to RGB

HEX Code

RGB Result

🌈 RGB to HEX

R

G

B

HEX Result

🎯 RGB to HSL

Hue (0-360)

Saturation (%)

Lightness (%)

HSL Result

Education

Teori Warna Fundamental

Pahami dasar-dasar teori warna untuk desain yang lebih efektif

Color Wheel (Roda Warna)

Roda warna adalah representasi visual dari hubungan antar warna. Warna primer (merah, kuning, biru) menciptakan warna sekunder ketika dicampur, dan warna tersier terbentuk dari campuran primer dan sekunder.

RGB vs CMYK

RGB (Red, Green, Blue) digunakan untuk layar digital dengan additive mixing. CMYK (Cyan, Magenta, Yellow, Black) untuk cetak dengan subtractive mixing. Pahami perbedaan untuk hasil optimal.

Psikologi Warna

Warna mempengaruhi emosi dan perilaku. Merah menciptakan urgensi, biru menunjukkan kepercayaan, hijau merepresentasikan alam, dan kuning menarik perhatian. Pilih warna sesuai pesan brand Anda.

Interactive

Color Wheel Interaktif

Klik pada segmen warna untuk melihat kode HEX-nya

Click Wheel

#------

Resources

Palet Warna Populer

Klik warna untuk menyalin kode HEX

Sunset Vibes

Gradient ungu-pink untuk desain modern

Nature Fresh

Nuansa hijau alami dan segar

Orange Burst

Energi dan kreativitas dalam warna

Corporate Pro

Profesional dengan aksen berani

Dark Mode

Tema gelap dengan aksen merah

Pastel Dream

Lembut dan feminin untuk beauty brand

Code

Cara Menggunakan Warna di HTML/CSS

Inline Style

<p style="color: #6366f1;">
  Teks berwarna ungu
</p>

<div style="background-color: rgb(99, 102, 241);">
  Background ungu
</div>

CSS Stylesheet

.primary-color {
  color: #6366f1;
  background-color: hsl(239, 84%, 67%);
}

.gradient-bg {
  background: linear-gradient(45deg, #667eea, #764ba2);
}

CSS Variables

:root {
  --primary: #6366f1;
  --secondary: #ec4899;
  --accent: #06b6d4;
}

.button {
  background-color: var(--primary);
  color: white;
}

Named Colors

/* 140+ named colors tersedia */

color: tomato;
color: steelblue;
color: mediumseagreen;
color: gold;
color: crimson;
color: rebeccapurple;

Kode warna disalin! ✓