Color Converter

Apa Itu Konversi Warna?

Color converter menerjemahkan nilai warna dari satu notasi ke notasi lain — misalnya, dari triplet HEX (#6366F1) ke tuple RGB (99, 102, 241) atau triple HSL (239, 84%, 67%). Warna yang sama juga dapat dinyatakan sebagai triple HSV (239, 59%, 95%). Setiap format mengkodekan warna visual yang sama menggunakan model matematika yang berbeda; berbagai alat, bahasa pemrograman, dan API mengharapkan format yang berbeda tergantung pada konteksnya.

HEX dan RGB keduanya mendeskripsikan warna sebagai campuran cahaya merah, hijau, dan biru. HEX adalah representasi heksadesimal yang ringkas dari tiga nilai kanal 0-255 yang sama yang ditulis RGB dalam desimal. HSL (Hue, Saturation, Lightness) dan HSV (Hue, Saturation, Value) mengatur ulang informasi yang sama ke dalam sistem koordinat silindris di mana hue adalah sudut pada roda warna (0-360 derajat), dan saturation serta lightness atau brightness dinyatakan dalam persentase. Hal ini membuat HSL dan HSV lebih intuitif untuk tugas seperti membuat warna yang lebih terang atau lebih gelap dari hue yang sama.

Konversi antara format-format ini memerlukan matematika yang terdefinisi dengan baik. Spesifikasi W3C CSS Color Module Level 4 mendokumentasikan algoritma yang digunakan browser untuk mengurai warna CSS apa pun menjadi triplet sRGB. Rumusnya bersifat deterministik: input yang sama selalu menghasilkan output yang sama, sehingga konversi tidak merusak data selama nilai tidak dibulatkan atau dipotong. Sebagian besar pemilih warna dan alat desain mengandalkan rumus yang sama di baliknya.

Mengapa Menggunakan Color Converter Ini?

Alat desain mengekspor warna dalam satu format, CSS Anda membutuhkan format lain, dan API yang Anda panggil mengharapkan format ketiga. Alih-alih menulis kode konversi atau mencari rumus yang tepat, tempel nilai dan dapatkan semua format sekaligus.

Kasus Penggunaan Color Converter

Referensi Format Warna

Tabel di bawah ini mencantumkan lima format warna yang paling umum, dengan warna indigo yang sama (#6366F1) ditampilkan dalam setiap notasi. HEX dan RGB paling banyak didukung dalam CSS dan JavaScript. HSL lebih disukai untuk tema karena penyesuaian lightness dan saturation sangat mudah. HSV adalah model yang digunakan oleh sebagian besar pemilih warna di perangkat lunak desain grafis.

HEX vs RGB vs HSL

Ketiga format mendeskripsikan ruang warna sRGB yang sama. Perbedaannya terletak pada cara mereka mengekspos data, yang memengaruhi keterbacaan dan kemudahan manipulasi dalam konteks yang berbeda.

Contoh Kode

Konversi warna antara HEX, RGB, dan HSL dalam bahasa dan lingkungan yang umum digunakan. Setiap contoh menggunakan warna indigo yang sama (#6366F1) untuk memudahkan perbandingan.

// HEX → RGB
function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16)
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}
hexToRgb('#6366f1') // → [99, 102, 241]

// RGB → HSL
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255
  const max = Math.max(r, g, b), min = Math.min(r, g, b)
  const l = (max + min) / 2
  if (max === min) return [0, 0, Math.round(l * 100)]
  const d = max - min
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
  let h = 0
  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
  else if (max === g) h = ((b - r) / d + 2) / 6
  else h = ((r - g) / d + 4) / 6
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]
}
rgbToHsl(99, 102, 241) // → [239, 84, 67]

import colorsys

# HEX → RGB
def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
    h = hex_str.lstrip('#')
    return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))

hex_to_rgb('#6366f1')  # → (99, 102, 241)

# RGB → HSL (colorsys uses HLS order)
r, g, b = 99 / 255, 102 / 255, 241 / 255
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f"hsl({h * 360:.0f}, {s * 100:.0f}%, {l * 100:.0f}%)")
# → hsl(239, 84%, 67%)

# RGB → HSV
h, s, v = colorsys.rgb_to_hsv(r, g, b)
print(f"hsv({h * 360:.0f}, {s * 100:.0f}%, {v * 100:.0f}%)")
# → hsv(239, 59%, 95%)

package main

import (
	"fmt"
	"math"
)

func hexToRGB(hex string) (int, int, int) {
	var r, g, b int
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	return r, g, b
}

func rgbToHSL(r, g, b int) (int, int, int) {
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, int(math.Round(l * 100))
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf: h = (gf - bf) / d; if gf < bf { h += 6 }
	case gf: h = (bf - rf) / d + 2
	case bf: h = (rf - gf) / d + 4
	}
	return int(math.Round(h / 6 * 360)), int(math.Round(s * 100)), int(math.Round(l * 100))
}

func main() {
	r, g, b := hexToRGB("#6366f1")
	fmt.Println(r, g, b)         // → 99 102 241
	fmt.Println(rgbToHSL(r, g, b)) // → 239 84 67
}

/* Modern CSS supports multiple color formats natively */

/* HEX notation */
.button { color: #6366f1; }

/* RGB functional notation */
.button { color: rgb(99 102 241); }

/* HSL — easier to adjust lightness and saturation */
.button { color: hsl(239 84% 67%); }

/* CSS Color Level 4: relative color syntax (Chrome 119+) */
.button-light { color: hsl(from #6366f1 h s calc(l + 20%)); }

/* color-mix() for tinting without manual conversion */
.button-muted { color: color-mix(in srgb, #6366f1 70%, white); }

Pertanyaan yang Sering Diajukan