fbpx

Web design made easy.

Design + Tech Tips for WordPress and Divi.

Website Colour Schemes

•••

Picking a colour scheme is one of the hardest things a designer has to do. Often clients don’t know what they need. I’ve saved you some trouble. Here you’ll find colour schemes to use in all your website designs.

Under each image are copy and pasteable CSS codes for HEX, RGBA, and HSLA.

This page will be updated regularly with new colour schemes. Bookmark it for easy access.

earthy

HEX & CSS Codes

/* Color Theme Swatches in Hex */
.Cinnamon-powder-isolated-on-white-background,-top-view-1-hex { color: #D9AB82; }
.Cinnamon-powder-isolated-on-white-background,-top-view-2-hex { color: #A66B49; }
.Cinnamon-powder-isolated-on-white-background,-top-view-3-hex { color: #F2D4C2; }
.Cinnamon-powder-isolated-on-white-background,-top-view-4-hex { color: #8C4C35; }
.Cinnamon-powder-isolated-on-white-background,-top-view-5-hex { color: #F2F2F2; }

/* Color Theme Swatches in RGBA */
.Cinnamon-powder-isolated-on-white-background,-top-view-1-rgba { color: rgba(216, 170, 130, 1); }
.Cinnamon-powder-isolated-on-white-background,-top-view-2-rgba { color: rgba(165, 106, 72, 1); }
.Cinnamon-powder-isolated-on-white-background,-top-view-3-rgba { color: rgba(242, 211, 193, 1); }
.Cinnamon-powder-isolated-on-white-background,-top-view-4-rgba { color: rgba(140, 76, 53, 1); }
.Cinnamon-powder-isolated-on-white-background,-top-view-5-rgba { color: rgba(242, 242, 242, 1); }

/* Color Theme Swatches in HSLA */
.Cinnamon-powder-isolated-on-white-background,-top-view-1-hsla { color: hsla(28, 53, 68, 1); }
.Cinnamon-powder-isolated-on-white-background,-top-view-2-hsla { color: hsla(22, 38, 46, 1); }
.Cinnamon-powder-isolated-on-white-background,-top-view-3-hsla { color: hsla(22, 65, 85, 1); }
.Cinnamon-powder-isolated-on-white-background,-top-view-4-hsla { color: hsla(16, 44, 37, 1); }
.Cinnamon-powder-isolated-on-white-background,-top-view-5-hsla { color: hsla(0, 0, 95, 1); }

HEX & CSS Codes

/* Color Theme Swatches in Hex */
.Game-Design-1-hex { color: #A6263E; }
.Game-Design-2-hex { color: #F2B3D1; }
.Game-Design-3-hex { color: #F2BC79; }
.Game-Design-4-hex { color: #F26938; }
.Game-Design-5-hex { color: #F2A7A0; }

/* Color Theme Swatches in RGBA */
.Game-Design-1-rgba { color: rgba(165, 38, 61, 1); }
.Game-Design-2-rgba { color: rgba(242, 179, 208, 1); }
.Game-Design-3-rgba { color: rgba(242, 187, 121, 1); }
.Game-Design-4-rgba { color: rgba(242, 105, 55, 1); }
.Game-Design-5-rgba { color: rgba(242, 166, 159, 1); }

/* Color Theme Swatches in HSLA */
.Game-Design-1-hsla { color: hsla(348, 62, 39, 1); }
.Game-Design-2-hsla { color: hsla(331, 71, 82, 1); }
.Game-Design-3-hsla { color: hsla(33, 82, 71, 1); }
.Game-Design-4-hsla { color: hsla(16, 87, 58, 1); }
.Game-Design-5-hsla { color: hsla(5, 76, 78, 1); }

HEX & CSS Codes

/* Color Theme Swatches in Hex */
.Salesman-Site—Burned-Leather-1-hex { color: #E4F2EE; }
.Salesman-Site—Burned-Leather-2-hex { color: #262622; }
.Salesman-Site—Burned-Leather-3-hex { color: #593622; }
.Salesman-Site—Burned-Leather-4-hex { color: #736055; }
.Salesman-Site—Burned-Leather-5-hex { color: #D0944A; }

/* Color Theme Swatches in RGBA */
.Salesman-Site—Burned-Leather-1-rgba { color: rgba(228, 242, 238, 1); }
.Salesman-Site—Burned-Leather-2-rgba { color: rgba(38, 38, 34, 1); }
.Salesman-Site—Burned-Leather-3-rgba { color: rgba(89, 54, 34, 1); }
.Salesman-Site—Burned-Leather-4-rgba { color: rgba(115, 96, 85, 1); }
.Salesman-Site—Burned-Leather-5-rgba { color: rgba(208, 148, 74, 1); }

/* Color Theme Swatches in HSLA */
.Salesman-Site—Burned-Leather-1-hsla { color: hsla(162, 34, 92, 1); }
.Salesman-Site—Burned-Leather-2-hsla { color: hsla(60, 5, 14, 1); }
.Salesman-Site—Burned-Leather-3-hsla { color: hsla(21, 44, 24, 1); }
.Salesman-Site—Burned-Leather-4-hsla { color: hsla(22, 15, 39, 1); }
.Salesman-Site—Burned-Leather-5-hsla { color: hsla(33, 58, 55, 1); }

HEX & CSS Codes

/* Color Theme Swatches in Hex */
.Fashion-1-hex { color: #D99F59; }
.Fashion-2-hex { color: #BF7839; }
.Fashion-3-hex { color: #D9B596; }
.Fashion-4-hex { color: #8C6A56; }
.Fashion-5-hex { color: #733F34; }

/* Color Theme Swatches in RGBA */
.Fashion-1-rgba { color: rgba(216, 159, 88, 1); }
.Fashion-2-rgba { color: rgba(191, 119, 57, 1); }
.Fashion-3-rgba { color: rgba(216, 180, 149, 1); }
.Fashion-4-rgba { color: rgba(140, 105, 85, 1); }
.Fashion-5-rgba { color: rgba(114, 63, 51, 1); }

/* Color Theme Swatches in HSLA */
.Fashion-1-hsla { color: hsla(33, 62, 59, 1); }
.Fashion-2-hsla { color: hsla(28, 53, 48, 1); }
.Fashion-3-hsla { color: hsla(28, 46, 71, 1); }
.Fashion-4-hsla { color: hsla(22, 24, 44, 1); }
.Fashion-5-hsla { color: hsla(11, 37, 32, 1); }

corporate

HEX & CSS Codes

/* Color Theme Swatches in Hex */
.Illustration-1-hex { color: #021859; }
.Illustration-2-hex { color: #253259; }
.Illustration-3-hex { color: #D8E6F2; }
.Illustration-4-hex { color: #2493BF; }
.Illustration-5-hex { color: #6CBAD9; }

/* Color Theme Swatches in RGBA */
.Illustration-1-rgba { color: rgba(1, 23, 89, 1); }
.Illustration-2-rgba { color: rgba(36, 49, 89, 1); }
.Illustration-3-rgba { color: rgba(215, 229, 242, 1); }
.Illustration-4-rgba { color: rgba(36, 147, 191, 1); }
.Illustration-5-rgba { color: rgba(108, 186, 216, 1); }

/* Color Theme Swatches in HSLA */
.Illustration-1-hsla { color: hsla(225, 96, 17, 1); }
.Illustration-2-hsla { color: hsla(225, 41, 24, 1); }
.Illustration-3-hsla { color: hsla(208, 51, 89, 1); }
.Illustration-4-hsla { color: hsla(196, 68, 44, 1); }
.Illustration-5-hsla { color: hsla(196, 58, 63, 1); }

HEX & CSS Codes

/* Color Theme Swatches in Hex */
.Corporate–Gods-1-hex { color: #000000; }
.Corporate–Gods-2-hex { color: #666666; }
.Corporate–Gods-3-hex { color: #ABAB90; }
.Corporate–Gods-4-hex { color: #FFFFFF; }
.Corporate–Gods-5-hex { color: #2A415E; }

/* Color Theme Swatches in RGBA */
.Corporate–Gods-1-rgba { color: rgba(0, 0, 0, 1); }
.Corporate–Gods-2-rgba { color: rgba(102, 102, 102, 1); }
.Corporate–Gods-3-rgba { color: rgba(170, 170, 143, 1); }
.Corporate–Gods-4-rgba { color: rgba(255, 255, 255, 1); }
.Corporate–Gods-5-rgba { color: rgba(41, 65, 93, 1); }

/* Color Theme Swatches in HSLA */
.Corporate–Gods-1-hsla { color: hsla(0, 0, 0, 1); }
.Corporate–Gods-2-hsla { color: hsla(0, 0, 40, 1); }
.Corporate–Gods-3-hsla { color: hsla(60, 13, 61, 1); }
.Corporate–Gods-4-hsla { color: hsla(0, 0, 100, 1); }
.Corporate–Gods-5-hsla { color: hsla(212, 38, 26, 1); }

HEX & CSS Codes

/* Color Theme Swatches in Hex */
.Sopris-Capital-Colour-Palette-1-hex { color: #EEEEEE; }
.Sopris-Capital-Colour-Palette-2-hex { color: #FFFFFF; }
.Sopris-Capital-Colour-Palette-3-hex { color: #9EC3D3; }
.Sopris-Capital-Colour-Palette-4-hex { color: #004C64; }
.Sopris-Capital-Colour-Palette-5-hex { color: #666666; }

/* Color Theme Swatches in RGBA */
.Sopris-Capital-Colour-Palette-1-rgba { color: rgba(237, 237, 237, 1); }
.Sopris-Capital-Colour-Palette-2-rgba { color: rgba(255, 255, 255, 1); }
.Sopris-Capital-Colour-Palette-3-rgba { color: rgba(158, 195, 211, 1); }
.Sopris-Capital-Colour-Palette-4-rgba { color: rgba(0, 75, 100, 1); }
.Sopris-Capital-Colour-Palette-5-rgba { color: rgba(102, 102, 102, 1); }

/* Color Theme Swatches in HSLA */
.Sopris-Capital-Colour-Palette-1-hsla { color: hsla(0, 0, 93, 1); }
.Sopris-Capital-Colour-Palette-2-hsla { color: hsla(0, 0, 100, 1); }
.Sopris-Capital-Colour-Palette-3-hsla { color: hsla(198, 37, 72, 1); }
.Sopris-Capital-Colour-Palette-4-hsla { color: hsla(194, 100, 19, 1); }
.Sopris-Capital-Colour-Palette-5-hsla { color: hsla(0, 0, 40, 1); }

HEX & CSS Codes

/* Color Theme Swatches in Hex */
.corporate-HT-1-hex { color: #1F566C; }
.corporate-HT-2-hex { color: #0372A1; }
.corporate-HT-3-hex { color: #003B54; }
.corporate-HT-4-hex { color: #2F7FA1; }
.corporate-HT-5-hex { color: #07A8EE; }

/* Color Theme Swatches in RGBA */
.corporate-HT-1-rgba { color: rgba(31, 85, 108, 1); }
.corporate-HT-2-rgba { color: rgba(2, 113, 161, 1); }
.corporate-HT-3-rgba { color: rgba(0, 59, 84, 1); }
.corporate-HT-4-rgba { color: rgba(47, 127, 160, 1); }
.corporate-HT-5-rgba { color: rgba(6, 167, 237, 1); }

/* Color Theme Swatches in HSLA */
.corporate-HT-1-hsla { color: hsla(197, 54, 27, 1); }
.corporate-HT-2-hsla { color: hsla(198, 96, 32, 1); }
.corporate-HT-3-hsla { color: hsla(197, 100, 16, 1); }
.corporate-HT-4-hsla { color: hsla(197, 54, 40, 1); }
.corporate-HT-5-hsla { color: hsla(198, 94, 47, 1); }

Feminine

HEX & CSS Codes

/* Color Theme Swatches in Hex */
.Copy-of-Feminine-earth-tones-1-hex { color: #947C8E; }
.Copy-of-Feminine-earth-tones-2-hex { color: #E1DAD8; }
.Copy-of-Feminine-earth-tones-3-hex { color: #657685; }
.Copy-of-Feminine-earth-tones-4-hex { color: #979FA9; }
.Copy-of-Feminine-earth-tones-5-hex { color: #7B7F94; }

/* Color Theme Swatches in RGBA */
.Copy-of-Feminine-earth-tones-1-rgba { color: rgba(147, 124, 142, 1); }
.Copy-of-Feminine-earth-tones-2-rgba { color: rgba(225, 218, 216, 1); }
.Copy-of-Feminine-earth-tones-3-rgba { color: rgba(100, 117, 133, 1); }
.Copy-of-Feminine-earth-tones-4-rgba { color: rgba(151, 158, 168, 1); }
.Copy-of-Feminine-earth-tones-5-rgba { color: rgba(123, 126, 147, 1); }

/* Color Theme Swatches in HSLA */
.Copy-of-Feminine-earth-tones-1-hsla { color: hsla(314, 10, 53, 1); }
.Copy-of-Feminine-earth-tones-2-hsla { color: hsla(13, 13, 86, 1); }
.Copy-of-Feminine-earth-tones-3-hsla { color: hsla(208, 13, 45, 1); }
.Copy-of-Feminine-earth-tones-4-hsla { color: hsla(213, 9, 62, 1); }
.Copy-of-Feminine-earth-tones-5-hsla { color: hsla(230, 10, 53, 1); }

HEX & CSS Codes

/* Color Theme Swatches in Hex */
.Graphic-Design-1-hex { color: #F2958D; }
.Graphic-Design-2-hex { color: #A66E68; }
.Graphic-Design-3-hex { color: #F2F2F2; }
.Graphic-Design-4-hex { color: #D9D9D9; }
.Graphic-Design-5-hex { color: #404040; }

/* Color Theme Swatches in RGBA */
.Graphic-Design-1-rgba { color: rgba(242, 148, 140, 1); }
.Graphic-Design-2-rgba { color: rgba(165, 109, 104, 1); }
.Graphic-Design-3-rgba { color: rgba(242, 242, 242, 1); }
.Graphic-Design-4-rgba { color: rgba(216, 216, 216, 1); }
.Graphic-Design-5-rgba { color: rgba(63, 63, 63, 1); }

/* Color Theme Swatches in HSLA */
.Graphic-Design-1-hsla { color: hsla(5, 79, 75, 1); }
.Graphic-Design-2-hsla { color: hsla(5, 25, 52, 1); }
.Graphic-Design-3-hsla { color: hsla(0, 0, 95, 1); }
.Graphic-Design-4-hsla { color: hsla(0, 0, 85, 1); }
.Graphic-Design-5-hsla { color: hsla(0, 0, 25, 1); }

HEX & CSS Codes

/* Color Theme Swatches in Hex */
.Feminine-Feathers-1-hex { color: #FFA881; }
.Feminine-Feathers-2-hex { color: #FFCA9D; }
.Feminine-Feathers-3-hex { color: #FFE4B7; }
.Feminine-Feathers-4-hex { color: #C9C8AB; }
.Feminine-Feathers-5-hex { color: #A69F87; }

/* Color Theme Swatches in RGBA */
.Feminine-Feathers-1-rgba { color: rgba(255, 167, 129, 1); }
.Feminine-Feathers-2-rgba { color: rgba(255, 202, 156, 1); }
.Feminine-Feathers-3-rgba { color: rgba(255, 228, 183, 1); }
.Feminine-Feathers-4-rgba { color: rgba(201, 199, 171, 1); }
.Feminine-Feathers-5-rgba { color: rgba(165, 159, 135, 1); }

/* Color Theme Swatches in HSLA */
.Feminine-Feathers-1-hsla { color: hsla(18, 100, 75, 1); }
.Feminine-Feathers-2-hsla { color: hsla(27, 100, 80, 1); }
.Feminine-Feathers-3-hsla { color: hsla(37, 100, 85, 1); }
.Feminine-Feathers-4-hsla { color: hsla(56, 21, 73, 1); }
.Feminine-Feathers-5-hsla { color: hsla(47, 14, 58, 1); }

HEX & CSS Codes

/* Color Theme Swatches in Hex */
.ingenue-1-hex { color: #F2798F; }
.ingenue-2-hex { color: #F2F1DC; }
.ingenue-3-hex { color: #F2CDAC; }
.ingenue-4-hex { color: #D9AB9A; }
.ingenue-5-hex { color: #BF8888; }

/* Color Theme Swatches in RGBA */
.ingenue-1-rgba { color: rgba(242, 121, 142, 1); }
.ingenue-2-rgba { color: rgba(242, 240, 219, 1); }
.ingenue-3-rgba { color: rgba(242, 205, 172, 1); }
.ingenue-4-rgba { color: rgba(216, 170, 154, 1); }
.ingenue-5-rgba { color: rgba(191, 135, 135, 1); }

/* Color Theme Swatches in HSLA */
.ingenue-1-hsla { color: hsla(349, 82, 71, 1); }
.ingenue-2-hsla { color: hsla(57, 45, 90, 1); }
.ingenue-3-hsla { color: hsla(28, 72, 81, 1); }
.ingenue-4-hsla { color: hsla(16, 45, 72, 1); }
.ingenue-5-hsla { color: hsla(0, 30, 64, 1); }

bold

HEX & CSS Codes

/* Color Theme Swatches in Hex */
.Graphic-Design-1-hex { color: #F2055C; }
.Graphic-Design-2-hex { color: #04ADBF; }
.Graphic-Design-3-hex { color: #41BFA8; }
.Graphic-Design-4-hex { color: #5EBF92; }
.Graphic-Design-5-hex { color: #F25C05; }

/* Color Theme Swatches in RGBA */
.Graphic-Design-1-rgba { color: rgba(242, 4, 91, 1); }
.Graphic-Design-2-rgba { color: rgba(3, 172, 191, 1); }
.Graphic-Design-3-rgba { color: rgba(65, 191, 168, 1); }
.Graphic-Design-4-rgba { color: rgba(93, 191, 145, 1); }
.Graphic-Design-5-rgba { color: rgba(242, 91, 4, 1); }

/* Color Theme Swatches in HSLA */
.Graphic-Design-1-hsla { color: hsla(337, 96, 48, 1); }
.Graphic-Design-2-hsla { color: hsla(185, 96, 38, 1); }
.Graphic-Design-3-hsla { color: hsla(168, 49, 50, 1); }
.Graphic-Design-4-hsla { color: hsla(151, 43, 55, 1); }
.Graphic-Design-5-hsla { color: hsla(22, 96, 48, 1); }

HEX & CSS Codes

/* Color Theme Swatches in Hex */
.Illustration-1-hex { color: #591420; }
.Illustration-2-hex { color: #D95578; }
.Illustration-3-hex { color: #433673; }
.Illustration-4-hex { color: #595573; }
.Illustration-5-hex { color: #F2DA5E; }

/* Color Theme Swatches in RGBA */
.Illustration-1-rgba { color: rgba(89, 19, 32, 1); }
.Illustration-2-rgba { color: rgba(216, 84, 119, 1); }
.Illustration-3-rgba { color: rgba(67, 53, 114, 1); }
.Illustration-4-rgba { color: rgba(88, 84, 114, 1); }
.Illustration-5-rgba { color: rgba(242, 217, 94, 1); }

/* Color Theme Swatches in HSLA */
.Illustration-1-hsla { color: hsla(348, 63, 21, 1); }
.Illustration-2-hsla { color: hsla(343, 63, 59, 1); }
.Illustration-3-hsla { color: hsla(253, 36, 33, 1); }
.Illustration-4-hsla { color: hsla(247, 14, 39, 1); }
.Illustration-5-hsla { color: hsla(50, 85, 66, 1); }

HEX & CSS Codes

/* Color Theme Swatches in Hex */
.Antoinette-1-hex { color: #F27E88; }
.Antoinette-2-hex { color: #F24968; }
.Antoinette-3-hex { color: #162D59; }
.Antoinette-4-hex { color: #EBF1F2; }
.Antoinette-5-hex { color: #BF754B; }

/* Color Theme Swatches in RGBA */
.Antoinette-1-rgba { color: rgba(242, 126, 136, 1); }
.Antoinette-2-rgba { color: rgba(242, 73, 104, 1); }
.Antoinette-3-rgba { color: rgba(22, 45, 89, 1); }
.Antoinette-4-rgba { color: rgba(235, 241, 242, 1); }
.Antoinette-5-rgba { color: rgba(191, 117, 75, 1); }

/* Color Theme Swatches in HSLA */
.Antoinette-1-hsla { color: hsla(354, 81, 72, 1); }
.Antoinette-2-hsla { color: hsla(348, 86, 61, 1); }
.Antoinette-3-hsla { color: hsla(219, 60, 21, 1); }
.Antoinette-4-hsla { color: hsla(188, 21, 93, 1); }
.Antoinette-5-hsla { color: hsla(21, 47, 52, 1); }

HEX & CSS Codes

/* Color Theme Swatches in Hex */
.Travel-1-hex { color: #024959; }
.Travel-2-hex { color: #027373; }
.Travel-3-hex { color: #F2B705; }
.Travel-4-hex { color: #F29F05; }
.Travel-5-hex { color: #F2B999; }

/* Color Theme Swatches in RGBA */
.Travel-1-rgba { color: rgba(2, 73, 89, 1); }
.Travel-2-rgba { color: rgba(2, 115, 115, 1); }
.Travel-3-rgba { color: rgba(242, 183, 5, 1); }
.Travel-4-rgba { color: rgba(242, 159, 5, 1); }
.Travel-5-rgba { color: rgba(242, 185, 153, 1); }

/* Color Theme Swatches in HSLA */
.Travel-1-hsla { color: hsla(191, 95, 17, 1); }
.Travel-2-hsla { color: hsla(180, 96, 22, 1); }
.Travel-3-hsla { color: hsla(45, 95, 48, 1); }
.Travel-4-hsla { color: hsla(38, 95, 48, 1); }
.Travel-5-hsla { color: hsla(21, 77, 77, 1); }