Ton kaydırma, doygunluk ve parlaklığı sabit tutarken HSL alanındaki bir rengin H (ton) değerini döndürmek demektir. Ton 0-360° arasında ölçülür, bu nedenle 180° kaydırmak tamamlayıcı rengi, 120° kaydırmak ise üçlü rengi üretir.

Yaygın ton kaydırma değerleri nelerdir?

±30° analojik renkler oluşturur. ±60° iki adım uzakta renkler oluşturur. ±120° üçlü renkler oluşturur. ±180° tamamlayıcı rengi oluşturur.

CSS'de tonu kaydırabilir miyim?

Evet. CSS'de hue-rotate() fonksiyonu bir ögenin tonunu kaydırır: filtre: hue-rotate(120deg).

Ton kaydırma doygunluğu veya parlaklığı değiştirir mi?

Hayır. Ton kaydırma yalnızca HSL alanındaki ton açısını değiştirir. Doygunluk ve parlaklık değişmeden kalır.

Ton Kaydırıcı

Analojik, üçlü veya tamamlayıcı varyasyonlar oluşturmak için herhangi bir rengin tonunu renk çarkında herhangi bir derece döndür

Orijinal Renk

Ton Kayması: 0°

-180°+180°

Sonuç Rengi

Orijinal

Kaydırılmış Ton

About Hue Shifting

The Hue Shifter rotates a color's hue around the color wheel while keeping its saturation and lightness intact. Use it to discover analogous, triadic, complementary, and split-complementary color combinations.

Processing is entirely client-side — your color data stays in your browser.

How to Use

Enter a HEX color code or choose one from the color picker.
Drag the hue slider or type a degree value (−180° to +180°).
View the shifted color alongside the original for comparison.
Copy the resulting HEX code or note the RGB and HSL values.

Features

Rotate hue by any degree from −180° to +180°
Original vs. shifted side-by-side preview
HEX, RGB, and HSL output for the shifted color
One-click copy to clipboard
Preset colors for quick experimentation
Accurate HSL-based calculation preserving saturation and lightness

Common Hue Relationships

±30° — Analogous colors (neighbors on the wheel)
±60° — Split-analogous colors
±120° — Triadic colors
±180° — Complementary (opposite) color

Related Tools

Color Picker

Pick and convert colors between formats

Color Tool

Comprehensive color manipulation tool

Blend Colors

Blend two colors together

Accessible Color Palette

Create accessible color palettes

Analogous Color Scheme

Generate analogous color schemes

Brand Color Identifier

Identify brand colors from images