Web Tasarımlarınızda Kullanabileceğiniz Tam 150 Farklı Renk Paleti

Eğer tasarım işleriyle uğraşıyor ve renk seçimi, renk tonlarırenk uyumu gibi konularda sıkıntı yaşıyorsanız merak etmeyin. Bu yazımızda bu problemlerin ortadan kalkması adına tam 150 farklı renk paleti paylaşacağım.

Genelde bir tasarıma başladığımız zaman, kod yazma kısmını bir şekilde bitiriyoruz. Sıra tasarımımızda uyumlu renkler kullanmaya gelince kararsız kalabiliyoruz. Örneğin kendi adıma konuşacak olursam, bir renk seçiyorum. Sonra yok ya bu renk tam olmadı galiba, acaba şu rengi mi kullansam, acaba bu rengin hover olayına daha açık bir ton mu yoksa koyu bir ton mu kullansam gibi konularda kararsız kalabiliyorum.

Uyumlu renkler seçmek zaten başlı başına ayrı bir yetenek diye düşünüyorum. Özellikle front-end alanında çalışan arkadaşların, renk uyumu ile uğraşmadan tamamen kod yazmaya motive olmalarını sağlamak için aşağıda bulunan renk paletlerini paylaşıyorum.

Tasarımlarınızda kullanacağınız renk uyumu gerçekten en az kodlamanız kadar önemli diyebilirim. Siz bir yazılımcı olarak şöyle kod yazdım böyle kod yazdım diye sevinebilirsiniz. Ama unutmayın ki yazdığınız siteleri veya tasarımlarınızı bir yazılımcıya değil de bir müşteriye yapıyorsunuz. Doğal olarak müşterinin ilk bakacağı konu sitenin veya tasarımınızın görünümü olacaktır. Görünümün tatmin edici ve şık olması için de mutlaka uyumlu renkler kullanmanız gerekecektir.

Html ve Css kodları yazarken renkleri isimleri ile kullanabiliyoruz. Ama isimleri ile kullanabildiğimiz renk sayısı şuan da 140 adet. Bu 140 rengin isimlerini ve hex, rgb renk kodlarını öğrenmek isterseniz Tüm Renk İsimleri ve Renk Kodları (Html, Css, Hex, Rgb) yazımı inceleyebilirsiniz. Tabiki bu renkler bazen bize yeterli gelmeyebiliyor. Bu yüzden bunların dışında renk arayışına giriyoruz. Zannediyorum aşağıdaki renk paletlerinden birisi hoşunuza gidecek ve tasarımlarınızda kullanacaksınızdır.

Hepsini inceleyip beğendiğiniz ve kullanmaya karar verdiğiniz paletin üzerine mouse ile gelin. Her rengin üzerine gelindiğinde o rengin hex renk kodunu göreceksiniz. Bu hex renk kodlarını kullanarak eminim ki çok şık tasarımlar yapacaksınızdır. Şimdiden iyi kodlamalar 🙂

#F8B195
#F67280
#C06C84
#6C5B7B
#355C7D

#204E5F
#79A7A8
#FF8984
#B7D7D8
#EDF7F5

#330136
#5E1742
#962E40
#C9463D
#FF5E35

#C9DFF1
#F0F4F3
#C1BBA8
#EFE7CC
#EFBFA8

#005D8E
#00A7FF
#1CE882
#F5D41E
#F59914

#FFAFC5
#FFD9D9
#E0ACF6
#BAD6FD
#8D9CF4

#393E46
#00ADB5
#FFF4E0
#F8B500
#FC3C3C

#FCDCA3
#FBC57B
#F5A64A
#EA640D
#BF381A

#BF4565
#93BFA3
#F2EFC4
#F2B680
#F29999

#FCFFF5
#D1DBBD
#91AA9D
#3E606F
#193441

#CCB2B3
#445046
#DCA153
#6C8190
#EB8D69

#F2F2F2
#4BA47E
#E9B757
#E5963C
#E27639

#EAF1F7
#C5D7ED
#A6C4E0
#6E98BA
#334F70

#355B8C
#35648C
#9B7379
#D98D62
#D97B66

#112F41
#068587
#4FB99F
#F2B134
#ED553B

#393E46
#00ADB5
#FFF4E0
#F8B500
#FC3C3C

#FFBC67
#DA727E
#AC6C82
#685C79
#455C7B

#FF6138
#FFFF9D
#BEEB9F
#79BD8F
#00A388

#3F9AA5
#03585D
#FA7268
#D93E3A
#8D211F

#82929A
#004365
#82CABB
#D3BFBC
#FD8A95

#725368
#8D7688
#F1EEDB
#D9B4A3
#C19185

#E2BBFF
#BCAAE8
#C8C7FF
#AAB9E8
#BBDEFF

#728979
#D1D9D7
#C19A92
#8D6D67
#5B4342

#FFBC67
#DA727E
#AC6C82
#685C79
#455C7B

#1C3341
#008773
#6BB983
#F2C975
#ED6353

#63662D
#DD825D
#FFBD8B
#284F47
#FA9448

#0F5672
#094A5B
#317174
#86C2B4
#F4E9C1

#112F3B
#2B7379
#6BBAB5
#FAE3D6
#D5ADA6

#2B3A42
#3F5866
#BDD3DE
#F0F0DF
#FF8F00

#393E46
#00ADB5
#FFF4E0
#F8B500
#FC3C3C

#FAC4E2
#FA87B1
#FA5672
#FAD6D6
#FDC2BE

#0B4958
#4D8A7C
#C4DB94
#FFF38B
#FDB681

#DB2B30
#8F1D2C
#5A142A
#400D2A
#140A25

#112F41
#068587
#4FB99F
#F2B134
#ED553B

#393E46
#00ADB5
#FFF4E0
#F8B500
#FC3C3C

#C5E2F6
#99E0E7
#FFF6F6
#FCB5BB
#FFDADB

#DDA8B5
#B87D95
#4D2A4F
#361E40
#29102E

#1F2226
#D6231E
#F8B500
#FFF4E0
#2E94B5

#003840
#005A5B
#007369
#008C72
#02A676

#0D1F21
#143441
#C4B69A
#EBB11A
#CC9612

#96CEB4
#FFEEAD
#FF6F69
#FFCC5C
#AAD8B0

#FF6138
#FFFF9D
#BEEB9F
#79BD8F
#00A388

#112F41
#068587
#4FB99F
#F2B134
#ED553B

#3F8CCC
#7DBC8E
#EBE4C4
#F3BA42
#F06060

#063442
#086970
#F0D2C3
#DBACA0
#8D5858

#FE5F1B
#33ABB1
#EFAB1F
#103754
#D53D13

#3C4B5A
#AFC9DB
#E2A867
#E68959
#CC625C

#FF6138
#FFFF9D
#BEEB9F
#79BD8F
#00A388

#CDEBFF
#6EB2C4
#E0FFF4
#C1E8D4
#D4FFE3

#B19088
#CAB099
#ECCEC3
#C99297
#906668

#DB4BE0
#F7B2F7
#F8FCF5
#EEC1FF
#C7BBC6

#B8C3B5
#E9B899
#CE8D7B
#834644
#596260

#6C8D53
#86A65B
#AFBD8D
#E9DCD6
#F2F2F2

#0080D1
#2B526B
#00D1B1
#D74D36
#D10000

#FF8135
#FFA041
#EF7A25
#FF863A
#F76A24

#EEA7B0
#D6346B
#1B0141
#424370
#F1E9D7

#F3B7D5
#C17B9E
#0A2B5C
#80A8DA
#054B8C

#0673B9
#27BBD8
#08A398
#95C124
#E84314

#F7473B
#3B8B88
#F2C14E
#F78154
#2176AE

#EAF7FE
#003652
#006693
#F0F0F0
#F11088

#E9EDF6
#F2F38A
#263451
#5069AB
#579973

#E6EFC2
#98D3A6
#37AFA8
#496E7D
#5B5451

#FFFFEA
#FF5A65
#260520
#20C2A0
#FFFFEA

#FAF6D8
#011D70
#F2C230
#F28C0F
#BF5B04

#7C5CA8
#EAEEF0
#40A6BE
#F2AF5A
#E2615C

#2B3A42
#3F5866
#BDD3DE
#F0F0DF
#FAA21B

#012340
#7799A6
#F2B705
#F27F1B
#F2F2F2

#8798A0
#6A869B
#8BA9C6
#B9DCF4
#426083

#A0686D
#FFD8DB
#EDB1B6
#58A069
#B1EDBF

#B21230
#FFF319
#FF003C
#1497CC
#0982B2

#001747
#11487D
#0E7FA6
#38C7BD
#70D6BC

#D91B5B
#8CC63C
#F4EC31
#F2811D
#EC3C33

#FFFFF0
#59CF8D
#F5D443
#8A8688
#212746

#B29279
#AF6468
#D9D0C1
#EDDFC4
#CFA084

#D99197
#2C4373
#F2BD82
#F2F2F2
#BF634E

#626973
#949DA6
#F2F2F2
#403D39
#0D0000

#FD9F01
#F68C00
#F25B02
#D82C02
#A60501

#B6B4BF
#728C78
#85A68D
#BF766F
#8C4C46

#004C7F
#50B9FF
#0098FF
#004C7F
#007ACC

#61731F
#BFA34E
#593515
#BF2B0A
#730202

#F2B544
#D98825
#BF6211
#732C02
#401303

#ED556D
#2C3A40
#A2BEA1
#FCCDA9
#F4817C

#012618
#055B4A
#F1E9DC
#F0C053
#8C3C1F

#F0C243
#FA310C
#8B00E3
#0C98FA
#0CF035

#876017
#F2F0F0
#A2938A
#262626
#0D0D0D

#730120
#F5C3D2
#F379A3
#F3A7C6
#F3E0E1

#F33055
#AADEEF
#935F4D
#F49D4E
#2F1F1A

#A91ED2
#874C99
#4D19FF
#FFE063
#CCA64D

#19E6FF
#E82F9B
#FF6A00
#E8E28B
#FFD300

#FF949D
#B9B8FF
#73A1FF
#FFE4DB
#FFBF87

#6EA8C1
#9EC7D9
#F0F1F4
#717171
#585857

#A87670
#FFE0DC
#F5C1BB
#5FA882
#BBF5D7

#FF8800
#FFA602
#8CFFF0
#2160D4
#1D03A1

#F8B195
#F67280
#C06C84
#6C5B7B
#355C7D

#5F9BA3
#86B7BF
#9DCAD2
#CDEDF5
#EFF8FB

#B25741
#FFA690
#FF9176
#2FB287
#76FFD2

#8B4B62
#BB6F6B
#EA9674
#FCBC80
#F7E29C

#202D54
#067E7D
#6DC9B8
#F2B134
#ED553B

#112F41
#068587
#4FB99F
#F2B134
#ED553B

#F6D769
#F27306
#BD3402
#EF926C
#5A0F00

#BF343F
#84B8D9
#113740
#F2F2F2
#A62D2D

#98D8EF
#B0D4E0
#9BBFCD
#749EC8
#74A4B8

#A66890
#657472
#53606A
#734F43
#603B27

#1F88FF
#2022E8
#8217FF
#DB20E8
#FF245C

#F7E87D
#F2903A
#8F4115
#F37B29
#591E08

#775C22
#FFDD95
#FFC64A
#7F6F4B
#E8B443

#E01C55
#EDEFF1
#42525A
#171C1F
#000000

#E5E6E0
#848C42
#A68F72
#733032
#403841

#B2503D
#FF6E52
#FF8871
#2BB27B
#71FFC5

#2E3B7F
#6F46E0
#3066DB
#FAC95F
#F79B4A

#130A52
#04A9FF
#000000
#728C87
#0021B2

#0B1014
#E1A244
#E3CEB4
#5B6058
#D6C6B9

#F20587
#05C7F2
#7B20A1
#0A4088
#FEFEFC

#948E84
#BFB7AD
#D6CEC1
#F1E7D9
#FDF2E4

#452428
#1E142D
#24717E
#EFD522
#154661

#8C4E03
#D9A78B
#BF4904
#8C1C03
#260101

#70818C
#01260E
#010D00
#D9CEBA
#BFA87E

#B56E58
#823118
#E8889B
#CAEBC4
#85B558

#8C6554
#581659
#A175BF
#8A3BBF
#A34F74

#D72C49
#1A6FA6
#F2F4F3
#FAD31B
#F1BC19

#711C07
#AD763D
#BB6738
#FE3B8A
#BDB852

#1E1F26
#383A3E
#E3D2BC
#8C6A5E
#735149

#0077BF
#E6127A
#009FFF
#591B85
#332BE5

#80C7F2
#99D9F2
#F2A74B
#8C5B30
#D9843B

#34A5B2
#96F5FF
#64F0FF
#B25F22
#FF7D1D

#BE202E
#0C8B3A
#3E7A3D
#A73E32
#000000

#7C748C
#7B81A6
#537370
#FDFBF7
#3A3132

#89876C
#49483A
#C9C69F
#D6D2A9
#AFAC8A

#D96C89
#BFBFBF
#D99282
#D95043
#D91A1A

#F1E5C3
#A99165
#712F10
#3F190F
#3A2D27

#BF8E8E
#733944
#594A3C
#D9CBC7
#8C7E7D

#EDCA47
#D66CBE
#EF854D
#EC3471
#8A2A18

#375064
#7F8CA8
#FEFEFD
#839AA2
#A9C7D1

#80CC17
#80995D
#FFEF36
#6A6AFF
#214FCC

#524656
#CF4747
#EA7A58
#E4DCCB
#A6C4BC

#D1E5DB
#5D8C7B
#BCBF56
#F2D888
#BFA18F

#DFDDDC
#9EB2BE
#B3C1CB
#97857C
#515151

#D91A3D
#465902
#7C8C03
#F28D52
#BF6D65

#445745
#4E4446
#999F75
#E3CAA3
#71A8E6

#918516
#699E10
#A5A811
#A88A11
#9E7310

#8C4F6B
#BFBFBF
#BF9341
#8C4A3B
#8C2626

#0DFF82
#FF47DD
#4667E8
#E8E200
#FFBF8C

#F2F0F2
#D9D7D8
#5684BF
#6093BF
#A6A29F

#174C8C
#3D9AD5
#7CB1E0
#9EC2E8
#B7D3EE

#C2A18A
#307BAC
#4B8FB9
#346598
#7795A4

#FF540D
#E82C0C
#FF0000
#E80C7A
#FF0DFF

#023373
#BDDEF2
#F29F05
#732C02
#A6170A

#FF8133
#FFBA8F
#FFF2EB
#24AEB2
#8FFBFF

#EBA3CB
#96D0D4
#C785AB
#FBEFDF
#68C2C2

#D26363
#D2A8AA
#0E2A38
#304753
#CF7E83

Umarım sizin için faydalı bir paylaşım olmuştur.

Farklı bir yazımda görüşmek üzere.

34 Yorum

  1. blank Bhj Ocak 23, 2020 Cevapla
    • blank admin Ocak 23, 2020
  2. blank Bhj Ocak 28, 2020 Cevapla
    • blank admin Ocak 28, 2020
  3. blank yağız özer Nisan 14, 2020 Cevapla
    • blank admin Nisan 15, 2020
  4. blank çağlar karahan Nisan 19, 2020 Cevapla
    • blank admin Nisan 19, 2020
  5. blank Cengiz KURT Nisan 20, 2020 Cevapla
    • blank admin Nisan 20, 2020
    • blank K Temmuz 8, 2020
  6. blank Cengiz KURT Nisan 21, 2020 Cevapla
    • blank admin Nisan 21, 2020
  7. blank Ali KOCA Mayıs 11, 2020 Cevapla
    • blank admin Mayıs 13, 2020
  8. blank Berat Mayıs 26, 2020 Cevapla
    • blank admin Mayıs 28, 2020
  9. blank GULSEN Haziran 11, 2020 Cevapla
    • blank admin Haziran 11, 2020
  10. blank Kubra Temmuz 18, 2020 Cevapla
    • blank admin Temmuz 20, 2020
  11. blank Metin Ağustos 26, 2020 Cevapla
    • blank admin Eylül 11, 2020
  12. blank Ömer G. Eylül 9, 2020 Cevapla
    • blank admin Eylül 11, 2020
  13. blank mehmet Eylül 19, 2020 Cevapla
    • blank admin Eylül 22, 2020
  14. blank Hasan karamanlı Eylül 25, 2020 Cevapla
  15. blank Salih Ekim 16, 2020 Cevapla
    • blank admin Ekim 16, 2020
  16. blank buse Ekim 29, 2020 Cevapla
    • blank admin Kasım 18, 2020
  17. blank Mikail Kasım 14, 2020 Cevapla
    • blank admin Kasım 18, 2020

Yorum Yazın