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
#b8f7d4
copy
#6fe7db
copy
#7fa6ee
copy
#835af1
copy
CSS Code
Go fullscreen
#7b99fa
copy
#53cdd8
copy
#96eab7
copy
#f1f3b8
copy
CSS Code
Go fullscreen
#353b6e
copy
#252243
copy
#74deed
copy
#9365db
copy
CSS Code
Go fullscreen
#d3f6f3
copy
#f9fce1
copy
#fee9b2
copy
#fbd1b7
copy
CSS Code
Go fullscreen
#ffc7c7
copy
#ff80b0
copy
#9399ff
copy
#a9fffd
copy
CSS Code
Go fullscreen
#6251da
copy
#828bff
copy
#7ab7ff
copy
#f0fc93
copy
CSS Code
Go fullscreen
#9a69e1
copy
#47429d
copy
#f7b7f3
copy
#e27393
copy
CSS Code
Go fullscreen
#2b3964
copy
#3482aa
copy
#6db3b5
copy
#f9cc7b
copy
CSS Code
Go fullscreen
#293462
copy
#00818a
copy
#ec9b3b
copy
#f7be16
copy
CSS Code
Go fullscreen
#152744
copy
#367591
copy
#61d2b4
copy
#9dfdc7
copy
CSS Code
Go fullscreen
#413c69
copy
#4a47a3
copy
#ad62aa
copy
#eab9c9
copy
CSS Code
Go fullscreen
#e0f6aa
copy
#69aeff
copy
#9d4dff
copy
#6b3278
copy
CSS Code
Go fullscreen
#8e9fe6
copy
#6acafc
copy
#6ce6dd
copy
#dbf094
copy
CSS Code
Go fullscreen
#a3f3eb
copy
#f1ffab
copy
#fbd341
copy
#fb9a40
copy
CSS Code
Go fullscreen
#48829e
copy
#51dacf
copy
#9ef5cf
copy
#e8ffb1
copy
CSS Code
Go fullscreen
#48466d
copy
#3d84a8
copy
#46cdcf
copy
#abedd8
copy
CSS Code
Go fullscreen
#266f89
copy
#3d93a3
copy
#3ec483
copy
#d2e48e
copy
CSS Code
Go fullscreen
#062c80
copy
#0e6ac7
copy
#4fb9fc
copy
#f6f5da
copy
CSS Code
Go fullscreen
#634258
copy
#6d6087
copy
#60a0b0
copy
#9ad1aa
copy
CSS Code
Go fullscreen
#29d2e4
copy
#13829b
copy
#fcc29a
copy
#fde9c9
copy
CSS Code
Go fullscreen
#6fe7dd
copy
#3490de
copy
#6639a6
copy
#521262
copy
CSS Code
Go fullscreen
#fba834
copy
#fce850
copy
#387adf
copy
#50c4ed
copy
CSS Code
Go fullscreen
#010a43
copy
#ffc2c2
copy
#ff9d9d
copy
#ff2e63
copy
CSS Code
Go fullscreen
#7a81eb
copy
#504aa7
copy
#253361
copy
#599597
copy
CSS Code
Go fullscreen
#e4f1fe
copy
#8dc6ff
copy
#22313f
copy
#34495e
copy
CSS Code
Go fullscreen
#222831
copy
#393e46
copy
#00adb5
copy
#00fff5
copy
CSS Code
Go fullscreen
#5c4b77
copy
#6990e4
copy
#b145ad
copy
#f6a2d4
copy
CSS Code
Go fullscreen
#f6efb4
copy
#35c2bd
copy
#2796cb
copy
#3379e4
copy
CSS Code
Go fullscreen
#111d5e
copy
#b21f66
copy
#fe346e
copy
#ffbd69
copy
CSS Code
Go fullscreen
#08085e
copy
#a2ef44
copy
#fff07a
copy
#e8fcf6
copy
CSS Code
Go fullscreen
#2f3c4f
copy
#506f86
copy
#fbb040
copy
#de703c
copy
CSS Code
Go fullscreen
#43bfc7
copy
#69e9f5
copy
#645fce
copy
#40356f
copy
CSS Code
Go fullscreen
#1b3c59
copy
#456173
copy
#a6ed8e
copy
#f2f2f0
copy
CSS Code
Go fullscreen
#e8e8e8
copy
#5588a3
copy
#145374
copy
#00334e
copy
CSS Code
Go fullscreen
#feff94
copy
#ad64c5
copy
#88d8ec
copy
#bcfff2
copy
CSS Code
Go fullscreen
#083358
copy
#0f4471
copy
#fc3c3c
copy
#f6f6f6
copy
CSS Code
Go fullscreen
#0e0220
copy
#e40475
copy
#48e0e4
copy
#d7fbf6
copy
CSS Code
Go fullscreen
#ff5200
copy
#003355
copy
#04536c
copy
#adaca7
copy
CSS Code
Go fullscreen
#233142
copy
#455d7a
copy
#f95959
copy
#e3e3e3
copy
CSS Code
Go fullscreen
#deecfc
copy
#b9ceeb
copy
#87a8d0
copy
#c3b4d2
copy
CSS Code
Go fullscreen
#062d92
copy
#046fdb
copy
#03d6d2
copy
#fffcbf
copy
CSS Code
Go fullscreen
#00649f
copy
#01aac1
copy
#00dbe7
copy
#97ecc5
copy
CSS Code
Go fullscreen
#856c8b
copy
#d4ebd0
copy
#a4c5c6
copy
#ffeb99
copy
CSS Code
Go fullscreen
#8aacff
copy
#6151bb
copy
#d7f096
copy
#67ba6d
copy
CSS Code
Go fullscreen
#adf7d1
copy
#95e8d7
copy
#7dace4
copy
#8971d0
copy
CSS Code
Go fullscreen
#f7aa00
copy
#235784
copy
#40a8c4
copy
#bcdbdf
copy
CSS Code
Go fullscreen
#3c3b5c
copy
#d53939
copy
#ffb563
copy
#7b3c59
copy
CSS Code
Go fullscreen
#ffd1bd
copy
#ffb0cd
copy
#ffffff
copy
#c2f0fc
copy
CSS Code
Go fullscreen
#022c43
copy
#053f5e
copy
#115173
copy
#ffd700
copy
CSS Code
Go fullscreen
#1b3c59
copy
#456173
copy
#11bfae
copy
#f2f2f0
copy
CSS Code
Go fullscreen
#0e3150
copy
#6dc9c8
copy
#ffc0c2
copy
#f7e9e3
copy
CSS Code
Go fullscreen
#f5f5f5
copy
#30e3ca
copy
#2f89fc
copy
#40514e
copy
CSS Code
Go fullscreen
#f1e58a
copy
#4c5374
copy
#71647c
copy
#d0f0f7
copy
CSS Code
Go fullscreen
#211572
copy
#24bddf
copy
#f4f4f4
copy
#fffdbb
copy
CSS Code
Go fullscreen
#f3f6f6
copy
#90eee1
copy
#55b3f3
copy
#6356e5
copy
CSS Code
Go fullscreen
#324e7b
copy
#86a6df
copy
#5068a9
copy
#f8f8f8
copy
CSS Code
Go fullscreen
#5dacbd
copy
#24527a
copy
#a7bcb9
copy
#e0ebeb
copy
CSS Code
Go fullscreen
#1a2c5b
copy
#3e4e88
copy
#7971ea
copy
#b8dff0
copy
CSS Code
Go fullscreen
#ebd9dd
copy
#d8aed3
copy
#9182c4
copy
#486989
copy
CSS Code
Go fullscreen
#18587a
copy
#fc624d
copy
#fca7a7
copy
#ffd6d6
copy
CSS Code
Go fullscreen
#005874
copy
#1c819e
copy
#e6e6d4
copy
#ffbe00
copy
CSS Code
Go fullscreen
#ece493
copy
#84a1be
copy
#5c7893
copy
#535962
copy
CSS Code
Go fullscreen
#05004e
copy
#ff0000
copy
#fb7777
copy
#ffcccc
copy
CSS Code
Go fullscreen
#141829
copy
#21294c
copy
#f2dea8
copy
#f9f2d7
copy
CSS Code
Go fullscreen
#d5def5
copy
#8594e4
copy
#6643b5
copy
#430f58
copy
CSS Code
Go fullscreen
#61f2f5
copy
#ffffff
copy
#e0e0e0
copy
#723881
copy
CSS Code
Go fullscreen
#98d8ff
copy
#796dce
copy
#694b7c
copy
#402a30
copy
CSS Code
Go fullscreen
#c7f5fe
copy
#fcc8f8
copy
#eab4f8
copy
#f3f798
copy
CSS Code
Go fullscreen
#f46188
copy
#491d7f
copy
#642ab6
copy
#7779ff
copy
CSS Code
Go fullscreen
#f1f6f5
copy
#9ef4e6
copy
#12cc94
copy
#6088bb
copy
CSS Code
Go fullscreen
#233142
copy
#4f9da6
copy
#facf5a
copy
#ff5959
copy
CSS Code
Go fullscreen
#ff008e
copy
#124e96
copy
#0d8abc
copy
#daeaf6
copy
CSS Code
Go fullscreen
#f3ecc8
copy
#78c2c3
copy
#3f6699
copy
#0d1b4c
copy
CSS Code
Go fullscreen
#bef2ff
copy
#4f7097
copy
#93a7d1
copy
#1bf5af
copy
CSS Code
Go fullscreen
#ffdede
copy
#f7f3ce
copy
#c5ecbe
copy
#4797b1
copy
CSS Code
Go fullscreen
#f4f787
copy
#85eb4e
copy
#32c38c
copy
#3f84ac
copy
CSS Code
Go fullscreen
#282d4f
copy
#23103a
copy
#a0204c
copy
#ff6c00
copy
CSS Code
Go fullscreen
#f9fcfd
copy
#c9eff9
copy
#07a4b5
copy
#fed8a7
copy
CSS Code
Go fullscreen
#f6f078
copy
#01d28e
copy
#434982
copy
#730068
copy
CSS Code
Go fullscreen
#f7fbfc
copy
#d6e6f2
copy
#b9d7ea
copy
#769fcd
copy
CSS Code
Go fullscreen
#ffb400
copy
#fffbe0
copy
#2994b2
copy
#474744
copy
CSS Code
Go fullscreen
#ffabe5
copy
#c7f5ff
copy
#d89fff
copy
#f6fcae
copy
CSS Code
Go fullscreen
#3ec1d3
copy
#f6f7d7
copy
#ff9a00
copy
#ff165d
copy
CSS Code
Go fullscreen
#b9f9ff
copy
#dafdff
copy
#f7e590
copy
#f5cd6d
copy
CSS Code
Go fullscreen
#2185d5
copy
#3a4750
copy
#303841
copy
#f3f3f3
copy
CSS Code
Go fullscreen
#011f3f
copy
#0960bd
copy
#429ffd
copy
#fef2bf
copy
CSS Code
Go fullscreen
#f9c4ac
copy
#626f92
copy
#474168
copy
#272637
copy
CSS Code
Go fullscreen
#fafdcb
copy
#aee7e8
copy
#28c3d4
copy
#248ea9
copy
CSS Code
Go fullscreen
#b2b7ff
copy
#d5e8ff
copy
#d9a2f1
copy
#d86f9b
copy
CSS Code
Go fullscreen
#f23557
copy
#f0d43a
copy
#22b2da
copy
#3b4a6b
copy
CSS Code
Go fullscreen
#e9fadd
copy
#b8e4c9
copy
#3f5468
copy
#42291c
copy
CSS Code
Go fullscreen
#23425f
copy
#a64942
copy
#ff7844
copy
#ffab5e
copy
CSS Code
Go fullscreen
#f3d1f4
copy
#f5fcc1
copy
#bae5e5
copy
#98d6ea
copy
CSS Code
Go fullscreen
#090088
copy
#930077
copy
#e4007c
copy
#ffbd39
copy
CSS Code
Go fullscreen
#e4f5e5
copy
#a6dfde
copy
#88a6e5
copy
#8d6ec8
copy
CSS Code
Go fullscreen
#523f79
copy
#807be4
copy
#73cff0
copy
#afffea
copy
CSS Code
Go fullscreen
#b0e6ff
copy
#7687db
copy
#8f45a9
copy
#582e48
copy
CSS Code
Go fullscreen
#eeeeee
copy
#234c63
copy
#379956
copy
#ffc85b
copy
CSS Code
Go fullscreen
#a3a7e4
copy
#bae2be
copy
#f0f1b3
copy
#c5e5e3
copy
CSS Code
Go fullscreen
#182952
copy
#2b3595
copy
#7045af
copy
#e14594
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.