Coding Workshops
SheCodes Basics
3-week coding workshop
SheCodes Plus
3-month coding workshop
SheCodes Pro
6-month coding workshop
SheCodes Max
8-month coding workshop
SheCodes FREE Class
60-minute coding class for beginners
SheCodes Quick Links
SheCodes Workshops
Coding workshops for women
SheCodes Foundation
For women in developing countries and refugees
SheCodes Tools
Free coding tools for developers
SheCodes Connect
Connect with SheCodes Alumni
SheCodes Radio
Curated tracks to help you keep on track, 24/7
SheCodes Challenges
Coding challenges for the SheCodes Community
SheCodes Athena
Your AI Coding Assistant
CSS Generators
CSS Gradients
CSS Color Palettes
Front-end Cheatsheets
Learn to Code
CSS Color Palette
Copy to clipboard
Feel free to customize the CSS class names
Back to all palettes
More Blue CSS Color Palettes
#36413d
copy
#4c657e
copy
#f29696
copy
#ffe2ad
copy
CSS Code
Go fullscreen
#c2faf1
copy
#f6f6f6
copy
#dfeff0
copy
#295e6a
copy
CSS Code
Go fullscreen
#eda1c1
copy
#fab2ac
copy
#bee4d2
copy
#d7f8f7
copy
CSS Code
Go fullscreen
#0962ea
copy
#0e7cf4
copy
#0aa0f6
copy
#faf15d
copy
CSS Code
Go fullscreen
#cdffeb
copy
#009f9d
copy
#07456f
copy
#0f0a3c
copy
CSS Code
Go fullscreen
#11cbd7
copy
#9feed1
copy
#fff6a2
copy
#f60c86
copy
CSS Code
Go fullscreen
#84b9ef
copy
#fbe4c9
copy
#ff5d5d
copy
#952e4b
copy
CSS Code
Go fullscreen
#76508e
copy
#482d57
copy
#03c1eb
copy
#86f3b8
copy
CSS Code
Go fullscreen
#19215e
copy
#f7e6b5
copy
#fa67ab
copy
#80185f
copy
CSS Code
Go fullscreen
#cefff1
copy
#ace7ef
copy
#a6acec
copy
#a56cc1
copy
CSS Code
Go fullscreen
#090089
copy
#0060ca
copy
#91ceff
copy
#fcdc74
copy
CSS Code
Go fullscreen
#293462
copy
#211a4c
copy
#f33535
copy
#a51c2d
copy
CSS Code
Go fullscreen
#fafafa
copy
#e8f1f5
copy
#005691
copy
#004a7c
copy
CSS Code
Go fullscreen
#f0f0f0
copy
#43dde6
copy
#364f6b
copy
#fc5185
copy
CSS Code
Go fullscreen
#dffcad
copy
#6ec189
copy
#595cae
copy
#424478
copy
CSS Code
Go fullscreen
#f1f4f6
copy
#5ac8d8
copy
#597fca
copy
#2552ac
copy
CSS Code
Go fullscreen
#d9f9f4
copy
#9cd9de
copy
#86c1d4
copy
#5a92af
copy
CSS Code
Go fullscreen
#1a2849
copy
#505bda
copy
#b063c5
copy
#ffaac3
copy
CSS Code
Go fullscreen
#3a0088
copy
#930077
copy
#e61c5d
copy
#ffbd39
copy
CSS Code
Go fullscreen
#c8f0f0
copy
#86d8dc
copy
#7047a3
copy
#3a276a
copy
CSS Code
Go fullscreen
#feff94
copy
#ad64c5
copy
#83d9ef
copy
#bcfff2
copy
CSS Code
Go fullscreen
#f9fa9b
copy
#ff7777
copy
#ceecf0
copy
#f0f3f3
copy
CSS Code
Go fullscreen
#3fc5f0
copy
#42dee1
copy
#6decb9
copy
#eef5b2
copy
CSS Code
Go fullscreen
#07689f
copy
#a2d5f2
copy
#fafafa
copy
#ff7e67
copy
CSS Code
Go fullscreen
#e9f679
copy
#9bdf46
copy
#25a55f
copy
#346473
copy
CSS Code
Go fullscreen
#eb586f
copy
#d8e9f0
copy
#4aa0d5
copy
#454553
copy
CSS Code
Go fullscreen
#fafafa
copy
#c7eeff
copy
#0077c0
copy
#1d242b
copy
CSS Code
Go fullscreen
#ffb400
copy
#fffbe0
copy
#2994b2
copy
#474744
copy
CSS Code
Go fullscreen
#dbf1f2
copy
#cd5555
copy
#882042
copy
#efedbb
copy
CSS Code
Go fullscreen
#29c6cd
copy
#f6e4c4
copy
#fea386
copy
#f19584
copy
CSS Code
Go fullscreen
#718ca1
copy
#59748c
copy
#354d62
copy
#d7f2f7
copy
CSS Code
Go fullscreen
#333a7b
copy
#4b6982
copy
#70c6c7
copy
#b4ffd8
copy
CSS Code
Go fullscreen
#d5441c
copy
#013c4d
copy
#9dd5cb
copy
#f3e5b1
copy
CSS Code
Go fullscreen
#d5def5
copy
#8594e4
copy
#6643b5
copy
#430f58
copy
CSS Code
Go fullscreen
#0c056d
copy
#590d82
copy
#b61aae
copy
#f25d9c
copy
CSS Code
Go fullscreen
#233142
copy
#4f9da6
copy
#facf5a
copy
#ff5959
copy
CSS Code
Go fullscreen
#eaf887
copy
#79dc96
copy
#3bbbb3
copy
#377aaf
copy
CSS Code
Go fullscreen
#8ecccc
copy
#50717b
copy
#3a4042
copy
#212121
copy
CSS Code
Go fullscreen
#302387
copy
#ff3796
copy
#00faac
copy
#fffdaf
copy
CSS Code
Go fullscreen
#f7f7f8
copy
#4eeaf6
copy
#c82586
copy
#291f71
copy
CSS Code
Go fullscreen
#f8b195
copy
#f67280
copy
#c06c84
copy
#355c7d
copy
CSS Code
Go fullscreen
#1d1919
copy
#ffce76
copy
#0075f6
copy
#0900c3
copy
CSS Code
Go fullscreen
#f73f52
copy
#ffea85
copy
#f6f6f6
copy
#7986c7
copy
CSS Code
Go fullscreen
#e7eaf6
copy
#a2a8d3
copy
#38598b
copy
#113f67
copy
CSS Code
Go fullscreen
#7696db
copy
#562d7d
copy
#ae427b
copy
#ff8a98
copy
CSS Code
Go fullscreen
#e9007f
copy
#7cdfff
copy
#d5fffb
copy
#fcffc8
copy
CSS Code
Go fullscreen
#f7f5b2
copy
#bad4f9
copy
#5e89ef
copy
#352771
copy
CSS Code
Go fullscreen
#3498db
copy
#ecf0f1
copy
#34495e
copy
#f1c40f
copy
CSS Code
Go fullscreen
#bad7df
copy
#ffe2e2
copy
#f6f6f6
copy
#99ddcc
copy
CSS Code
Go fullscreen
#626eef
copy
#09a8fa
copy
#41c5d3
copy
#fffa9d
copy
CSS Code
Go fullscreen
#ffdfdf
copy
#fbc1bc
copy
#315b96
copy
#233567
copy
CSS Code
Go fullscreen
#ffb4ac
copy
#679186
copy
#264e70
copy
#ffebd3
copy
CSS Code
Go fullscreen
#000249
copy
#0f4392
copy
#ff5151
copy
#ff8b8b
copy
CSS Code
Go fullscreen
#6b76ff
copy
#a5aeff
copy
#c8e4fe
copy
#feffe0
copy
CSS Code
Go fullscreen
#73f7dd
copy
#2cc4cb
copy
#1972a4
copy
#2e3a87
copy
CSS Code
Go fullscreen
#00028c
copy
#21aa93
copy
#01676b
copy
#ffc3e7
copy
CSS Code
Go fullscreen
#dcb5ff
copy
#d9f2ff
copy
#a5bdfd
copy
#77529e
copy
CSS Code
Go fullscreen
#b7b9f4
copy
#5254d8
copy
#192294
copy
#000278
copy
CSS Code
Go fullscreen
#020438
copy
#284184
copy
#1f8ea3
copy
#00eaff
copy
CSS Code
Go fullscreen
#f2f2f2
copy
#cdcdcd
copy
#005691
copy
#004a7c
copy
CSS Code
Go fullscreen
#f0f87f
copy
#4bc87f
copy
#29668b
copy
#6eaff7
copy
CSS Code
Go fullscreen
#f85f73
copy
#fbe8d3
copy
#928a97
copy
#283c63
copy
CSS Code
Go fullscreen
#062743
copy
#113a5d
copy
#c4ffdd
copy
#f9f9f9
copy
CSS Code
Go fullscreen
#523f79
copy
#807be4
copy
#73cff0
copy
#afffea
copy
CSS Code
Go fullscreen
#2aaf74
copy
#4ed99c
copy
#d1ebfe
copy
#f7be7f
copy
CSS Code
Go fullscreen
#634258
copy
#6d6087
copy
#60a0b0
copy
#9ad1aa
copy
CSS Code
Go fullscreen
#0b88a8
copy
#a6dc8c
copy
#dfeb95
copy
#095062
copy
CSS Code
Go fullscreen
#9effa9
copy
#36485e
copy
#333146
copy
#29252c
copy
CSS Code
Go fullscreen
#e9fadd
copy
#b8e4c9
copy
#3f5468
copy
#42291c
copy
CSS Code
Go fullscreen
#f6f6f6
copy
#d6e4f0
copy
#1e56a0
copy
#163172
copy
CSS Code
Go fullscreen
#f3d1f4
copy
#f5fcc1
copy
#bae5e5
copy
#98d6ea
copy
CSS Code
Go fullscreen
#804d3b
copy
#522e24
copy
#75beda
copy
#9aedf4
copy
CSS Code
Go fullscreen
#113f67
copy
#34699a
copy
#408ab4
copy
#65c6c4
copy
CSS Code
Go fullscreen
#61f2f5
copy
#ffffff
copy
#e0e0e0
copy
#723881
copy
CSS Code
Go fullscreen
#f6e5f5
copy
#fbf4f9
copy
#f6e7e6
copy
#b9cced
copy
CSS Code
Go fullscreen
#d0f66a
copy
#36c186
copy
#158a8c
copy
#1e5287
copy
CSS Code
Go fullscreen
#f2eb80
copy
#a2bf39
copy
#2685bf
copy
#144673
copy
CSS Code
Go fullscreen
#e3e8f8
copy
#c0c5cd
copy
#3e588f
copy
#203562
copy
CSS Code
Go fullscreen
#23425f
copy
#a64942
copy
#ff7844
copy
#ffab5e
copy
CSS Code
Go fullscreen
#657dc4
copy
#838ed9
copy
#ece8e5
copy
#f59292
copy
CSS Code
Go fullscreen
#f9ecec
copy
#f0d9da
copy
#c8d9eb
copy
#ecf2f9
copy
CSS Code
Go fullscreen
#fff56c
copy
#f1b149
copy
#4366a9
copy
#679ceb
copy
CSS Code
Go fullscreen
#152744
copy
#367591
copy
#61d2b4
copy
#9dfdc7
copy
CSS Code
Go fullscreen
#80a3a2
copy
#abcecf
copy
#c4dce0
copy
#daf4f5
copy
CSS Code
Go fullscreen
#f6f078
copy
#01d28e
copy
#434982
copy
#730068
copy
CSS Code
Go fullscreen
#ff008e
copy
#124e96
copy
#0d8abc
copy
#daeaf6
copy
CSS Code
Go fullscreen
#ffffe3
copy
#87e0ff
copy
#53c7f0
copy
#1d97c1
copy
CSS Code
Go fullscreen
#353b6e
copy
#252243
copy
#74deed
copy
#9365db
copy
CSS Code
Go fullscreen
#002bdc
copy
#2f4bff
copy
#00a6e7
copy
#ffe37f
copy
CSS Code
Go fullscreen
#c2ffff
copy
#8bdeff
copy
#a888ff
copy
#26466f
copy
CSS Code
Go fullscreen
#6fe7dd
copy
#3490de
copy
#6639a6
copy
#521262
copy
CSS Code
Go fullscreen
#69779b
copy
#9692af
copy
#acdbdf
copy
#d7eaea
copy
CSS Code
Go fullscreen
#f7e74a
copy
#09c6ab
copy
#068888
copy
#02556d
copy
CSS Code
Go fullscreen
#413c69
copy
#4a47a3
copy
#ad62aa
copy
#eab9c9
copy
CSS Code
Go fullscreen
#3b939b
copy
#2f8189
copy
#91f3fc
copy
#c9fbff
copy
CSS Code
Go fullscreen
#f5b17b
copy
#4e709d
copy
#89a4c7
copy
#cdd5e0
copy
CSS Code
Go fullscreen
#272e6e
copy
#ffffc3
copy
#ffc55c
copy
#e95d35
copy
CSS Code
Go fullscreen
#f4eeff
copy
#dcd6f7
copy
#a6b1e1
copy
#424874
copy
CSS Code
Go fullscreen
#323643
copy
#606470
copy
#93deff
copy
#f7f7f7
copy
CSS Code
Go fullscreen
#b6e1e0
copy
#9cd3d3
copy
#e8630a
copy
#2b4353
copy
CSS Code
Go fullscreen
All Blue CSS Color Palettes
👩💻
What is SheCodes?
SheCodes teaches coding skills to busy women
Start your dream career in tech
Learn more about SheCodes
4.9/5
, our workshops are highly recommended by
180,000+ women, including employees from these companies
📬
Join Our Mailing List
Be the first to know about upcoming coding workshops, new coding tools, and other SheCodes related news.