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.

Leave a Reply