Ctrl+K
Popüler aramalar:
Türkçe Dil BetaUtilStation
Mutlu Ramazanlar
TR

CSS Renk Kodları

v1.0.0

CSS Renk Kodları

Web geliştirme ve tasarım için hex, RGB ve HSL değerleri ile görsel önizlemeler içeren kapsamlı CSS renk referansı.

Warning

This tool is not supported on mobile devices, please use a desktop device for better experience.

Toplam Renk
96
Adlandırılmış CSS renkleri
Kategoriler
12
Renk aileleri
Gösterilen
96
Filtrelenmiş sonuçlar
RenkİsimOnaltılıkRGBHSLKategori
Text
aliceblue#F0F8FFrgb(240, 248, 255)hsl(208, 100%, 97%)
Blue
Text
aqua#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50%)
Basic
Text
black#000000rgb(0, 0, 0)hsl(0, 0%, 0%)
Basic
Text
blue#0000FFrgb(0, 0, 255)hsl(240, 100%, 50%)
Basic
Text
blueviolet#8A2BE2rgb(138, 43, 226)hsl(271, 76%, 53%)
Purple
Text
brown#A52A2Argb(165, 42, 42)hsl(0, 59%, 41%)
Brown
Text
chartreuse#7FFF00rgb(127, 255, 0)hsl(90, 100%, 50%)
Green
Text
chocolate#D2691Ergb(210, 105, 30)hsl(25, 75%, 47%)
Brown
Text
cornflowerblue#6495EDrgb(100, 149, 237)hsl(219, 79%, 66%)
Blue
Text
crimson#DC143Crgb(220, 20, 60)hsl(348, 83%, 47%)
Red
Text
cyan#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50%)
Basic
Text
darkblue#00008Brgb(0, 0, 139)hsl(240, 100%, 27%)
Blue
Text
darkgray#A9A9A9rgb(169, 169, 169)hsl(0, 0%, 66%)
Gray
Text
darkgreen#006400rgb(0, 100, 0)hsl(120, 100%, 20%)
Green
Text
darkorange#FF8C00rgb(255, 140, 0)hsl(33, 100%, 50%)
Orange
Text
darkred#8B0000rgb(139, 0, 0)hsl(0, 100%, 27%)
Red
Text
darkviolet#9400D3rgb(148, 0, 211)hsl(282, 100%, 41%)
Purple
Text
deeppink#FF1493rgb(255, 20, 147)hsl(328, 100%, 54%)
Pink
Text
deepskyblue#00BFFFrgb(0, 191, 255)hsl(195, 100%, 50%)
Blue
Text
dimgray#696969rgb(105, 105, 105)hsl(0, 0%, 41%)
Gray
Text
dodgerblue#1E90FFrgb(30, 144, 255)hsl(210, 100%, 56%)
Blue
Text
firebrick#B22222rgb(178, 34, 34)hsl(0, 68%, 42%)
Red
Text
forestgreen#228B22rgb(34, 139, 34)hsl(120, 61%, 34%)
Green
Text
fuchsia#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%)
Basic
Text
gainsboro#DCDCDCrgb(220, 220, 220)hsl(0, 0%, 86%)
Gray
Text
gold#FFD700rgb(255, 215, 0)hsl(51, 100%, 50%)
Yellow
Text
goldenrod#DAA520rgb(218, 165, 32)hsl(43, 74%, 49%)
Yellow
Text
gray#808080rgb(128, 128, 128)hsl(0, 0%, 50%)
Basic
Text
green#008000rgb(0, 128, 0)hsl(120, 100%, 25%)
Basic
Text
hotpink#FF69B4rgb(255, 105, 180)hsl(330, 100%, 71%)
Pink
Text
indianred#CD5C5Crgb(205, 92, 92)hsl(0, 53%, 58%)
Red
Text
indigo#4B0082rgb(75, 0, 130)hsl(275, 100%, 25%)
Purple
Text
khaki#F0E68Crgb(240, 230, 140)hsl(54, 77%, 75%)
Yellow
Text
lavender#E6E6FArgb(230, 230, 250)hsl(240, 67%, 94%)
Purple
Text
lawngreen#7CFC00rgb(124, 252, 0)hsl(90, 100%, 49%)
Green
Text
lightblue#ADD8E6rgb(173, 216, 230)hsl(195, 53%, 79%)
Blue
Text
lightcoral#F08080rgb(240, 128, 128)hsl(0, 79%, 72%)
Red
Text
lightgray#D3D3D3rgb(211, 211, 211)hsl(0, 0%, 83%)
Gray
Text
lightgreen#90EE90rgb(144, 238, 144)hsl(120, 73%, 75%)
Green
Text
lightpink#FFB6C1rgb(255, 182, 193)hsl(351, 100%, 86%)
Pink
Text
lightsalmon#FFA07Argb(255, 160, 122)hsl(17, 100%, 74%)
Red
Text
lightslategray#778899rgb(119, 136, 153)hsl(210, 14%, 53%)
Gray
Text
lightsteelblue#B0C4DErgb(176, 196, 222)hsl(214, 41%, 78%)
Blue
Text
lightyellow#FFFFE0rgb(255, 255, 224)hsl(60, 100%, 94%)
Yellow
Text
lime#00FF00rgb(0, 255, 0)hsl(120, 100%, 50%)
Basic
Text
limegreen#32CD32rgb(50, 205, 50)hsl(120, 61%, 50%)
Green
Text
magenta#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%)
Basic
Text
maroon#800000rgb(128, 0, 0)hsl(0, 100%, 25%)
Basic
Text
material-amber#FFC107rgb(255, 193, 7)hsl(45, 100%, 51%)
Material
Text
material-blue#2196F3rgb(33, 150, 243)hsl(207, 90%, 54%)
Material
Text
material-cyan#00BCD4rgb(0, 188, 212)hsl(187, 100%, 42%)
Material
Text
material-deep-orange#FF5722rgb(255, 87, 34)hsl(14, 100%, 57%)
Material
Text
material-deep-purple#673AB7rgb(103, 58, 183)hsl(262, 52%, 47%)
Material
Text
material-green#4CAF50rgb(76, 175, 80)hsl(122, 39%, 49%)
Material
Text
material-indigo#3F51B5rgb(63, 81, 181)hsl(231, 48%, 48%)
Material
Text
material-light-blue#03A9F4rgb(3, 169, 244)hsl(199, 98%, 48%)
Material
Text
material-light-green#8BC34Argb(139, 195, 74)hsl(88, 50%, 53%)
Material
Text
material-lime#CDDC39rgb(205, 220, 57)hsl(66, 70%, 54%)
Material
Text
material-orange#FF9800rgb(255, 152, 0)hsl(36, 100%, 50%)
Material
Text
material-pink#E91E63rgb(233, 30, 99)hsl(340, 82%, 52%)
Material
Text
material-purple#9C27B0rgb(156, 39, 176)hsl(291, 64%, 42%)
Material
Text
material-red#F44336rgb(244, 67, 54)hsl(4, 90%, 58%)
Material
Text
material-teal#009688rgb(0, 150, 136)hsl(174, 100%, 29%)
Material
Text
material-yellow#FFEB3Brgb(255, 235, 59)hsl(54, 100%, 62%)
Material
Text
mediumorchid#BA55D3rgb(186, 85, 211)hsl(288, 59%, 58%)
Purple
Text
mediumseagreen#3CB371rgb(60, 179, 113)hsl(147, 50%, 47%)
Green
Text
midnightblue#191970rgb(25, 25, 112)hsl(240, 64%, 27%)
Blue
Text
navy#000080rgb(0, 0, 128)hsl(240, 100%, 25%)
Basic
Text
olive#808000rgb(128, 128, 0)hsl(60, 100%, 25%)
Basic
Text
orange#FFA500rgb(255, 165, 0)hsl(39, 100%, 50%)
Orange
Text
orangered#FF4500rgb(255, 69, 0)hsl(16, 100%, 50%)
Orange
Text
peru#CD853Frgb(205, 133, 63)hsl(30, 59%, 53%)
Brown
Text
pink#FFC0CBrgb(255, 192, 203)hsl(350, 100%, 88%)
Pink
Text
plum#DDA0DDrgb(221, 160, 221)hsl(300, 47%, 75%)
Purple
Text
powderblue#B0E0E6rgb(176, 224, 230)hsl(187, 52%, 80%)
Blue
Text
purple#800080rgb(128, 0, 128)hsl(300, 100%, 25%)
Basic
Text
red#FF0000rgb(255, 0, 0)hsl(0, 100%, 50%)
Basic
Text
royalblue#4169E1rgb(65, 105, 225)hsl(225, 73%, 57%)
Blue
Text
salmon#FA8072rgb(250, 128, 114)hsl(6, 93%, 71%)
Red
Text
sandybrown#F4A460rgb(244, 164, 96)hsl(28, 87%, 67%)
Brown
Text
sienna#A0522Drgb(160, 82, 45)hsl(19, 56%, 40%)
Brown
Text
silver#C0C0C0rgb(192, 192, 192)hsl(0, 0%, 75%)
Basic
Text
skyblue#87CEEBrgb(135, 206, 235)hsl(197, 71%, 73%)
Blue
Text
slategray#708090rgb(112, 128, 144)hsl(210, 13%, 50%)
Gray
Text
springgreen#00FF7Frgb(0, 255, 127)hsl(150, 100%, 50%)
Green
Text
steelblue#4682B4rgb(70, 130, 180)hsl(207, 44%, 49%)
Blue
Text
tan#D2B48Crgb(210, 180, 140)hsl(34, 44%, 69%)
Brown
Text
teal#008080rgb(0, 128, 128)hsl(180, 100%, 25%)
Basic
Text
tomato#FF6347rgb(255, 99, 71)hsl(9, 100%, 64%)
Red
Text
violet#EE82EErgb(238, 130, 238)hsl(300, 76%, 72%)
Purple
Text
webgray#666666rgb(102, 102, 102)hsl(0, 0%, 40%)
Web Safe
Text
websafe-blue#0000CCrgb(0, 0, 204)hsl(240, 100%, 40%)
Web Safe
Text
websafe-green#00CC00rgb(0, 204, 0)hsl(120, 100%, 40%)
Web Safe
Text
websafe-red#CC0000rgb(204, 0, 0)hsl(0, 100%, 40%)
Web Safe
Text
white#FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%)
Basic
Text
yellow#FFFF00rgb(255, 255, 0)hsl(60, 100%, 50%)
Basic

Renk Formatı Örnekleri

Onaltılık Format

#FF0000
#ff0000
#F00
Onaltılık gösterim

RGB Formatı

rgb(255, 0, 0)
rgba(255, 0, 0, 0.5)
Kırmızı, Yeşil, Mavi değerleri

HSL Formatı

hsl(0, 100%, 50%)
hsla(0, 100%, 50%, 0.5)
Ton, Doygunluk, Parlaklık

Adlandırılmış Renkler

red
blue
green
CSS renk anahtar kelimeleri

Kategori Dağılımı

Basic
18
renk
Red
8
renk
Blue
12
renk
Green
8
renk
Yellow
4
renk
Orange
3
renk
Purple
7
renk
Pink
4
renk
Brown
6
renk
Gray
6
renk
Web Safe
4
renk
Material
16
renk

  • HTTP yanıt durum kodları için açıklamalar, kullanım senaryoları ve kategoriler içeren kapsamlı referans.

  • Ülke Kodları
    Benzer araç

    Bayraklar, ülke adları ve bölgesel bilgilerle birlikte ISO ülke kodları için kapsamlı referans.

  • Port Numaraları
    Benzer araç

    Ağ iletişimi ve geliştirme süreçlerinde kullanılan port numaraları, protokoller ve servisler için kapsamlı referans.

  • MIME Türleri
    Benzer araç

    Web geliştirme ve dosya işlemlerinde kullanılan MIME türleri ve dosya uzantıları için kapsamlı referans.

  • ASCII Tablosu
    Benzer araç

    Ondalık, onaltılık (hex), ikilik (binary) ve sekizlik (octal) değerleriyle birlikte eksiksiz ASCII karakter referans tablosu.

CSS Color Codes hakkında ne düşünüyorsun?

Görüşlerinize değer veriyoruz ve düşüncelerinizi duymak isteriz.

Select your rating

Mükemmel! ⭐

CSS Renklerini Anlamak

CSS, her birinin kendine özgü avantajları ve kullanım durumları olan renkleri belirtmek için birden fazla yol sağlar. Bu farklı renk formatlarını anlamak, tasarım ihtiyaçlarınız ve geliştirme iş akışınız için doğru yaklaşımı seçmenize yardımcı olur.

Renk Formatı Türleri

Onaltılık (Hex) Renkler

Onaltılık renkler, web geliştirmede en yaygın formattır. 0-9 ve A-F değerleriyle 16 tabanlı gösterim kullanırlar. Format, RR, GG ve BB'nin kırmızı, yeşil ve mavi değerlerini temsil ettiği #RRGGBB'dir.

  • 6 haneli: #FF0000
  • 3 haneli kısaltma: #F00
  • Alfa ile 8 haneli: #FF000080

RGB ve RGBA Renkleri

RGB, kırmızı, yeşil ve mavi kanallar için 0-255 arasında ondalık değerler kullanır. RGBA, şeffaflık için bir alfa kanalı ekler (0-1).

rgb(255, 0, 0) /* Red */
rgb(0, 128, 255) /* Blue */
rgba(255, 0, 0, 0.5) /* 50% transparent red */

HSL ve HSLA Renkleri

HSL, renkleri Ton (0-360°), Doygunluk (0-100%) ve Parlaklık (0-100%) kullanarak temsil eder. Bu format, renk ayarlamaları için sezgiseldir ve uyumlu renk şemaları oluşturur.

hsl(0, 100%, 50%) /* Red */
hsl(240, 100%, 50%) /* Blue */
hsla(0, 100%, 50%, 0.5) /* 50% transparent red */

Adlandırılmış Renkler

CSS, hatırlaması ve kullanması daha kolay 147 adlandırılmış renk sağlar. Bunlar "red" ve "blue" gibi temel renklerden "lightcoral" ve "steelblue" gibi daha spesifik olanlara kadar uzanır.

Renk Kategorileri

Temel Renkler

Tüm tarayıcılar tarafından desteklenen ve orijinal HTML spesifikasyonunun bir parçası olan 16 temel HTML rengi.

Genişletilmiş Renkler

CSS3, renk ailelerine göre düzenlenmiş (kırmızılar, maviler, yeşiller vb.) çok daha fazla adlandırılmış renk ekledi. Bunlar, okunabilirliği korurken daha nüanslı renk seçenekleri sağlar.

Web Güvenli Renkler

Tüm tarayıcılarda ve platformlarda tutarlı görüntülenen 216 renk paleti. Modern ekranlarla daha az kritik olsa da maksimum uyumluluk için hâlâ yararlıdır.

Material Design Renkleri

Google'ın Material Design renk paleti, dijital arayüzler için tasarlanmış modern ve tutarlı bir renk seti sağlar.

Renk Erişilebilirliği

Kontrast Oranları

WCAG yönergeleri, metin erişilebilirliği için minimum kontrast oranları belirtir:

  • AA Standardı: Normal metin için 4,5:1, büyük metin için 3:1
  • AAA Gelişmiş: Normal metin için 7:1, büyük metin için 4,5:1

Renk Körlüğü Değerlendirmeleri

Yaklaşık erkeklerin %8'i ve kadınların %0,5'i renk görme bozukluklarına sahiptir. Tasarım değerlendirmeleri şunları içerir:

  • Bilgi iletmek için yalnızca renge güvenmeyin
  • Renkler arasında yeterli kontrast kullanın
  • Tasarımları renk körlüğü simülatörleriyle test edin
  • Sorunlu renk kombinasyonlarından kaçının (kırmızı/yeşil, mavi/mor)

En İyi Uygulamalar

Renk Formatlarını Seçme

  • Hex: Statik renkler için en iyisi, kopyalamak/paylaşmak kolay
  • RGB: Programatik renk manipülasyonu için iyi
  • HSL: Renk varyasyonları ve temalar oluşturmak için ideal
  • Adlandırılmış renkler: Hızlı prototipleme ve temel renkler için mükemmel

Renk Paleti Geliştirme

  • Birincil bir renkle başlayın ve varyasyonlar oluşturun
  • Sistematik renk oluşturma için HSL kullanın
  • Tutarlı doygunluk ve parlaklık düzeylerini koruyun
  • Renkleri farklı cihazlarda ve aydınlatma koşullarında test edin

Performans Değerlendirmeleri

  • Adlandırılmış renkler, hex/rgb'den biraz daha performanslıdır
  • Bakımı kolay renk sistemleri için CSS özel özelliklerini kullanın
  • Projeniz genelinde renk formatı tutarlılığını göz önünde bulundurun

Modern CSS Renk Özellikleri

CSS Özel Özellikleri (Değişkenler)

Bakımı kolay renk sistemleri için CSS değişkenlerini kullanın:

:root {
  --primary-color: #3B82F6;
  --primary-light: #60A5FA;
  --primary-dark: #1E40AF;
}
.button {
  background-color: var(--primary-color);
}

Yeni Renk Uzayları

Modern tarayıcılar daha geniş renk gamutları için destek ekliyor:

  • P3: color(display-p3 1 0 0)
  • Lab: lab(50% 20 -30)
  • LCH: lch(50% 40 180)

Araçlar ve İş Akışı

Renk Seçici Araçlar

  • Tarayıcı DevTools renk seçici
  • Adobe Color (çevrimiçi renk çarkı)
  • Coolors.co (palet oluşturucu)
  • Material Design Renk Aracı

Test ve Doğrulama

  • WebAIM Kontrast Denetleyici
  • Renk Kontrast Analizörü
  • Stark (Figma/Sketch eklentisi)
  • Tarayıcı erişilebilirlik denetimleri

Profesyonel İpucu

Bir tasarım sistemi oluştururken, birincil palet için HSL renklerini kullanın. Bu, ton ve doygunluğu tutarlı tutarken parlaklık değerini ayarlayarak açık/koyu varyasyonlar oluşturmayı kolaylaştırır.

Erişilebilirlik Hatırlatması

Renk seçimlerinizi renk görme bozuklukları olanlar da dahil olmak üzere gerçek kullanıcılarla her zaman test edin. Otomatik araçlar yardımcıdır ancak gerçek kullanıcı testinin yerini tutmaz.