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
#f7b449
copy
#dde9f8
copy
#8293e3
copy
#5847ad
copy
CSS Code
Go fullscreen
#303481
copy
#d6e6f2
copy
#f5f5f5
copy
#fff200
copy
CSS Code
Go fullscreen
#ffd1bd
copy
#ffb0cd
copy
#ffffff
copy
#c2f0fc
copy
CSS Code
Go fullscreen
#f1e58a
copy
#4c5374
copy
#71647c
copy
#d0f0f7
copy
CSS Code
Go fullscreen
#7a81eb
copy
#504aa7
copy
#253361
copy
#599597
copy
CSS Code
Go fullscreen
#e9007f
copy
#7cdfff
copy
#d5fffb
copy
#fcffc8
copy
CSS Code
Go fullscreen
#b0deff
copy
#ffc5a1
copy
#ffd19a
copy
#fff8a6
copy
CSS Code
Go fullscreen
#f38181
copy
#fce38a
copy
#eaffd0
copy
#95e1d3
copy
CSS Code
Go fullscreen
#abf2fb
copy
#b589ef
copy
#a964cd
copy
#f1a3c5
copy
CSS Code
Go fullscreen
#dddddd
copy
#516c8d
copy
#28385e
copy
#304163
copy
CSS Code
Go fullscreen
#e3e8f8
copy
#c0c5cd
copy
#3e588f
copy
#203562
copy
CSS Code
Go fullscreen
#323643
copy
#606470
copy
#93deff
copy
#f7f7f7
copy
CSS Code
Go fullscreen
#fffbe0
copy
#fce38a
copy
#2994b2
copy
#444f5a
copy
CSS Code
Go fullscreen
#ff5ab0
copy
#f7fed4
copy
#4df4ff
copy
#1bb5ec
copy
CSS Code
Go fullscreen
#422b72
copy
#266d98
copy
#3cb29a
copy
#c4f080
copy
CSS Code
Go fullscreen
#ffd5e5
copy
#ffffdd
copy
#a0ffe6
copy
#81f5ff
copy
CSS Code
Go fullscreen
#083c5a
copy
#4cb648
copy
#fcc72c
copy
#e4f4fd
copy
CSS Code
Go fullscreen
#f1fcfd
copy
#c7eeff
copy
#4d6de3
copy
#393737
copy
CSS Code
Go fullscreen
#413c69
copy
#4a47a3
copy
#ad62aa
copy
#eab9c9
copy
CSS Code
Go fullscreen
#ffed78
copy
#feffea
copy
#addce4
copy
#586b8f
copy
CSS Code
Go fullscreen
#23374d
copy
#1089ff
copy
#e5e5e5
copy
#eeeeee
copy
CSS Code
Go fullscreen
#a1d9ff
copy
#ca82f8
copy
#ed93cb
copy
#f2bbbb
copy
CSS Code
Go fullscreen
#288fb4
copy
#1d556f
copy
#efddb2
copy
#fa360a
copy
CSS Code
Go fullscreen
#7b99fa
copy
#53cdd8
copy
#96eab7
copy
#f1f3b8
copy
CSS Code
Go fullscreen
#ffdede
copy
#f7f3ce
copy
#c5ecbe
copy
#4797b1
copy
CSS Code
Go fullscreen
#303841
copy
#47555e
copy
#7aa5d2
copy
#eeeeee
copy
CSS Code
Go fullscreen
#c8f0f0
copy
#86d8dc
copy
#7047a3
copy
#3a276a
copy
CSS Code
Go fullscreen
#3f52e3
copy
#f6f6f6
copy
#efe891
copy
#f12d2d
copy
CSS Code
Go fullscreen
#414a50
copy
#85a6b1
copy
#8bd7d1
copy
#caedde
copy
CSS Code
Go fullscreen
#866ec7
copy
#8f71ff
copy
#82acff
copy
#b7fbff
copy
CSS Code
Go fullscreen
#07588a
copy
#6ac1b8
copy
#bfe9db
copy
#e1f6f4
copy
CSS Code
Go fullscreen
#14103b
copy
#f02a71
copy
#7ec0e4
copy
#6789ba
copy
CSS Code
Go fullscreen
#05004e
copy
#ff0000
copy
#fb7777
copy
#ffcccc
copy
CSS Code
Go fullscreen
#a561ff
copy
#fd72ad
copy
#fcce9e
copy
#cfe3ff
copy
CSS Code
Go fullscreen
#194769
copy
#f6f6e9
copy
#d7eef2
copy
#f2855e
copy
CSS Code
Go fullscreen
#c7f5fe
copy
#fcc8f8
copy
#eab4f8
copy
#f3f798
copy
CSS Code
Go fullscreen
#2c2955
copy
#4c5fb1
copy
#f9f194
copy
#cdd582
copy
CSS Code
Go fullscreen
#2aaf74
copy
#4ed99c
copy
#d1ebfe
copy
#f7be7f
copy
CSS Code
Go fullscreen
#4cb3cd
copy
#52d6d3
copy
#5968b1
copy
#302579
copy
CSS Code
Go fullscreen
#76d3ff
copy
#d78bff
copy
#fffa9d
copy
#ffbd74
copy
CSS Code
Go fullscreen
#a8e0e1
copy
#5a96bb
copy
#75448c
copy
#c46caa
copy
CSS Code
Go fullscreen
#ff9090
copy
#ffcf7f
copy
#fffa62
copy
#89c4ff
copy
CSS Code
Go fullscreen
#f1f4f6
copy
#5ac8d8
copy
#597fca
copy
#2552ac
copy
CSS Code
Go fullscreen
#eff0f4
copy
#d3d6db
copy
#415f9d
copy
#233b6e
copy
CSS Code
Go fullscreen
#ff5656
copy
#edf2f6
copy
#6a7efc
copy
#494953
copy
CSS Code
Go fullscreen
#e42c64
copy
#614ad3
copy
#2d248a
copy
#121b74
copy
CSS Code
Go fullscreen
#f0f0f0
copy
#43dde6
copy
#364f6b
copy
#fc5185
copy
CSS Code
Go fullscreen
#a3a7e4
copy
#bae2be
copy
#f0f1b3
copy
#c5e5e3
copy
CSS Code
Go fullscreen
#fafafa
copy
#c7eeff
copy
#0077c0
copy
#1d242b
copy
CSS Code
Go fullscreen
#113f67
copy
#34699a
copy
#408ab4
copy
#65c6c4
copy
CSS Code
Go fullscreen
#425e92
copy
#0c81f6
copy
#5fe1d9
copy
#f7fad1
copy
CSS Code
Go fullscreen
#657dc4
copy
#838ed9
copy
#ece8e5
copy
#f59292
copy
CSS Code
Go fullscreen
#95efce
copy
#2ea1d9
copy
#395ea6
copy
#3e467f
copy
CSS Code
Go fullscreen
#b1e9a3
copy
#7ac38f
copy
#88e0d0
copy
#c7eeff
copy
CSS Code
Go fullscreen
#211572
copy
#48c0d3
copy
#dedede
copy
#ffe578
copy
CSS Code
Go fullscreen
#feff94
copy
#ad64c5
copy
#88d8ec
copy
#bcfff2
copy
CSS Code
Go fullscreen
#1333a6
copy
#317ae1
copy
#1fdedb
copy
#fffcbf
copy
CSS Code
Go fullscreen
#e4fffe
copy
#a4f6f9
copy
#ff99fe
copy
#ba52ed
copy
CSS Code
Go fullscreen
#0c056d
copy
#590d82
copy
#b61aae
copy
#f25d9c
copy
CSS Code
Go fullscreen
#ffdfdf
copy
#fbc1bc
copy
#315b96
copy
#233567
copy
CSS Code
Go fullscreen
#ffe6eb
copy
#defcfc
copy
#cbf1f5
copy
#a6e3e9
copy
CSS Code
Go fullscreen
#d5eeff
copy
#f7ca44
copy
#a2792f
copy
#5c3c10
copy
CSS Code
Go fullscreen
#e0fffb
copy
#29cdb5
copy
#008698
copy
#f39c9c
copy
CSS Code
Go fullscreen
#2185d5
copy
#3a4750
copy
#303841
copy
#f3f3f3
copy
CSS Code
Go fullscreen
#005689
copy
#007cb9
copy
#f6c667
copy
#f1f8fd
copy
CSS Code
Go fullscreen
#48f3db
copy
#51c4e9
copy
#6150c1
copy
#4a3764
copy
CSS Code
Go fullscreen
#d9dad7
copy
#c24d2c
copy
#3e4a61
copy
#1a2639
copy
CSS Code
Go fullscreen
#1b3c59
copy
#456173
copy
#11bfae
copy
#f2f2f0
copy
CSS Code
Go fullscreen
#222831
copy
#393e46
copy
#00adb5
copy
#00fff5
copy
CSS Code
Go fullscreen
#bef2eb
copy
#6dc995
copy
#3a91aa
copy
#6b4897
copy
CSS Code
Go fullscreen
#4531b1
copy
#a836ad
copy
#f16896
copy
#fff0a4
copy
CSS Code
Go fullscreen
#eeeeee
copy
#cde8f6
copy
#d195f9
copy
#0033c7
copy
CSS Code
Go fullscreen
#83e4b5
copy
#3ec8ac
copy
#4e90a4
copy
#6e60a0
copy
CSS Code
Go fullscreen
#247291
copy
#f8da5b
copy
#eef2e2
copy
#f5f9ee
copy
CSS Code
Go fullscreen
#ecfeff
copy
#00b7c2
copy
#128494
copy
#4ef037
copy
CSS Code
Go fullscreen
#d2e4f1
copy
#8facc0
copy
#818d97
copy
#484d51
copy
CSS Code
Go fullscreen
#eef2f5
copy
#ea168e
copy
#612570
copy
#1eafed
copy
CSS Code
Go fullscreen
#7c6fff
copy
#5ca9ff
copy
#fcff90
copy
#ffde68
copy
CSS Code
Go fullscreen
#edf7fa
copy
#5f6caf
copy
#ffb677
copy
#ff8364
copy
CSS Code
Go fullscreen
#7fcbd7
copy
#857ebb
copy
#ca9dd7
copy
#facbd3
copy
CSS Code
Go fullscreen
#0c2233
copy
#065471
copy
#0a91ab
copy
#ffc045
copy
CSS Code
Go fullscreen
#d3f6f3
copy
#f9fce1
copy
#fee9b2
copy
#fbd1b7
copy
CSS Code
Go fullscreen
#9a69e1
copy
#47429d
copy
#f7b7f3
copy
#e27393
copy
CSS Code
Go fullscreen
#182952
copy
#2b3595
copy
#7045af
copy
#e14594
copy
CSS Code
Go fullscreen
#ececeb
copy
#f9a828
copy
#07617d
copy
#2e383f
copy
CSS Code
Go fullscreen
#7696db
copy
#562d7d
copy
#ae427b
copy
#ff8a98
copy
CSS Code
Go fullscreen
#45eba5
copy
#21aba5
copy
#1d566e
copy
#163a5f
copy
CSS Code
Go fullscreen
#faee5a
copy
#e4fcf9
copy
#ace6f6
copy
#4b89ac
copy
CSS Code
Go fullscreen
#1a2849
copy
#505bda
copy
#b063c5
copy
#ffaac3
copy
CSS Code
Go fullscreen
#ffffe7
copy
#c6e5f3
copy
#539ddb
copy
#084a83
copy
CSS Code
Go fullscreen
#f9fa9b
copy
#ff7777
copy
#ceecf0
copy
#f0f3f3
copy
CSS Code
Go fullscreen
#005874
copy
#1c819e
copy
#e6e6d4
copy
#ffbe00
copy
CSS Code
Go fullscreen
#dd0a35
copy
#e4d1d3
copy
#1687a7
copy
#014955
copy
CSS Code
Go fullscreen
#081f37
copy
#5fc9f3
copy
#2e79ba
copy
#1e549f
copy
CSS Code
Go fullscreen
#b7b9f4
copy
#5254d8
copy
#192294
copy
#000278
copy
CSS Code
Go fullscreen
#e3c4a8
copy
#4592af
copy
#226089
copy
#000000
copy
CSS Code
Go fullscreen
#d5f7ff
copy
#494b67
copy
#ff006c
copy
#ecebff
copy
CSS Code
Go fullscreen
#00c3ff
copy
#b463a6
copy
#5c4978
copy
#3b475e
copy
CSS Code
Go fullscreen
#d2f6fc
copy
#a9d2ff
copy
#7984ee
copy
#6730ec
copy
CSS Code
Go fullscreen
#151680
copy
#1c44ac
copy
#375fc0
copy
#f1fea4
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.