Renk Dönüştürücü
Renkleri HEX, RGB, HSL ve HSV formatları arasında görsel renk seçiciyle dönüştürün
Renk seçiciyi açmak için örneğe tıklayın
Veya aşağıdaki herhangi bir değeri düzenleyin
Renk Dönüşümü Nedir?
Bir renk dönüştürücü, bir renk değerini bir gösterimden diğerine çevirir — örneğin bir HEX üçlüsünden (#6366F1) RGB demetine (99, 102, 241) veya HSL üçlüsüne (239, 84%, 67%). Aynı renk HSV üçlüsü olarak da ifade edilebilir (239, 59%, 95%). Her format, aynı görsel rengi farklı bir matematiksel modelle kodlar; farklı araçlar, diller ve API'ler bağlama göre farklı formatlar bekler.
HEX ve RGB rengi kırmızı, yeşil ve mavi ışığın karışımı olarak tanımlar. HEX, RGB'nin ondalık olarak ifade ettiği aynı üç 0-255 kanal değerinin kompakt bir onaltılık gösterimidir. HSL (Ton, Doygunluk, Açıklık) ve HSV (Ton, Doygunluk, Değer) ise aynı bilgiyi silindirik bir koordinat sistemine dönüştürür; burada ton bir renk çarkında açı (0-360 derece), doygunluk ve açıklık ya da parlaklık ise yüzdedir. Bu, HSL ve HSV'yi aynı tonun daha açık veya daha koyu tonlarını oluşturmak gibi işlemler için daha sezgisel kılar.
Bu formatlar arasında dönüşüm yapmak için iyi tanımlanmış matematik gerekir. W3C CSS Color Module Level 4 spesifikasyonu, tarayıcıların herhangi bir CSS rengini sRGB üçlüsüne çözmek için kullandığı algoritmaları belgeler. Formüller deterministiktir: belirli bir girdi her zaman aynı çıktıyı üretir; dolayısıyla değerler yuvarlanmadığı veya sınırlandırılmadığı sürece dönüşümler kayıpsızdır. Çoğu renk seçici ve tasarım aracı aynı formülleri arka planda kullanır.
Bu Renk Dönüştürücüyü Neden Kullanmalısınız?
Tasarım araçları renkleri bir formatta dışa aktarır, CSS'iniz başka bir format bekler, çağırdığınız API ise üçüncü bir format ister. Dönüşüm kodu yazmak ya da doğru formülü aramak yerine bir değer yapıştırın ve tüm formatları aynı anda alın.
Renk Dönüştürücü Kullanım Senaryoları
Renk Formatı Referansı
Aşağıdaki tablo, beş yaygın renk formatını listeler; her gösterimde aynı indigo rengi (#6366F1) gösterilmektedir. HEX ve RGB, CSS ve JavaScript'te en geniş destek gören formatlardır. HSL, açıklık ve doygunluğun ayarlanması kolay olduğu için tema oluşturmada tercih edilir. HSV ise çoğu grafik tasarım yazılımı renk seçicisinde kullanılan modeldir.
| Format | Örnek (indigo) | Kanallar | Yaygın kullanım |
|---|---|---|---|
| HEX | #6366F1 | 6 (or 3/8) | CSS, design tools, brand guides |
| RGB | rgb(99, 102, 241) | 3 (0–255 each) | CSS, Canvas API, image processing |
| HSL | hsl(239, 84%, 67%) | 3 (deg, %, %) | CSS, color theming, accessibility tuning |
| HSV | hsv(239, 59%, 95%) | 3 (deg, %, %) | Color pickers, Photoshop, Figma |
| CMYK | cmyk(59%, 58%, 0%, 5%) | 4 (0–100% each) | Print design, prepress workflows |
HEX - RGB - HSL Karşılaştırması
Üç format da aynı sRGB renk uzayını tanımlar. Fark, veriyi nasıl sunduklarındadır; bu da farklı bağlamlarda okunabilirlik ve değiştirme kolaylığını etkiler.
Kod Örnekleri
Yaygın diller ve ortamlarda HEX, RGB ve HSL arasında renk dönüşümü. Her örnek kolay karşılaştırma için aynı indigo rengini (#6366F1) kullanır.
// 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); }