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
#fad3cf
copy
#a696c8
copy
#2470a0
copy
#060608
copy
CSS Code
Go fullscreen
#f2f7ff
copy
#0b409c
copy
#10316b
copy
#ffce63
copy
CSS Code
Go fullscreen
#d2e4f1
copy
#8facc0
copy
#818d97
copy
#484d51
copy
CSS Code
Go fullscreen
#21243d
copy
#ff7c7c
copy
#ffd082
copy
#88e1f2
copy
CSS Code
Go fullscreen
#feed30
copy
#ff6868
copy
#924992
copy
#504077
copy
CSS Code
Go fullscreen
#f7fbfc
copy
#d6e6f2
copy
#b9d7ea
copy
#769fcd
copy
CSS Code
Go fullscreen
#2a528a
copy
#5d6ec7
copy
#9f71db
copy
#e9d498
copy
CSS Code
Go fullscreen
#e9f679
copy
#9bdf46
copy
#25a55f
copy
#346473
copy
CSS Code
Go fullscreen
#ffe6eb
copy
#defcfc
copy
#cbf1f5
copy
#a6e3e9
copy
CSS Code
Go fullscreen
#f8c957
copy
#ecf0f1
copy
#3498db
copy
#34495e
copy
CSS Code
Go fullscreen
#f1f6f5
copy
#9ef4e6
copy
#12cc94
copy
#6088bb
copy
CSS Code
Go fullscreen
#a3f7bf
copy
#29a19c
copy
#4b6289
copy
#60316e
copy
CSS Code
Go fullscreen
#48466d
copy
#3d84a8
copy
#46cdcf
copy
#abedd8
copy
CSS Code
Go fullscreen
#92e6e6
copy
#fff9af
copy
#d65d7a
copy
#524c84
copy
CSS Code
Go fullscreen
#f8ed86
copy
#a5e9db
copy
#2ca4bf
copy
#415b90
copy
CSS Code
Go fullscreen
#3a1f5d
copy
#c83660
copy
#e15249
copy
#f6d365
copy
CSS Code
Go fullscreen
#effffb
copy
#50d890
copy
#4f98ca
copy
#272727
copy
CSS Code
Go fullscreen
#f2f2f0
copy
#ff5e3a
copy
#2c365d
copy
#272e4f
copy
CSS Code
Go fullscreen
#c2faf1
copy
#f6f6f6
copy
#dfeff0
copy
#295e6a
copy
CSS Code
Go fullscreen
#90aeff
copy
#cefc86
copy
#60efb8
copy
#f9f7f7
copy
CSS Code
Go fullscreen
#80a3a2
copy
#abcecf
copy
#c4dce0
copy
#daf4f5
copy
CSS Code
Go fullscreen
#333a7b
copy
#4b6982
copy
#70c6c7
copy
#b4ffd8
copy
CSS Code
Go fullscreen
#397298
copy
#8ac4ff
copy
#9179ef
copy
#7b417d
copy
CSS Code
Go fullscreen
#ffdaa9
copy
#6fa3a9
copy
#5f72b2
copy
#60366f
copy
CSS Code
Go fullscreen
#1684a7
copy
#09a599
copy
#f6ec72
copy
#f6f6f6
copy
CSS Code
Go fullscreen
#f5f5f5
copy
#30e3ca
copy
#2f89fc
copy
#40514e
copy
CSS Code
Go fullscreen
#3d6271
copy
#3d899c
copy
#45a298
copy
#d8f8b7
copy
CSS Code
Go fullscreen
#ff5ab0
copy
#f7fed4
copy
#4df4ff
copy
#1bb5ec
copy
CSS Code
Go fullscreen
#425e92
copy
#0c81f6
copy
#5fe1d9
copy
#f7fad1
copy
CSS Code
Go fullscreen
#11cbd7
copy
#9feed1
copy
#fff6a2
copy
#f60c86
copy
CSS Code
Go fullscreen
#282d4f
copy
#23103a
copy
#a0204c
copy
#ff6c00
copy
CSS Code
Go fullscreen
#ddf516
copy
#12e2a3
copy
#389168
copy
#0f117a
copy
CSS Code
Go fullscreen
#f7b449
copy
#dde9f8
copy
#8293e3
copy
#5847ad
copy
CSS Code
Go fullscreen
#ffabe5
copy
#c7f5ff
copy
#d89fff
copy
#f6fcae
copy
CSS Code
Go fullscreen
#deecfc
copy
#b9ceeb
copy
#87a8d0
copy
#c3b4d2
copy
CSS Code
Go fullscreen
#b3f7f6
copy
#7dd076
copy
#f1f592
copy
#f4cb81
copy
CSS Code
Go fullscreen
#f6378f
copy
#ffdd00
copy
#f5efe8
copy
#8ea5eb
copy
CSS Code
Go fullscreen
#3498db
copy
#ecf0f1
copy
#34495e
copy
#f1c40f
copy
CSS Code
Go fullscreen
#fcefee
copy
#fccde2
copy
#fc5c9c
copy
#c5e3f6
copy
CSS Code
Go fullscreen
#422b72
copy
#266d98
copy
#3cb29a
copy
#c4f080
copy
CSS Code
Go fullscreen
#3f52e3
copy
#f6f6f6
copy
#efe891
copy
#f12d2d
copy
CSS Code
Go fullscreen
#f2eb80
copy
#a2bf39
copy
#2685bf
copy
#144673
copy
CSS Code
Go fullscreen
#e4f5e5
copy
#a6dfde
copy
#88a6e5
copy
#8d6ec8
copy
CSS Code
Go fullscreen
#081f37
copy
#5fc9f3
copy
#2e79ba
copy
#1e549f
copy
CSS Code
Go fullscreen
#0c056d
copy
#590d82
copy
#b61aae
copy
#f25d9c
copy
CSS Code
Go fullscreen
#a561ff
copy
#fd72ad
copy
#fcce9e
copy
#cfe3ff
copy
CSS Code
Go fullscreen
#303481
copy
#d6e6f2
copy
#f5f5f5
copy
#fff200
copy
CSS Code
Go fullscreen
#415f77
copy
#d1e9ea
copy
#fc5050
copy
#ffd00c
copy
CSS Code
Go fullscreen
#1a2849
copy
#505bda
copy
#b063c5
copy
#ffaac3
copy
CSS Code
Go fullscreen
#f6f6f6
copy
#d6e4f0
copy
#1e56a0
copy
#163172
copy
CSS Code
Go fullscreen
#fafdcb
copy
#aee7e8
copy
#28c3d4
copy
#248ea9
copy
CSS Code
Go fullscreen
#3c415e
copy
#738598
copy
#dfe2e2
copy
#1cb3c8
copy
CSS Code
Go fullscreen
#35477d
copy
#6c5b7b
copy
#c06c84
copy
#f67280
copy
CSS Code
Go fullscreen
#233142
copy
#455d7a
copy
#f95959
copy
#facf5a
copy
CSS Code
Go fullscreen
#cff1ef
copy
#ffffff
copy
#fbcffc
copy
#be79df
copy
CSS Code
Go fullscreen
#c84361
copy
#e78775
copy
#abcdcb
copy
#ebe59b
copy
CSS Code
Go fullscreen
#c82121
copy
#dee1ec
copy
#becbff
copy
#0d0cb5
copy
CSS Code
Go fullscreen
#fafafa
copy
#c7eeff
copy
#0077c0
copy
#1d242b
copy
CSS Code
Go fullscreen
#b0e6ff
copy
#7687db
copy
#8f45a9
copy
#582e48
copy
CSS Code
Go fullscreen
#bff4ed
copy
#280f34
copy
#e41655
copy
#b30753
copy
CSS Code
Go fullscreen
#1d1919
copy
#ffce76
copy
#0075f6
copy
#0900c3
copy
CSS Code
Go fullscreen
#fd5959
copy
#ff9c6d
copy
#fcff82
copy
#afc5ff
copy
CSS Code
Go fullscreen
#ecfeff
copy
#00b7c2
copy
#128494
copy
#4ef037
copy
CSS Code
Go fullscreen
#fff395
copy
#7459dc
copy
#41b3ff
copy
#63f5ef
copy
CSS Code
Go fullscreen
#071e3d
copy
#1f4287
copy
#278ea5
copy
#21e6c1
copy
CSS Code
Go fullscreen
#a9eee6
copy
#fefaec
copy
#f38181
copy
#625772
copy
CSS Code
Go fullscreen
#6a759b
copy
#21273d
copy
#b9d4f1
copy
#f1f6f8
copy
CSS Code
Go fullscreen
#011f3f
copy
#0960bd
copy
#429ffd
copy
#fef2bf
copy
CSS Code
Go fullscreen
#80ffdb
copy
#55e0a3
copy
#5b70f3
copy
#4850b9
copy
CSS Code
Go fullscreen
#ff6a38
copy
#9ed0e0
copy
#5c868e
copy
#19483f
copy
CSS Code
Go fullscreen
#ebd9dd
copy
#d8aed3
copy
#9182c4
copy
#486989
copy
CSS Code
Go fullscreen
#cdffeb
copy
#009f9d
copy
#07456f
copy
#0f0a3c
copy
CSS Code
Go fullscreen
#ece493
copy
#84a1be
copy
#5c7893
copy
#535962
copy
CSS Code
Go fullscreen
#5c4b77
copy
#6990e4
copy
#b145ad
copy
#f6a2d4
copy
CSS Code
Go fullscreen
#272343
copy
#ffffff
copy
#e3f6f5
copy
#bae8e8
copy
CSS Code
Go fullscreen
#7b3c3c
copy
#db5f29
copy
#f0f0e4
copy
#68bde1
copy
CSS Code
Go fullscreen
#d3f4ff
copy
#b2dffb
copy
#e7a4e4
copy
#ffc55c
copy
CSS Code
Go fullscreen
#d2f6fc
copy
#a9d2ff
copy
#7984ee
copy
#6730ec
copy
CSS Code
Go fullscreen
#ffb400
copy
#fffbe0
copy
#2994b2
copy
#474744
copy
CSS Code
Go fullscreen
#f60c86
copy
#f9f6d8
copy
#a5bfdd
copy
#2e89ba
copy
CSS Code
Go fullscreen
#090089
copy
#0060ca
copy
#91ceff
copy
#fcdc74
copy
CSS Code
Go fullscreen
#80e5e9
copy
#7d77f6
copy
#793e71
copy
#e471a7
copy
CSS Code
Go fullscreen
#27296d
copy
#5e63b6
copy
#a393eb
copy
#f5c7f7
copy
CSS Code
Go fullscreen
#36413d
copy
#4c657e
copy
#f29696
copy
#ffe2ad
copy
CSS Code
Go fullscreen
#591fce
copy
#0c9cee
copy
#3dbdc2
copy
#a1f480
copy
CSS Code
Go fullscreen
#9ddcdc
copy
#fff4e1
copy
#ffebb7
copy
#e67a7a
copy
CSS Code
Go fullscreen
#ee8374
copy
#54567a
copy
#dab784
copy
#f8f3b6
copy
CSS Code
Go fullscreen
#1b262c
copy
#0f4c75
copy
#3282b8
copy
#bbe1fa
copy
CSS Code
Go fullscreen
#084177
copy
#687466
copy
#cd8d7b
copy
#fbc490
copy
CSS Code
Go fullscreen
#2f2342
copy
#e42f45
copy
#b42b3f
copy
#7ca0e5
copy
CSS Code
Go fullscreen
#89fad0
copy
#4ec9e1
copy
#6796e5
copy
#228291
copy
CSS Code
Go fullscreen
#c7f3ff
copy
#fdc7ff
copy
#ffdcf5
copy
#f2f4c3
copy
CSS Code
Go fullscreen
#5585b5
copy
#53a8b6
copy
#79c2d0
copy
#bbe4e9
copy
CSS Code
Go fullscreen
#000033
copy
#0066cc
copy
#0099ff
copy
#ededed
copy
CSS Code
Go fullscreen
#fd5f00
copy
#00204a
copy
#005792
copy
#d9faff
copy
CSS Code
Go fullscreen
#01005e
copy
#22267b
copy
#28518a
copy
#17b794
copy
CSS Code
Go fullscreen
#29d2e4
copy
#13829b
copy
#fcc29a
copy
#fde9c9
copy
CSS Code
Go fullscreen
#423737
copy
#5d5d5d
copy
#00adb5
copy
#a3f7bf
copy
CSS Code
Go fullscreen
#1b3764
copy
#4ab8b8
copy
#fafccb
copy
#efa35c
copy
CSS Code
Go fullscreen
#233142
copy
#36506c
copy
#a5def1
copy
#ebf7fd
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
175,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.